dheeraj-thedev · May 1, 2021 01:11 · Oct 11, 2019 · Oct 11, 2019 · Dec 18, 2018 · Aug 13, 2018
diff --git a/submit.md b/submit.md
@@ -1,7 +1,9 @@
 # Upload Files to Google Drive using Javascript
 
+## News
 **[At October 11, 2019, I published a Javascript library to to run the resumable upload for Google Drive.](https://github.com/tanaikech/ResumableUploadForGoogleDrive_js) When this is used, the large file can be uploaded. You can also use this js library.**
 
+## Description
 This is a sample script for uploading files to Google Drive using Javascript. The files are uploaded by [Drive API v3](https://developers.google.com/drive/api/v3/reference/). ``gapi.client.drive.files.create()`` can create an empty file on Google Drive. But it cannot directly upload files including contents. I think that this might not be able to upload files and metadata with the multipart/related, although this might be resolved by the future update. So now, as one of workarounds, I use using XMLHttpRequest.
 
 - This sample uses [gapi](https://developers.google.com/api-client-library/javascript/start/start-js).

diff --git a/submit.md b/submit.md
@@ -1,4 +1,7 @@
 # Upload Files to Google Drive using Javascript
+
+**[At October 11, 2019, I published a Javascript library to to run the resumable upload for Google Drive.](https://github.com/tanaikech/ResumableUploadForGoogleDrive_js) When this is used, the large file can be uploaded. You can also use this js library.**
+
 This is a sample script for uploading files to Google Drive using Javascript. The files are uploaded by [Drive API v3](https://developers.google.com/drive/api/v3/reference/). ``gapi.client.drive.files.create()`` can create an empty file on Google Drive. But it cannot directly upload files including contents. I think that this might not be able to upload files and metadata with the multipart/related, although this might be resolved by the future update. So now, as one of workarounds, I use using XMLHttpRequest.
 
 - This sample uses [gapi](https://developers.google.com/api-client-library/javascript/start/start-js).

diff --git a/submit.md b/submit.md
@@ -49,3 +49,31 @@ Content-Type: text/plain
 sample text
 ------WebKitFormBoundaryxX0XmxgooMjdUECR--
 ~~~
+
+## Sample script 2
+When ``XMLHttpRequest`` is modified to ``fetch``, the script becomes as follows.
+
+~~~javascript
+var fileContent = 'sample text'; // As a sample, upload a text file.
+var file = new Blob([fileContent], {type: 'text/plain'});
+var metadata = {
+    'name': 'sampleName', // Filename at Google Drive
+    'mimeType': 'text/plain', // mimeType at Google Drive
+    'parents': ['### folder ID ###'], // Folder ID at Google Drive
+};
+
+var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
+var form = new FormData();
+form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
+form.append('file', file);
+
+fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id', {
+    method: 'POST',
+    headers: new Headers({ 'Authorization': 'Bearer ' + accessToken }),
+    body: form,
+}).then((res) => {
+    return res.json();
+}).then(function(val) {
+    console.log(val);
+});
+~~~
diff --git a/submit.md b/submit.md
@@ -0,0 +1,51 @@
+# Upload Files to Google Drive using Javascript
+This is a sample script for uploading files to Google Drive using Javascript. The files are uploaded by [Drive API v3](https://developers.google.com/drive/api/v3/reference/). ``gapi.client.drive.files.create()`` can create an empty file on Google Drive. But it cannot directly upload files including contents. I think that this might not be able to upload files and metadata with the multipart/related, although this might be resolved by the future update. So now, as one of workarounds, I use using XMLHttpRequest.
+
+- This sample uses [gapi](https://developers.google.com/api-client-library/javascript/start/start-js).
+    - Before you use this, please enable Drive API at API console and carry out the installation of gapi.
+- When this script is run, a text file including "sample text" is created to Google Drive.
+- When you use this script, please set fileContent and metadata.
+
+In this sample script, a text file including contents is created under a folder.
+
+## Sample script :
+~~~javascript
+var fileContent = 'sample text'; // As a sample, upload a text file.
+var file = new Blob([fileContent], {type: 'text/plain'});
+var metadata = {
+    'name': 'sampleName', // Filename at Google Drive
+    'mimeType': 'text/plain', // mimeType at Google Drive
+    'parents': ['### folder ID ###'], // Folder ID at Google Drive
+};
+
+var accessToken = gapi.auth.getToken().access_token; // Here gapi is used for retrieving the access token.
+var form = new FormData();
+form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
+form.append('file', file);
+
+var xhr = new XMLHttpRequest();
+xhr.open('post', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id');
+xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
+xhr.responseType = 'json';
+xhr.onload = () => {
+    console.log(xhr.response.id); // Retrieve uploaded file ID.
+};
+xhr.send(form);
+~~~
+
+## Request body :
+In this script, ``form`` is as follows. This is sent to Google Drive using the create method of Drive API.
+
+~~~
+------WebKitFormBoundaryxX0XmxgooMjdUECR
+Content-Disposition: form-data; name="metadata"; filename="blob"
+Content-Type: application/json
+
+{"name":"sampleName","mimeType":"text/plain","parents":["#####"]}
+------WebKitFormBoundaryxX0XmxgooMjdUECR
+Content-Disposition: form-data; name="file"; filename="blob"
+Content-Type: text/plain
+
+sample text
+------WebKitFormBoundaryxX0XmxgooMjdUECR--
+~~~