Topic: Update file input UploaderOptions at runtime (MDB4)
Hi,
is it possible to update the file input UploaderOptions on runtime?
I tried to use the spread operator that works with the datepicker options, but even though the options object is updated, the fileinput adds the files to the queue and not rejects them.
Resources (screenshots, code snippets etc.)
<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 (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [options]="options">
</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>
<button type="button" mdbBtn color="primary" mdbWavesEffec (click)="changetype()">Change Type</button>
component:
constructor() {
this.files = [];
this.uploadInput = new EventEmitter<UploadInput>();
this.humanizeBytes = humanizeBytes;
this.options = {
concurrency: 1,
maxUploads: 2,
allowedContentTypes: ['text/plain', 'image/png']
};
}
changetype(){
this.options.allowedContentTypes = ['video/mp4'];
this.options = {...this.options}
}
onUploadOutput(output: UploadOutput | any): void {
console.log(output)
if (output.type === 'rejected') {
this.files =[];
}
else 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 answered 2 years ago
I'm afraid it won't work like this, because in this case, we would need to completely destroy the current uploader and dynamically create a new instance (which may cause some problems if you already started uploading).
You could try to create a new instance of the component with a different configuration and try to display it with ngIf
when the certain condition is met.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 15.0.0
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No