Upload file to drive using ajax and google app script

Question

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>

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
@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
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
@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 — Mupinnnnnn

Musa Musa · Accepted Answer · 2015-11-17T15:21:35

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));
    }
  });

Upload file to drive using ajax and google app script

1 Answers