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

[MatthewHRP]

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

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

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

[TIMAI2]

You do not show your relevant blocks

[MatthewHRP]

i'm sorry sir, here is my block

[TIMAI2]

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

[MatthewHRP]

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

[TIMAI2]

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.

[MatthewHRP]

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

this is the empty file

[TIMAI2]

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);
  }
...

[MatthewHRP]

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

[TIMAI2]

As your script is, yes.

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

[MatthewHRP]

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

[TIMAI2]

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

SCRIPT

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();
}

You will need to add your own Sheet Name and Folder Id in the script

SCREENS

AIA

Upload1To4ImagesToGoogleSheet.aia (14.0 KB)
You just need to add your script url