0

I was made form upload to google drive, user can choose between 3 folder (File, Photo, Video), but when I pick a folder video and click button upload it just error like this in console Uncaught at uploadVideos (Code:27). (Code:27) is var createVideo = foldervideo.createFile(video);. not just video, but all button get some error too (file and photo).

Here is my index code :

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Upload Files</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/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){
          var files= document.getElementById("submitBtn1").value;
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(files)
        })

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

      document.getElementById('submitBtn2').addEventListener('click',
        function(b){
          var photos= document.getElementById("submitBtn2").value;
          google.script.run.withSuccessHandler(onSuccess).uploadPhotos(photos)
        })

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

      document.getElementById('submitBtn3').addEventListener('click',
        function(c){
          var videos= document.getElementById("submitBtn3").value;
          google.script.run.withSuccessHandler(onSuccess).uploadVideos(videos)
        })

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

And here is a gs code :

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


function uploadFiles(files)
{
 var file = files.myFile;
 var folderfiles = DriveApp.getFolderById('16LJlwalGaAvPde2JryBVbGqrsCZl2DaA');
 var createFile = folderfiles.createFile(file);
 return createFile.getUrl();
}

function uploadPhotos(photos)
{
 var photo = photos.myFile;
 var folderphoto = DriveApp.getFolderById('1xESqXwz4SxFKcpXXX3CbjfEnNXeU4ktJ');
 var createPhoto = folderphoto.createFile(photo);
 return createPhoto.getUrl();
}

function uploadVideos(videos)
{
 var video = videos.myFile;
 var foldervideo = DriveApp.getFolderById('1_HQvjpX1tfHt7FS-2Se8lPkLtBQ7WG4n');
 var createVideo = foldervideo.createFile(video);
 return createVideo.getUrl();
}

I don't know how to fix that, in google.script.run.withSuccessHandler(onSuccess).uploadFiles(files) change to google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode) it same error too. I hope anyone can help me, thank you for reading this. I will really appreciate your answers, thank you.

Rubén
  • 34,714
  • 9
  • 70
  • 166
  • 1
    The solution given to your previous question applies to this question. The specific problem here is that you are passing a string instead of the form element. Apparently you have to spend some time learning about [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) – Rubén Aug 23 '22 at 13:07
  • `Uncaught` means there's a server side error that's not caught. Catch it first with `withFailureHandler()` – TheMaster Aug 23 '22 at 13:24

0 Answers0