Multi Image Upload, POST to API

App Building
1

I am using a Image Input Component and will be requiring multiple photos to be sent on completion. I copied a script from the documentation to iterate a query multiple times (as my photo input will be dynamic).

The Image Input component is named: imageInput1
The query I need this script to trigger is called UploadFile (REST POST API)
The endpoint requires the image to be base64 encoded.

The code looks like this:

function runQuery(i) {
  if (i >= imageInput1.value.length) {
    console.log("Finished running all queries");
    return;
  }
  var data = utils.getDataByObjectURL(imageInput1.value[i]);
  console.log("Running query for row", data);

  UploadFile.trigger({
    additionalScope: {
      data: data,
    },
    // You can use the argument to get the data with the onSuccess function
    onSuccess: function (data) {
      runQuery(i + 1);
    },
  });
}

runQuery(0);

I have tried this "utils.getDataByObjectURL" function many different ways but am unable to get it too convert to a base64 string. If I leave off that function, I can get it to send the blob:// url each time, but I am having trouble getting it to encode.

Any help would be appreciated.
Thanks!

2

Copied code from somewhere else and was able to resolve my problem:

for (let i = 0; i < imageInput1.files.length; i++) {
  const file = imageInput1.files[i];

  const base64 = await utils.getDataByObjectURL(imageInput1.value[i]);

  const imageData = {
  data: base64.slice(base64.indexOf(',') + 1),
  size: file.size,
  height: file.height,
  width: file.width
};

  UploadFile.trigger({
    additionalScope: {
      data: imageData.data
    },
    onSuccess: function (data) {
      imageInput1.files[i].clearValue();
      imageInput1.value[i].clearValue();
    }
  });

}
imageInput1.clearValue();