How to upload multiple files using file type input

Ionic Framework ionic-v3
1

I’m trying to upload multiple files but I don’t know how to. I can successfully upload a file or image using the code below but not multiple files. How can I upload multiple files instead?

<input type="file" (change)="onUploadChange($event)"  #fileInput multiple/>

 @ViewChild("fileInput")  fileInput: ElementRef;
formData = new FormData();

private readFile(file: any) {
  const reader = new FileReader();
  reader.onloadend = () => {
      const imgBlob = new Blob([reader.result], {type: file.type});
      formData.append('file', imgBlob, file.name);
  };
  reader.readAsArrayBuffer(file);
}

onUploadChange(ev) {
  let myFile = ev.target.files[0];
  //let url = URL.createObjectURL(myFile);
  this.readFile(myFile);
2

I would start by adding the multiple attribute.

3

I can already select multiple files but I’ll add it

4

What does upload mean? To an external database?

5

I’ll be uploading them to my server. I already have that part working I dont know how to process multiple selected files

6

You seem to have a hardcoded [0] in your handler. Can’t you just loop across the entire array instead?

7

Thanks… I got how to loop

onUploadChange(ev) {
  let myFile = ev.target.files;
  //let url = URL.createObjectURL(myFile);

  for (let i=0; i<myFile.length; i++) {
    this.readFile(myFile[i]);
  }

But I should have been more clear. What I want to do is if a user uploads 3 items I want to append each to formData so that I can later send all 3 to my server at the same time. Should I use FormData for this or is there a better way?

8

Personally, I consider JSON far superior to FormData, in part because of how simple it makes this sort of issue, as it has built-in support for arrays. In the end, this is all completely dependent on what the server is capable of accepting.

9

I think you should consider using ng2-file-upload. It’s recommended by a lot of places, for example Cloundinary uses it in their official Angular 2 sample project. Your code looks very Javascripty, and not very Angular-2’'y. The more you can Angularize it, the better off you’ll be. Also, making your code Observable-based instead of callback-based might simplify things a lot.

10

I’m using PHP as my backend so basically anything is acceptable

This is my first time doing file upload. How would I convert each file to json?

11

Three options I can think of, ordered from easiest and most bandwidth-using to hardest and most compact:

  • substitute readAsDataURL() where you currently have readAsArrayBuffer(). Data URLs can safely be transported as JSON strings.
  • do the base64 encoding of your array buffer by hand
  • use UBJSON
12

So first the first way after I change that line instead of appending to formdata would I do something like

data = [];

onUploadChange(ev) {
  let myFile = ev.target.files;
  //let url = URL.createObjectURL(myFile);

  for (let i=0; i<myFile.length; i++) {
    this.readFile(myFile[i]);
  }

private readFile(file: any) {
  const reader = new FileReader();
  reader.onloadend = () => {
      this.data.push(reader.result, file.type);
  };
  reader.readAsArrayDataURL(file);
}

And for the second option I’m not really sure how I would do that… I found this example online

var bufferToBase64 = function (buffer) {
    var bytes = new Uint8Array(buffer);
    var len = buffer.byteLength;
    var binary = "";
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
};

Would the buffer be my data array from above?

13

Looking through how ng2-file-upload works at the end of the day I think I would bestuck in the same place trying to figure out how to send multiple files in one request

14

Hi @gz0023

Did you found any solution on this issue?

I’m also encountering this kind of issue.
I don’t know how to upload multiple files.

Can you help me?

Many Thanks!

Kind Regards,

15

hi bro,
did find any solution for that issues,
I am also facing same problem.