Topic: Using upload options not working as documented
*_Expected behavior_*I followed the exact instructions on [this page][https://mdbootstrap.com/docs/angular/forms/file-input/#docsTabsOverview] in the Using upload options section but changed the options to this:
this.options = {
concurrency: 25,
maxUploads: 25,
allowedContentTypes: ['image/jpeg']
};
Expected this to allow me to only choose JPGs and multiple JPGS
*_Actual behavior_*Was not able to choose multiple files and was not limited to JPGs.
photerloo pro premium answered 4 years ago
The template is this:
<form>
<div class="file-field md-form">
<div mdbBtn color="primary" size="sm" class="waves-light" mdbWavesEffect>
<span>Choose file</span>
<input type="file" mdbFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" placeholder="Upload your file" [value]="showFiles()">
</div>
</div>
<button mdbBtn color="primary" (click)="startUpload()">Start uploading</button>
</form>
The component is this
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<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.files = [];
this.uploadInput = new EventEmitter<UploadInput>();
this.humanizeBytes = humanizeBytes;
this.options = {
concurrency: 25,
maxUploads: 25,
allowedContentTypes: ['image/jpeg']
};
}
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 {
console.log('starting upload');
}
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();
}
}
Arkadiusz Idzikowski staff commented 4 years ago
Thank you for the example code. Could you provide more details about the reproduction steps? We tested that on our end and it looks like both maxUploads
and allowedContentTypes
options are working correctly. We tested that on text and png files and those files were not added to the file input.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
What other file types were you able to upload with these configuration options? We tested that on our end and it looks like it works correctly. Please provide more details and the full HTML/TS code on which we will be able to reproduce this problem.
photerloo pro premium commented 4 years ago
See full code below.