How can I upload a file from my HTML form to my google drive?

Question

I have an HTML form that lets the user upload a file. I want to then upload that file to my google drive.

My Javascript when the user clicks submit.

var data = new FormData();
data.append('resume', document.getElementById('file'));

fetch(scriptURL, {method: 'POST', body: data })
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))

My google script

doPost(e){
    uploadFile(e.parameter['file])
}

function uploadFile(file, name){
    var blob = file.myFile;
    var name = "file";
    var contentType = "application/pdf";
    var fileBlob = Utilities.newBlob(blob, contentType, name);


    var file = folder.createFile(fileBlob);
}

I want the uploaded pdf to be stored in my google drive but What my current code gives me is a 9 byte pdf file that just says undefined

score 1 · Answer 1 · answered Sep 30 '19 at 06:37

Try this -

Code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Form').setTitle('Form')
}

function upload(obj) {
  var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName)
  DriveApp.createFile(blob);
  return 'Done';
}

Form.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base target="_top">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        function uploadData() {
            const f = document.getElementById('upFile');
            [...f.files].forEach((file, i) => {
                const fr = new FileReader();
                fr.onload = (e) => {
                    const data = e.target.result.split(",");
                    const obj = {
                        fileName: f.files[i].name,
                        mimeType: data[0].match(/:(\w.+);/)[1],
                        data: data[1]
                    };
                    var buttonID = document.getElementById('uploadButton');
                    $(buttonID).attr("disabled", "disabled");
                    google.script.run.withSuccessHandler((id) => {
                        M.toast({
                            html: id
                        });
                        $(buttonID).removeAttr("disabled");
                    }).upload(obj);
                }
                fr.readAsDataURL(file);
            });
        }
    </script>

</head>

<body>
    <div class="container center">
        <div id="upload" class="col s12">
            <form onsubmit="event.preventDefault(); uploadData()">
                <div class="row">
                    <div class="input-field col s12 m6 l4 offset-m3 offset-l4">
                        <div>
                            <h4><br /></h4></div>
                        <div class="file-field input-field">
                            <div class="btn blue">
                                <span>File</span>
                                <input type="file" name="upFile" id="upFile" required="" aria-required="true">
                            </div>
                            <div class="file-path-wrapper">
                                <input class="file-path validate" type="text" placeholder="Upload file" required="" aria-required="true">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 m6 l4 offset-m3 offset-l4">
                        <button class="waves-effect btn blue" type="submit" id="uploadButton">Upload</button>
                    </div>
                </div>
            </form>

        </div>

    </div>
</body>

</html>

I took the liberty of adding some Materialize CSS - hope that's alright :)

Thanks, it helped a lot. How do I upload multiple files at once? — Vladimir Melnikov, Dec 04 '21 at 16:15

How can I upload a file from my HTML form to my google drive?

1 Answers1