Upload file to Google Drive with React and Google App script

Question

I am trying to upload file with Google App script and React.

Google Script:

function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) {
  try{
    var splitBase = base64Data.split(','),
    type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(nomeArq);

    var file = DriveApp.getFolderById(idPasta).createFile(ss);

    return file.getName();
  }catch(e){
    return 'Erro: ' + e.toString();
  }
}

I can run this ant it works:

function uploadFile() {
  var image =   UrlFetchApp.fetch('url to some image').getBlob();
  var file = {
    title: 'google_logo.png',
    mimeType: 'image/png'
  };
  file = Drive.Files.insert(file, image);
  Logger.log('ID: %s, File size (bytes): %s', file.id, file.fileSize);
}

This is React script:

onSubmit = (e) => {
    e.preventDefault();

    axios.get(url, {...this.state}, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    }, (response) => {
        console.log(response);
    })

};

 setFile = (event) => {
    console.log(event.target.files)
     this.setState({file: event.target.files[0]});
};

render() {

    return (
        <form>
            <input type="file" id="file" onChange={this.setFile} />
            <button onClick={this.onSubmit}>ADD</button>
        </form>
    )
}

I am trying with POST, but I am getting 400 response. I know that this can't be GET request, but and with it, I am getting - 200 with no response.

I can insert rows in sheets, but I want to upload files to Google Drive with Google App Scripts.

I know that there is a way to upload files via Google Scripts and React, because, there is a way without React (google.script.run).

Answer 1

Here are two different approaches that are used in mixed mode. It's unacceptable in some contexts.

Let's say softly 'React is a dummy'. This is an add-on that you should always avoid when somewhat comes to something that you depend on, but you cannot change. See what SOLID is.

Below it is always assumed that you are working in a browser. Your web-pages are hosted in the web application of the Google Apps Script.

The first approach. Using XMLHttpRequests

On client side you have to use XMLHttpRequests call from your browser.

On server side you have to use doGet doPost reserved functions. Always transfer data in a clear and simple format. This will save time searching for errors.

Example https://stackoverflow.com/a/11300412/1393023

The second approach. Using Client-side API

On client side you have to use google.script.run call from your browser.

On server side you have to use your functions. Always transfer data in a clear and simple format. This will save time searching for errors.

Example https://stackoverflow.com/a/15790713/1393023

Consequence

Your example has signs of mixing approaches. Unfortunately, it cannot be quickly debugged.

There is no reason that React is causing the problem. If so, then your architecture is incorrect.

If you want to use axios, then you need to consider the first approach.

If you want to use google.script.run then you need to catch onSubmit then you need to call an interface that implement google.script.run. Usually asynchronously, since the last call will still be completed with a callback.