Topic: Update file input UploaderOptions at runtime (MDB4)

akrolis pro asked 1 year ago


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();
      }


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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