Cannot upload multiple files at once using ngx-uploader

[ArpanChoudhuri]

I cannot upload multiple files at once. My code is const event: UploadInput = {

        type: 'uploadAll',
        url: 'ToDoList/UploadDocument',
        method: 'POST',
        data: {
            ConditionId: String(todoItem.ConditionId), Description: String(todoItem.Description), UserName: String(this.displayName)
            , Year: String(todoItem.Year), ImageDescription: String(todoItem.ImageDescription), LoanNumber: localStorage.getItem('selectedLoan')
        }
    };

    todoItem.uploadInput.emit(event);

[richardelloyd]

I'm having this problem, too. uploading multiple files makes multiple calls to my upload service. Is that the intended function of 'uploadAll'?

[ArpanChoudhuri]

This has been fixed by setting Concurrency as "1". Multiple file upload work fine now.

[richardelloyd]

It's able to upload multiple files but it makes separate calls to the service to do so. even with Concurrency set to 1, it's still separate api request.

[Mihai-B]

I am also having the same problem. Found a solution ?

[richardelloyd]

Never did. This fix allows for multiple uploads, but I needed them to all send in one request, not multiple requests.

[Mihai-B]

I ended up implementing my own. I use the file drop functionality of this component, but the upload process I handle myself.

[khylias]

Hi @Mihai-B , can you give us some example of your upload process ? 😄

[Mihai-B]

What I have done basically is: I have my own list of the files that the user selected(files: File[];) If the drag and drop function of the ngx-uploader is used I just get the files and add them to my list. Implemented a service that uploads the files to the backend.

Not the best looking code but here it goes: HTML:

<div class="drop-container" ngFileDrop (uploadOutput)="onFileDrop($event)">
        <p>Drag a file here or
          <label class="upload-button">
            <input type="file" id="file" (change)="handleFileInput($event.target.files)" accept=".pdf" multiple>browse
          </label> to upload.
        </p>
      </div>

Component:

onFileDrop(output: UploadOutput): void {
    if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') {
      const file: File = output.file.nativeFile;
      // check file types
      if (file.type && file.type === 'application/pdf') {
        this.files.push(output.file.nativeFile);
        console.log(output.file.nativeFile);
      } else {
        // display notification
      }
    }
  }

  handleFileInput(newfiles: FileList): void {
  
    // Future suported types: .png, .jpg
    for (let i = 0; i < this.files.length; i++) {
      const file: File = this.files[i];
      // make some checks for files
      this.files.push(file);
    }
  }

Service:

uploadFiles(files: File[]) {  
    const formData: FormData = new FormData();
  
    for (let i = 0; i < files.length; i++) {
      const file: File = files[i];
      formData.append('file', file, file.name);
    }
    return this._http.post(this.url + 'templates', formData, { headers: headers });
  }

NOTE: DO NOT add as a header the Content-Type ! The browser will set it automatically for you along with the boundary.