1

I'm trying to write a code to upload file(image) to google drive using app script. Please go through the code. I'm not able to get the file back from the request.parameters. I tried using formData but it didn't work either.

I get following errors:
the file object received from request parameters is of type string though processData is false
or
Refused to execute script from 'app script url' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

// Google App Script
function doPost(request) {
    
    var result;
    // get folder from the drive
   try {
    var dropbox = "tdsd";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var parmKeys = Object.keys(request.parameters);
    Logger.log(parmKeys);
    //get file
    var blob = request.parameters.file;
    var file = folder.createFile(blob);    
       
    result = {
      status: 'success',
      id: file.getId(),
      url: file.getUrl(),
      }
    
    } catch (error) {
    
      result = {status: 'error', error: error, boo: parmKeys, level: '8'};
    }
  
  return ContentService.createTextOutput(
    request.parameters.prefix + '(' + JSON.stringify(result) + ')')
    .setMimeType(ContentService.MimeType.JAVASCRIPT);
}
<form id="myForm">
  <input type="text" placeholder="Your name.." id="myName">
  <input type="file" name="myFile" id="myFile">
  <input type="submit" value="Upload File" onclick="storeImage();">
</form>

<script>
function storeImage() {
  event.preventDefault();
  var myName = document.getElementById('myName').value;
  var file = document.getElementById('myFile').files[0];

  $.ajax({
    url: 'Google_Script_Url?prefix=JsonpCallback',
    method: 'POST',
    type: 'POST',
    dataType: 'jsonp',
    data: {
      file: file
    },
    processData: false, // tell jQuery not to process the data
    contentType: false, // tell jQuery not to set contentType
    mimeType: 'application/javascript',
    success: function(results) {
      console.log(JSON.stringify(results));
    },
    error: function(results) {
      console.log(JSON.stringify(results));
    }
  });
}
</script>

4
  • I reproduced your error message, but I don't know what it means. I'm guessing that maybe Google put something in their code that is stopping the POST request. You can use google.script.run.serverFunctionName() to send data to the server. Google Documentation I'd suggest using that instead of the AJAX request.
    – Alan Wells
    Nov 16, 2015 at 14:48
  • @SandyGood , I cannot use google.script.run.serverFunctionName() function, since I need to use the app script url in my website and unfortunately, google does not allow users to use the app script url in an iframe.
    – Ric K
    Nov 16, 2015 at 18:06
  • Okay, so the AJAX request is not in an Apps Script HTML Service, or a Google Site? I didn't try it from a regular website.
    – Alan Wells
    Nov 16, 2015 at 19:31
  • @RicK hey, can i know your solution? i have the same problem with you, can't upload file using google app script from regular website with AJAX/Fetch
    – mupinnn
    Oct 27, 2020 at 15:22

1 Answer 1

1

There are several issues with your ajax request

  • jsonp is a GET request not POST, is jsonp used to get around Same Origin Policy?
  • File uploads are done via POST requests not jsonp

The basic way to upload a file via ajax is to use a FormData object

  var myName = document.getElementById('myName').value;
  var file = document.getElementById('myFile').files[0];
  var data = new FormData();
  data.append(myName, file);
  $.ajax({
    url: 'Google_Script_Url',
    type: 'POST',
    data: data,
    processData: false, // tell jQuery not to process the data
    contentType: false, // tell jQuery not to set contentType
    success: function(results) {
      console.log(JSON.stringify(results));
    },
    error: function(results) {
      console.log(JSON.stringify(results));
    }
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.