Skip to content

Instantly share code, notes, and snippets.

@tanaikech
Last active September 7, 2024 19:31
Show Gist options
  • Save tanaikech/2f16f467c94612dc83920a3158614d95 to your computer and use it in GitHub Desktop.
Save tanaikech/2f16f467c94612dc83920a3158614d95 to your computer and use it in GitHub Desktop.
Uploading Local Files to Google Drive without Authorization using HTML Form

Uploading Local Files to Google Drive without Authorization using HTML Form

This is a sample script for uploading local file to Google Drive without the authorization using HTML form. A selected file in your local PC using HTML form is uploaded to Google Drive and saved to Google Drive.

When you use this, at first, please deploy Web Apps. The script is doPost() of following scripts.

Script : Google Apps Script

function doPost(e) {
  var data = Utilities.base64Decode(e.parameters.data);
  var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);
  DriveApp.createFile(blob);
  var output = HtmlService.createHtmlOutput("<b>Done!</b>");
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return output;
  // return ContentService.createTextOutput("Done.") <--- Here, an error occurred.
}

Flow :

  • Retrieve data, filename and mimetype as e.parameters.data, e.parameters.filename and e.parameters.mimetype, respectively.
  • Decode the data using Utilities.base64Decode().
  • Create blob using Utilities.newBlob().
  • Create the file in the root folder of Google Drive.

Script : HTML

https://script.google.com/macros/s/#####/exec is the URL obtained when the Web Apps was deployed. Please replace it to your Web Apps URL. You can open this HTML for the browser of your local PC.

<!DOCTYPE html>
<html>

<head>
    <title>Sample script for uploading file to Google Drive without authorization</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>

<body>
    <form action="https://script.google.com/macros/s/#####/exec" id="form" method="post">
        Upload a file
        <div id="data"></div>
        <input name="file" id="uploadfile" type="file">
        <input id="submit" type="submit">
    </form>
    <script>
    $('#uploadfile').on("change", function() {
        var file = this.files[0];
        var fr = new FileReader();
        fr.fileName = file.name;
        fr.onload = function(e) {
            e.target.result
            html = '<input type="hidden" name="data" value="' + e.target.result.replace(/^.*,/, '') + '" >';
            html += '<input type="hidden" name="mimetype" value="' + e.target.result.match(/^.*(?=;)/)[0] + '" >';
            html += '<input type="hidden" name="filename" value="' + e.target.fileName + '" >';
            $("#data").empty().append(html);
        }
        fr.readAsDataURL(file);
    });
    </script>
</body>

</html>

Flow :

  • Using FileReader(), retrieve base64 encoded file, filename and mimetype.
  • Add input with type="hidden" to #form as text data.
    • replace(/^.*,/, '') is used for removing a header of encoded data.
    • match(/^.*(?=;)/)[0] is used for retrieving mimetype of uploading file.
  • When a submit button is clicked, the base64 data is sent to doPost() of GAS.

Note :

  • In order to use this, after the script is modified, please redeploy Web Apps as a new version. By this, the latest script is reflected to Web Apps.
  • This sample script can upload one file. If you want to upload several files, please modify script. var file = this.files[0]; means the selected first file. When there are some files, it is files[1], files[2] .....

Reference :

  • For downloading files on Google Drive to local PC, I have already published here.

Updated:

@niteshkumar2000
Copy link

Hello I need small help my form already has one existing action link(which is google form), Is there any way to do this on upload itself instead of submit?

@robertod10
Copy link

When I run your codes and i get this error in appscript:

TypeError: Cannot read property 'parameters' of undefined (línea 2, archivo "Código")

I need help please (english or spanish)

@Kishoreramesh07
Copy link

How to validate particular file type in GAS for example only PDF

@Thinnakorn16
Copy link

I want to select which folder to store the images, how should I adjust the code?

@MrN8b
Copy link

MrN8b commented Feb 3, 2021

Thanks for the script. This has gotten me farther in uploading files from guests than anything else so far. I do have three questions and im new at this so please try to explain in detail how to do it.

  1. I need to be able to create a folder of the submitter's name for all of the uploads they send in. How do I get it to create a folder inside of google drive based on a form field?
  2. I saw the comment you made about multiple file uploads but because im new to this I didnt follow what you were trying to say. I would like for the users to be able to upload 10 files at once to my google drive.
  3. This has to do with the first question a bit. If I just wanted all of the submitted files to go into a folder on my Drive how do I set that up instead of being dumped into the root folder?

Thanks

@kojakeugenio
Copy link

Can please someone post a modified code that can upload multiple files?

@ManTheM
Copy link

ManTheM commented Dec 21, 2023

Thank u so much! Is there a way to receive an email with the new file uploaded as attachment?

@tanaikech -- any thoughts about having the page automatically reload, so that multiple files can be uploaded? I can add instructions (with the Done! message) to refresh the page in the browser to upload another file--but it would be nice if the upload interface just refreshed automatically.

...anyone? after submit how to prevent GAScript from loading in a new browser window - ie just have "Done" display in index.html

It would be great if these could happen... Any suggestion?

It worked all the code for me. I used with DriveApp.getFolderById(id).createFile(blob); and the id means not the folder name btw(I am saying that for new users). You can find your folder id on the web site textarea at the end of the link something like "AsdvvewsSasfWEASDAvgf5fsMzf_AdsadUj" . And when you want to use it in the script line you should put quote markers both side of your id like DriveApp.getFolderById("AsdvvewsSasfWEASDAvgf5fsMzf_AdsadUj").createFile(blob);

@UsmanRajput0
Copy link

file:///storage/emulated/0/index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment