Skip to content Skip to sidebar Skip to footer

Uploading Multiple Files In One Folder With One Form Submission

I've created a custom Google Form which allows a logged in Google user to include multiple files with the form. The files are uploaded into a newly created folder in Google Drive.

Solution 1:

  • When the files are submitted, you want to create one new folder every submitting.
  • You want to upload multiple files to the created folder.

If my understanding is correct, how about this modification? Please think of this as just one of several answers.

Modified scripts:

HTML:

Please modify as follows.

From:
<input name="picToLoad"type="file"id="sampleFile" />
To:
<input name="picToLoad"type="file"id="files" multiple />

Javascript:

Please modify picUploadJs().

functionpicUploadJs(myForm) {
  const f = document.getElementById("files");
  google.script.run.withSuccessHandler((folderId) => { // Addedvar files = [...f.files];
    files.forEach((file, i) => {
      const fr = newFileReader();
      fr.onload = (e) => {
        const data = e.target.result.split(",");
        const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
        document.getElementById('status').style.display = 'inline';
        google.script.run.withSuccessHandler(() => {
          if (i == files.length - 1) updateOutput();
        }).processForm(obj, folderId); // Modified
      }
      fr.readAsDataURL(file);
    });
  }).createFolder();
}

Google Apps Script:

I separated processForm() to processForm() and createFolder().

// AddedfunctioncreateFolder() {
  var dateTime = Utilities.formatDate(newDate(), "GMT+2", "dd-MM-yy_HH-mm");
  var email = Session.getActiveUser().getEmail();
  var parentFolder = DriveApp.getFolderById('xxxxx');
  var newFolder = parentFolder.createFolder(email + "_" + dateTime);
  var newFolderId = DriveApp.getFoldersByName(newFolder).next().getId();
  return newFolderId;
}

// ModifiedfunctionprocessForm(theForm, newFolderId) {
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
  var fldrSssn = DriveApp.getFolderById(newFolderId);
  fldrSssn.createFile(fileBlob);
  returntrue;
}

Note:

  • In your HTML, the top line is as follows.

    <form id="myForm" target="hidden_iframe" onsubmit="submitted=true;">
    

    From your previous question, if you are using the following lines, please update your question. I supposed that you are using the following script.

    <iframe name="hidden_iframe"id="hidden_iframe" style="display:none;" onload="if(submitted)  { picUploadJs(myForm); }"></iframe>
    <form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
    

If this was not the result you want, I apologize.

Post a Comment for "Uploading Multiple Files In One Folder With One Form Submission"