(Need Help) Upload image from phone to google drive then put it in google sheet

Need Help, i'am currently developing an application to upload images from a smartphone to Google Drive and then place them in a Google Sheet. There are 4 image pickers, and when I upload all 4 of them simultaneously, everything works as intended. However, when I only upload 2 images, then 2 more images are uploaded following the first image I uploaded. I seek assistance from the experts here

this is my UI

WhatsApp Image 2023-08-21 at 15.59.59576×1280 28.9 KB

My block
Uploading: blocks (1).png...

app script

function doPost(e) {

  var ss = SpreadsheetApp.openById('1PtSmCkILcUp7Q12Bi2BKNNOg2LHN2xt825-8grRmtxM');
  var sh = ss.getSheetByName('Sheet1');
  
  var data1A = Utilities.base64Decode(e.parameters.data1A);
  var data1B = Utilities.base64Decode(e.parameters.data1B);
  var data2A = Utilities.base64Decode(e.parameters.data2A);
  var data2B = Utilities.base64Decode(e.parameters.data2B);


  var blob1 = Utilities.newBlob(data1A, e.parameters.mimetype, e.parameters.filename1A);
  var blob2 = Utilities.newBlob(data1B, e.parameters.mimetype, e.parameters.filename1B);
  var blob3 = Utilities.newBlob(data2A, e.parameters.mimetype, e.parameters.filename2A);
  var blob4 = Utilities.newBlob(data2B, e.parameters.mimetype, e.parameters.filename2B);


  var fileId1A = DriveApp.getFolderById(e.parameters.folderId).createFile(blob1).getId();
  var fileId1B = DriveApp.getFolderById(e.parameters.folderId).createFile(blob2).getId();
  var fileId2A = DriveApp.getFolderById(e.parameters.folderId).createFile(blob3).getId();
  var fileId2B = DriveApp.getFolderById(e.parameters.folderId).createFile(blob4).getId();

  
  var rowData = [];
  rowData.push(e.parameters.artikel[0]);
  rowData.push(e.parameters.kode[0]);
  rowData.push(e.parameters.suplier[0]);
  rowData.push(e.parameters.tanggal[0]);
  rowData.push(fileId1A);
  rowData.push('https://drive.google.com/file/d/' + fileId1A);
  rowData.push(fileId1B);
  rowData.push('https://drive.google.com/file/d/' + fileId1B);
  rowData.push(fileId2A);
  rowData.push('https://drive.google.com/file/d/' + fileId2A);
  rowData.push(fileId2B);
  rowData.push('https://drive.google.com/file/d/' + fileId2B);

  

  sh.appendRow(rowData);

  return ContentService.createTextOutput(' successfully uploaded to Google Drive');  

}

My google sheet

Untitled1440×900 323 KB

is there is any option i can do, or i'm making a mistake?

You do not show your relevant blocks

i'm sorry sir, here is my block

blocks (1)2330×2106 618 KB

Are you clearing these four variables before you start a new record ?

image919×255 27.4 KB

i just cleared up the displayed image, how can i clean up the base64 variable?

set variable to empty text block

It would also be good practice to check if any of these four variables are empty, and to not send them in the data for the script. Also in the script to exclude them if they are empty.

Thank you, sir. This method works, but there are still links that appear in Google Sheets and files without images in Google Drive

Untitled1440×900 194 KB

this is the empty file

Your script is creating empty files.

You need to check if your parameters exist (or are empty) before creating blobs and files.

for example:

...
if (e.parameters.data1A != "" ) {
  var data1A = Utilities.base64Decode(e.parameters.data1A);
  var blob1 = Utilities.newBlob(data1A, e.parameters.mimetype, e.parameters.filename1A);
  var fileId1A = DriveApp.getFolderById(e.parameters.folderId).createFile(blob1).getId();
  }
...

...
var rowData = [];
  ...
  if(fileId1A) {
  rowData.push(fileId1A);
  rowData.push('https://drive.google.com/file/d/' + fileId1A);
  }
...

Let me fix my script. so i must add the "if" script for every variable?

As your script is, yes.

If I get time, I will revise your script to work more dynamically....

Thankyou sir, let me correct my script first, if i'm encounter difficulties, i'll ask you again sir

Found some time to rework your idea, and have generated an aia project and google apps script that works in a more dynamic way. Initially this may appear like an advanced approach, but once you understand the method, it is actually quite straightforward (?)

The final output is much the same, a google drive folder with files, and a spreadsheet that shows the file IDs, links, and images (you didn't show how you were setting the images in the sheet...)

For my solution, in the app, you will see that I used a single image picker component (hidden) and clickable image components to select the images from Shared Storage. I used lists to hold the various elements you want to display: information, filenames, base64 encodes of the images, then sent these as a list of lists in the postText.

I used a script "bound" to the spreadsheet. The data sent from the app is received by the script as a stringified JSON array. The script converts this string to an array object, then first generates the images in the designated folder, and creates a new array for the file IDs. Then a "blank" array is created for the rowData, ready to be filled in. Each item of "information" is then set to the rowData array, then (and this was the fun part) the file Ids, urls, and image functions are set to the rowData array. The rowData array is then appended to the spreadsheet.

In theory, this should work for any number of items of information, and any number of images.

BLOCKS

blocksSheetImagesUpload1185×3198 584 KB

function doPost(e) {
  var ss = SpreadsheetApp.getActive();
  var sh = ss.getSheetByName('SHEET NAME HERE');
  var folderId = 'FOLDER ID HERE';
  var data = JSON.parse(e.postData.contents);
  
  var fileIds = [];
  var decode, blob, fileId;
  for (var f = 0; f < data[2].length;f++) {
    decode = Utilities.base64Decode(data[2][f]);
    blob = Utilities.newBlob(decode, getMime(data[1][f]), data[1][f]);
    fileId = DriveApp.getFolderById(folderId).createFile(blob).getId();
    fileIds.push(fileId);
  };

  var rowData = [];
  for (var c=0;c<13;c++) {
    rowData.push("");
  };

  for (var inf = 0; inf < data[0].length;inf++){
    rowData[inf] = data[0][inf];
  }

  for (var i = data[0].length; i < fileIds.length + data[0].length; i++) {
    rowData[i + (i-1)] = fileIds[i-data[0].length];
    rowData[2*i] = "https://drive.google.com/file/d/" + fileIds[i-data[0].length];
    rowData[i+8] = '=image("https://drive.google.com/uc?id=' + fileIds[i-data[0].length] + '")';
  };

  sh.appendRow(rowData);

  return ContentService.createTextOutput(JSON.stringify(fileIds));
  
}

function getMime(filename) {
return "data:image/" + filename.split('.').pop();
}

SCREENS

image391×579 11.3 KB

image383×581 55.1 KB

sheetimagesupload1424×743 166 KB