Upload Multiple images using fileTransfer upload

Ionic Native
#1

Is there anyway to send multiple imageURI’s using file transfer plugin.

fileTransfer.upload(data.img1, url, options);

This line uploads only one image to the URL, data is appended in options but I’ve multiple images and want to upload in one hit.

I want to upload several pictures to server at the same time,the native plugin provide transfer,but this plugin can only upload a file at the same time.I don’t want to call transfer.upload in while or for.
What method can upload multiple files at the same time? Thank you very much for your reply!!!

2 Likes
#2

I don’t think there is an extra method for that, I would suggest using for with promises or bundeling the files in one (as example in zip file that gets extracted at the server)

#3

The fileTransfer upload function’s first parameter catches only single string.

upload(fileUrl: string, url: string, options?: FileUploadOptions, trustAllHosts?: boolean): Promise;

how to attach the zip here :confused:

#5

you could try that plugin to zip them: https://github.com/FortuneN/cordova-plugin-zeep
or you can combind the images some how in to on single file - like storing their base 64 values along with their mime type in a json.(But I think the loop is the better solution)

#6

What does this mean?

#7

Bro I dont want to use an extra plugin to send them on the server.
How can I combine images into single file? Please elaborate.

#8

just try another plugins.

#9

First of all, when you can have nodejs as you backend, you can use socket.io to transfer the files via websocket. no plugins needed.

You could also take the pure JS approach like that gist that I found explains https://gist.github.com/WebReflection/f04425ce4cfeb18d75236cb50255e4bc
Or this Tutorial with angular:
https://medium.com/@ahmedhamedTN/multiple-files-upload-with-angular-2-express-and-multer-1d951a32a1b3

Unless there is a specific reason to use the native file-transfer plugin I wouldn’t use it - use the js methods instead, because they support multiple files at once uploading.

So now the methods that I can think of to combining the files:

Idea:
we have to vars transferred: one is a Json on which file type is transferred and at what location it is in the second var that is the binary data of all files chained into one long string.

When retrieving the files, you split the binary data accordingly to the positions in the json.
You could also use base64 strings instead of binary data and include that directly in your json, but this would increase the file size notably.

Disclaimer: I haven’t tested it yet, but it should work.

Links with resources:

#10

Hello @charlestsmith

Any luck in this problem, i am also stuck here.
i don’t want to call filetransfer in loop any other solution, you get in researching

Listed a issue in github: https://github.com/ionic-team/ionic-native/issues/2298

#11

Did you found an solution for uploading in one hit already?

Maybe you can try to upload your files one-by-one async?

  public async myUploadClick() {
    const promisesArray: any[] = [];
    const filesToUpload: any[] = [1, 2, 3];
    for (const file of filesToUpload) {
      console.log("Starting upload: %s", file);
      promisesArray.push(this.upload(file));
    }

    await Promise.all(promisesArray)
      .then((res) => {
        console.log("All uploads done");
      }, (firstErr) => {
        console.error("Error uploading file.", firstErr);
      });
  }

  private upload(file) {
    return new Promise((resolve, reject) => {
      // your upload code
      setTimeout(() => {
        if (2 === file) {
          console.error("Upload %s failed", file);
          reject(file);
        } else {
          console.log("Upload %s done", file);
          resolve(file);
        }
      }, 1000 * file);
    });
  }
1 Like
#12

Hi, If anyone are still facing the issue, I have written a detailed answer to it on Stack-overflow, below is the link for the same. Where I have explained how to convert an image to base64 and upload it to server via API.