Issues with Uploading Multiple Photos in Mobile App - Files Are Empty

Hello everyone,

I’m currently developing a mobile app that allows us to take photos, rename them, and then upload them to our server.

At the moment, we’re having trouble uploading multiple photos at once. We're using the imageinput component and then passing the data using jQuery to set the additionalscope for the UploadFile component. While the images are being named correctly, they end up having no content once uploaded.

It seems like the issue lies with the file input.

I've attached some screenshots for reference.

Has anyone encountered this issue before or have any ideas on how to fix it?

Thanks in advance for your help!


Hi @Fabian_von_Kannen, welcome back! :wave:

There are a couple of things going on here:

  1. In the multipleFileUpload JS query, i = 0 and its value goes from 0 to N where N is the number of uploads. What you are passing as additionalScope is always a number and not of the base64 of a file. Here is an example on how to use additionalScope:
  1. In the uploadFile query, the value for 'File content' is text. You are passing the literal string "await utils.getData....". That will never work. Here is an example on how to process the files so you can actually pass the base64:

Hi Paulo,

Thank you for your response. I looked into the solution, but I couldn't find a way to upload multiple images.

Additional scope: I'm passing the "i" variable so that I can iterate through the images, as our use case involves multiple images. My goal is to access and process each image one by one, from 1 to n. It is also essential for us to name the images in the format "articlenumber-1", "articlenumber-2", and so on.

Upload image: I suspected that the current approach might not work, but I still don’t know how to obtain the base64 encoding from the image input. The example you provided demonstrates how it works with a single image, but it doesn’t seem to support multiple images, and I'm unsure how to adapt it for that purpose.

Let me help you with the implementation for multiple images.

We can set uploadFile as if we already had the data, just define the variables that we'll replace using additionalScope:

For the JS, we need:

  1. Iterate over the value of the Image input component.
  2. Get the base64 data of each image.
  3. Trigger uploadFile passing the right data and name for each file.

Here is the JS:

let images = imageInput1.value

for(let i = 0; i < images.length; i ++){
  let base64Image = await utils.getDataByObjectURL(images[i])
  let encoded = base64Image.split(", ")[0]
  await uploadFile.trigger({
    additionalScope: {
      formattedfile: encoded,
      fileName: textInput1.value + "-" + i
    }
  })
}

The app needs the Image & Text input components, and a button to trigger the JS query:

That should work like a charm: