File Input
Angular Bootstrap File Input
Angular Bootstrap file input is a field which user can use to upload one or more files (photos, documents or any other file type) from the local storage.
Standard file inputs usually leave a lot to wish for in terms of design, but MDB takes care of that by enhancing them with Material Design best practices.
Most common use examples:
- CSV upload to CRM system
- Avatar picture upload
- Simple GIF upload
Below you can see a number of Angular Bootstrap file inputs created with Material Design for Bootstrap.
Basic example MDB Pro component
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';
@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})
export class FileInputComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
}
File input with floating button MDB Pro component
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';
@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})
export class FileInputComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
}
File input with gradient floating button MDB Pro component
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';
@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})
export class FileInputComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
}
File input with rounded outline button MDB Pro component
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';
@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})
export class FileInputComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
}
File input with rounded gradient button MDB Pro component
import { Component, EventEmitter } from '@angular/core';
import { UploadFile, UploadInput, UploadOutput } from 'ng-uikit-pro-standard';
import { humanizeBytes } from 'ng-uikit-pro-standard';
@Component({
selector: 'file-input-example',
templateUrl: 'file-input.html',
})
export class FileInputComponent {
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter();
this.humanizeBytes = humanizeBytes;
}
showFiles() {
let files = '';
for (let i = 0; i < this.files.length; i ++) {
files += this.files[i].name;
if (!(this.files.length - 1 === i)) {
files += ',';
}
}
return files;
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
onUploadOutput(output: UploadOutput | any): void {
if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
}
}