CODEWITHSUNDEEP
javascriptnode.jsreactjs
Ricky
Ricky

Reputation: 27

how to use react and node to upload string as file to google drive

how to use react js as frontend and node js as backend to upload / read files from google drive.

This is what I already tried : Write string as text file then upload to google drive

Is it possible to upload files using react?

If not, then I would like to send a string from react to node and then upload to google drive

Upvotes: 1

Views: 1567

Answers (1)

Pallamolla Sai
Pallamolla Sai

Reputation: 2493

I tried below approach and worked for me. (As of now I am uploading file from frontend (vueJS) only). I am assuming you have google client id & client secret & refresh & access tokens.

NOTE::: When user uploads any file I am storing those files inside my google drive. Every time without logging into my account I am getting access_token by following some steps and accessing my google drive without logging in(No need of OAuth. ).

front end code VueJs (html code is same for all frameworks) you have to get code for file uploading through input in react almost similar to this

data:{
   file:''
}

<label>Files
    <input type="file" id="files" ref="file"  v-on:change="handleFilesUpload()"/> // here you can write corresponding react code for file uploading
  </label>
  <button v-on:click="submitFiles()">Submit</button>

**On submit methods **

handleFilesUpload() {
        console.log("helloWorld");
        // this.files = this.$refs.files.files;
        this.file = this.$refs.file.files[0];
        console.log("file is ");
        console.log(this.file);
 }

  submitFiles() {
        // for storing file data
        let formData1 = new FormData();
        formData1.append('file',this.file); // here this.file is data when user browses through input button data will be stored to **file**

Now you have entire file stored in formData1. Now you have to send this data to googledriveapi through api calls(I was using axios)

API call

uploadFilesToGoogleDrive(formData1) {
     return axios({
        url:'https://www.googleapis.com/upload/drive/v3/files?uploadType=media',
        method:'post',
        headers:{
            'Content-Type': 'multipart/related;boundary=9700883396bond',
            'Authorization':'Bearer '+YOUR_ACCESS_TOKEN

        },

        formData1

    })
}

Now If you go to your google drive you can see one file which is newly created. Following links might help.

sample script uploading to google drive

Upvotes: 1

Related Questions