CODEWITHSUNDEEP
javascriptgoogle-apps-scriptweb-applicationsgoogle-drive-api
Robert Fila
Robert Fila

Reputation: 1

Upload to a specific folder in google script

So I want to make a form upload file, photos, videos to a specific folder (file, photos, videos) in Google Drive, but I don't know how to make that in Google Apps Script. I tried like this and error in console "invalid argument listener".

So here is a index

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Upload Files</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head> 
  <body>
    <h1>File Uploader</h1>
    <div id="form" style="text-align:center;display:block">
    <form>
        <input class="form-control" type="file" name="myFile" mulitple>
        <br>
        <br>
        <div>
          <h3>Choose Folder to upload</h3>
          <h6>Max. 50MB</h6>
          <input class="btn btn-outline-secondary" type="button" id="submitBtn1" value="File">
          <input class="btn btn-outline-secondary" type="button" id="submitBtn2" value="Foto">
          <input class="btn btn-outline-secondary" type="button" id="submitBtn3" value="Video">
        </div>  
        <label id="resp"></label>
    </form>
    </div>
    <script>
      document.getElementById('submitBtn1').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.childNode)
        })

        function onSuccess(data_files){
          document.getElementById('resp').innerHTML = "File Uploaded succesful";
        }

      document.getElementById('submitBtn2').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadPhotos(this.childNode)
        })

        function onSuccess(data_photos){
          document.getElementById('resp').innerHTML = "Photo Uploaded succesful";
        }

      document.getElementById('submitBtn3').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadVideos(this.childNode)
        })

        function onSuccess(data_videos){
          document.getElementById('resp').innerHTML = "Video Uploaded succesful";
        }
    </script>
  </body>
</html>

And this a code.gs

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


function uploadFiles(data_files)
{
 var file = data_files.myFile;
 var folder = DriveApp.getFolderById('12gKxEtiZhL0hKU6qd-ngVih1DhP_UV8_');
 var createFile = folder.createFile(file);
 return createFile.getUrl();
}

function uploadPhotos(data_photos)
{
 var file = data_photos.myFile;
 var folder = DriveApp.getFolderById('1LngD6Ziqqd2i5mt-IGX3NWzVPMIAJEWU');
 var createFile = folder.createFile(file);
 return createFile.getUrl();
}

function uploadVideos(data_videos)
{
 var file = data_videos.myFile;
 var folder = DriveApp.getFolderById('1LJgcCAn1_Kb6SVVLfxzKkmiw_hg47zoP');
 var createFile = folder.createFile(file);
 return createFile.getUrl();
}

If required method If Else, sorry please tell me how to make that, I'm still learn about coding

Upvotes: 0

Views: 727

Answers (1)

Wicket
Wicket

Reputation: 38160

I have not reviewed your code in deep, there is an error on the parameter of the google.run.script statements. this.childNode is returning undefined.

In order to send the "form data" to the server side code, replace it by the form node, i.e. add the following in the <script>, above the functions:

const form = document.querySelector('form');

then, replace this.childNode in the script.google.run statements, i.e.

google.script.run.withSuccessHandler(onSuccess).uploadFiles(form)

By "form data" I mean that you have to pass the form element as the parameter of the server side function. The above statement assigns the form element (<form>...</form>) to the form variable. google.script.run will use the FormData interface to build an object having a property for each form data entry element (<input>, <select>, etc.) using their name attributes as the property name, and the element value as the property value.

Related

Resources

Upvotes: 1

Related Questions