-2

I am trying to upload the file "pdf " to google drive through google app script, but I get an error when I click the button. Also, I wanted to use the array bytes but I don't know how to do because without the array bytes I must disable the chrome v8.

Error message :

2495449455-mae_html_user_bin_i18n_mae_html_user__ar.js:56 Uncaught InvalidArgumentError: Failed due to illegal value in property: 0

<!DOCTYPE html>
<html lang="en">

<head>
                <base target="_self">
                <?!=include('css');?>

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <title>  PDF Collector</title>

      <div align="center">
      <p><img   class="responsive-img   offset-m3 s12  "
       src=""></p>
     </div>

</head>

<body>
<div  id="msg"  class="col m6 offset-m3 s12" align="center" style='color: red' > 
<div>

            </div>
        </div>

    <div class="container">
        <div class="row">
            <div class="col m6 offset-m3 s12   ">
            
            
               <div class="input-field">
                    <input placeholder="Your Id" id="employeeId" type="number" class="validate" required pattern ="^\d{10}$" >
                    <label class="active" for="id">Your Id</label>
                </div>

      
                <div class="input-field">
                    <input placeholder="Your name" id="fullname" type="text" class="validate" disabled >
                    <label class="active" for="name">Full Name</label>
                </div>


                 <div class="file-field input-field">
                     <div class="btn">
                      <span>File</span>
                     <input type="file" name="myFile">
                             </div>
                  <div class="file-path-wrapper">
                   <input class="file-path validate" type="text">
                   </div>
                  </div>
            
                
                <button id="btn" class="btn waves-effect waves-light" type="submit"
                    name="action" > Submit
                    <i class="material-icons right">send</i>
                  </button>
                
            </div>
        </div>
        <div class="row">

        </div>

    </div>
    
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
              
    <?!=include('js');?>

</body>
</html>

JS Code

document.getElementById('btn').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
        })
        
        function onSuccess(data){
          document.getElementById('msg').innerHTML = "Thanks for Uploading";
        }

This the function in .gs

function uploadFiles(data)
{
 var file = data.myFile;
 var folder = DriveApp.getFoldersByName(collected-Pdf);
  Logger.log(folder);
 var createFile = folder.createFile(file);

}
Marios
  • 26,333
  • 8
  • 32
  • 52
Nasaf
  • 25
  • 8

2 Answers2

1

On the line google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode) I don't think you can just send an entire html node to the server, it probably tried to parse it as a json or something and failed, pretty much the most you can do is send the file itself

google.script.run.withSuccessHandler(onSuccess).uploadFiles(document.getElementsByClassName("myFile").files[0])

Plus the parent node of the button isn't the input element anyway, yet you are trying to access the .myFile element of it but I don't think class names are added to the server like that, but even if they were that would only be accessing the input element itself not the .files property of it

B''H Bi'ezras -- Boruch Hashem
  • 3,665
  • 3
  • 33
  • 83
  • 1
    Yeah, google apps script does not have any notion of DOM or Web APIs being server-side, so sending over anything that would not be valid in a plain JavaScript environment will fail... – Oleg Valter is with Ukraine Aug 18 '20 at 01:10
  • bluejayke , when I used the getElementsByClassName("myFile").files[0] i got this error Uncaught TypeError: Cannot read property '0' of undefined at HTMLButtonElement. . so I changed it to getelementByid and I got error in uploadFiles the error , uncaught at uploadFiles (uploadFunction:3) . I checked the chrome consol and I found the error is that function ue(a, b) { b = Error(b); b.name = a; return b – Nasaf Aug 18 '20 at 09:47
  • why it cannot read the myFile property . each time I click the button I get Uncaught at uploadFiles (uploadFunction:2) line number 2 is var file = data.myFile; . which it should be defined in – Nasaf Aug 18 '20 at 12:00
  • @nassaf it seems the button was also given the same class as the input tag. On the `` field add an ID then use getElementById("ID").files[0] instead – B''H Bi'ezras -- Boruch Hashem Aug 18 '20 at 20:38
0

I have found the answer after dividing the code and test each code one by one. It turned out that the name="action and waves-effect are the reason to stop the code from running. I don't know why but it is working now after removing them from html.

<button id="btn" class="btn  waves-light" type="submit"
                    " > Submit
                    <i class="material-icons right">send</i>
                  </button>
Nasaf
  • 25
  • 8