This is a Javascript library to achieve the resumable upload for Google Drive.
When a file more than 5 MB is uploaded to Google Drive with Drive API, the resumable upload is required to be used. I have already published the sample script for "Resumable Upload for Web Apps using Google Apps Script". Ref In this case, Web Apps is used. Here, I would like to introduce the script for the resumable upload created by only Javascript. Unfortunately, in the current stage, at google-api-javascript-client, there are no methods for the resumable upload. And, I thought that when this function is created as a Javascript library, it might be useful for users. Also that library is also useful for me. So I created this. If this was useful for your situation, I'm glad.
<script src="resumableupload_js.min.js"></script>Or, using jsdelivr cdn
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload_js.min.js"></script><script src="resumableupload2_js.min.js"></script>Or, using jsdelivr cdn
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload2_js.min.js"></script>This library has 2 Classes.
-
Class ResumableUploadToGoogleDrive
- This Class can achieve the resumable upload of a file by reading the file to the memory.
-
Class ResumableUploadToGoogleDrive2
- This Class can achieve the resumable upload of a file by directly reading partially the file from the local Disk. By this, the large file which is over the memory of the local PC can be uploaded.
In order to use this library, please prepare your access token. The access token can be retrieved by OAuth2 and Service account.
Document of OAuth2 is here.
This is a simple sample script. In this sample script, it supposes that the access token is retrieved by Google APIs Client Library for browser JavaScript, aka gapi.
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload_js.min.js"></script>
<body>
<form>
<input name="file" id="uploadfile" type="file" />
</form>
<div id="progress"></div>
</body>
<script>
const accessToken = gapi.auth.getToken().access_token; // Please set access token here.
document.getElementById("uploadfile").addEventListener("change", run, false);
function run(obj) {
const file = obj.target.files[0];
if (file.name != "") {
let fr = new FileReader();
fr.fileName = file.name;
fr.fileSize = file.size;
fr.fileType = file.type;
fr.readAsArrayBuffer(file);
fr.onload = resumableUpload;
}
}
function resumableUpload(e) {
document.getElementById("progress").innerHTML = "Initializing.";
const f = e.target;
const resource = {
fileName: f.fileName,
fileSize: f.fileSize,
fileType: f.fileType,
fileBuffer: f.result,
accessToken: accessToken,
};
const ru = new ResumableUploadToGoogleDrive();
ru.Do(resource, function (res, err) {
if (err) {
console.log(err);
return;
}
console.log(res);
let msg = "";
if (res.status == "Uploading") {
msg =
Math.round(
(res.progressNumber.current / res.progressNumber.end) * 100
) + "%";
} else {
msg = res.status;
}
document.getElementById("progress").innerText = msg;
});
}
</script>- When you use above sample script, the uploading file is created in the root folder of Google Drive without converting to Google Docs.
In this sample script, the file is uploaded using the sidebar on Spreadsheet.
function getAuth() {
// DriveApp.createFile(blob) // This is used for adding the scope of "https://www.googleapis.com/auth/drive".
return ScriptApp.getOAuthToken();
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile("index");
SpreadsheetApp.getUi().showSidebar(html);
}<form><input name="file" id="uploadfile" type="file" /></form>
<div id="progress"></div>
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload_js.min.js"></script>
<script>
document.getElementById("uploadfile").addEventListener("change", run, false);
function run(obj) {
google.script.run
.withSuccessHandler((accessToken) =>
ResumableUploadForGoogleDrive(accessToken, obj)
)
.getAuth();
}
function ResumableUploadForGoogleDrive(accessToken, obj) {
const file = obj.target.files[0];
if (file.name != "") {
let fr = new FileReader();
fr.fileName = file.name;
fr.fileSize = file.size;
fr.fileType = file.type;
fr.accessToken = accessToken;
fr.readAsArrayBuffer(file);
fr.onload = resumableUpload;
}
}
function resumableUpload(e) {
document.getElementById("progress").innerHTML = "Initializing.";
const f = e.target;
const resource = {
fileName: f.fileName,
fileSize: f.fileSize,
fileType: f.fileType,
fileBuffer: f.result,
accessToken: f.accessToken,
};
const ru = new ResumableUploadToGoogleDrive();
ru.Do(resource, function (res, err) {
if (err) {
console.log(err);
return;
}
console.log(res);
let msg = "";
if (res.status == "Uploading") {
msg =
Math.round(
(res.progressNumber.current / res.progressNumber.end) * 100
) + "%";
} else {
msg = res.status;
}
document.getElementById("progress").innerText = msg;
});
}
</script>Resumable Upload of Multiple Files with Asynchronous Process for Google Drive
This is a sample script for uploading multiple files with large size (> 50 MB) at the sidebar, dialog of Google Docs and Web Apps using the resumable upload of the asynchronous process with Javascript and Google Apps Script (GAS).
This sample script demonstrates uploading multiple files using split asynchronous processes with resumable upload. It leverages JavaScript and HTML within Google Spreadsheets.
There are several properties in the object resource for the method of Do() as follows.
fileName: Filename of uploading file.fileSize: File size of uploading file.fileType: MimeType of uploading file.fileBuffer: Buffer of uploading file.accessToken: Access token for uploading with Drive API.
folderId: Destination folder ID of uploading file. When this property is not used, the uploaded file is created to the root folder of Google Drive.convertToGoogleDocs: If this property is used astrue, the uploaded file is converted to Google Docs. But in this case, if the file size is large, an error might occur. Please be careful this. The default value isfalse. So the file is uploaded without converting.fields: As a sample case, if you want to retrieve only file ID, please useid.chunkSize: If you want to change the chunk size for the resumable upload, please use this. The default value is52428800(50 MB). This value is required to be in multiples of 256 KB (256 x 1024 bytes). Please be careful about this. Ref
In order to use this library, please prepare your access token. The access token can be retrieved by OAuth2 and Service account.
Document of OAuth2 is here.
This is a simple sample script. In this sample script, it supposes that the access token is retrieved by Google APIs Client Library for browser JavaScript, aka gapi.
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload2_js.min.js"></script>
<body>
<form>
<input name="file" id="uploadfile" type="file" />
</form>
<div id="progress"></div>
</body>
<script>
const accessToken = gapi.auth.getToken().access_token; // Please set access token here.
document.getElementById("uploadfile").addEventListener("change", run, false);
function run(obj) {
const resource = {
file: obj.target.files[0],
accessToken: accessToken,
};
resumableUpload(resource);
}
function resumableUpload(resource) {
document.getElementById("progress").innerHTML = "Initializing.";
const ru = new ResumableUploadToGoogleDrive2();
ru.Do(resource, function (res, err) {
if (err) {
console.log(err);
return;
}
console.log(res);
let msg = "";
if (res.status == "Uploading") {
msg =
Math.round(
(res.progressNumber.current / res.progressNumber.end) * 100
) + "%";
} else {
msg = res.status;
}
document.getElementById("progress").innerText = msg;
});
}
</script>- When you use above sample script, the uploading file is created in the root folder of Google Drive without converting to Google Docs.
In this sample script, the file is uploaded using the sidebar on Spreadsheet.
function getAuth() {
// DriveApp.createFile(blob) // This is used for adding the scope of "https://www.googleapis.com/auth/drive".
return ScriptApp.getOAuthToken();
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile("index");
SpreadsheetApp.getUi().showSidebar(html);
}<form><input name="file" id="uploadfile" type="file" /></form>
<div id="progress"></div>
<script src="https://cdn.jsdelivr.net/gh/tanaikech/[email protected]/resumableupload2_js.min.js"></script>
<script>
document.getElementById("uploadfile").addEventListener("change", run, false);
function run(obj) {
google.script.run
.withSuccessHandler((accessToken) =>
resumableUpload({
file: obj.target.files[0],
accessToken: accessToken,
})
)
.getAuth();
}
function resumableUpload(resource) {
document.getElementById("progress").innerHTML = "Initializing.";
const ru = new ResumableUploadToGoogleDrive2();
ru.Do(resource, function (res, err) {
if (err) {
console.log(err);
return;
}
console.log(res);
let msg = "";
if (res.status == "Uploading") {
msg =
Math.round(
(res.progressNumber.current / res.progressNumber.end) * 100
) + "%";
} else {
msg = res.status;
}
document.getElementById("progress").innerText = msg;
});
}
</script>This is a sample script for uploading multiple files with large size (> 50 MB) at the sidebar, dialog of Google Docs and Web Apps using the resumable upload of the asynchronous process with Javascript and Google Apps Script (GAS).
There are several properties in the object resource for the method of Do() as follows.
fileName: Filename of uploading file.fileSize: File size of uploading file.fileType: MimeType of uploading file.fileBuffer: Buffer of uploading file.accessToken: Access token for uploading with Drive API.
folderId: Destination folder ID of uploading file. When this property is not used, the uploaded file is created to the root folder of Google Drive.convertToGoogleDocs: If this property is used astrue, the uploaded file is converted to Google Docs. But in this case, if the file size is large, an error might occur. Please be careful this. The default value isfalse. So the file is uploaded without converting.fields: As a sample case, if you want to retrieve only file ID, please useid.chunkSize: If you want to change the chunk size for the resumable upload, please use this. The default value is52428800(50 MB). This value is required to be in multiples of 256 KB (256 x 1024 bytes). Please be careful about this. Ref
If you have any questions and commissions for me, feel free to tell me.
-
v1.0.0 (October 11, 2019)
- Initial release.
-
v2.0.0 (November 15, 2021)
- New Class ResumableUploadToGoogleDrive2 was added. By this, the large file which is over the memory in the local PC can be uploaded by the resumable upload.
-
v2.0.1 (April 18, 2023)
- From this discussion, checking the inputted custom chunk size was strengthened in the script. And, the following document was added.
chunkSize: If you want to change the chunk size for the resumable upload, please use this. The default value is52428800(50 MB). This value is required to be in multiples of 256 KB (256 x 1024 bytes). Please be careful about this. Ref
-
v2.0.2 (May 23, 2024)
- From this version, the files could be also uploaded to the shared drive.