Using upload options not working as documented


Topic: Using upload options not working as documented

photerloo pro premium asked a week ago

*_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.


Arkadiusz Idzikowski staff commented 5 days 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 5 days ago

See full code below.


photerloo pro premium answered 5 days 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 days 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 10.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No