gcs-browser-upload
Chunked, pausable, recoverable uploading to Google Cloud Storage directly from the browser.
This package is forked from gcs-browser-upload. It adds the possibility of adding custom metadata to the uploaded object.
How does it work?
- User selects a file
- File + a Google Cloud Storage resumable upload URL are given to
gcs-browser-upload
- File is read in chunks
- A checksum of each chunk is stored in
localStorage
once succesfully uploaded - If the page is closed and re-opened for some reason, the upload can be resumed by passing the same file and URL back to
gcs-browser-upload
. The file will be validated against the stored chunk checksums to work out if the file is the same and where to resume from. - Once the resume index has been found,
gcs-browser-upload
will continue uploading from where it left off. - At any time, the
pause
method can be called to delay uploading the remaining chunks. The current chunk will be finished. unpause
can then be used to continue uploading the remaining chunks.
Example
There is a full example available at example/example-client
.
import Upload from "gcs-browser-upload";
let input = document.getElementById("fileInput");
let pause = document.getElementById("pause");
let unpause = document.getElementById("unpause");
let upload = null;
input.addEventListener("change", async () => {
upload = new Upload({
id: "foo",
url: "https://www.googleapis.com/..../....",
file: input.files[0],
onChunkUpload: (info) => {
console.log("Chunk uploaded", info);
},
});
try {
await upload.start();
console.log("Upload complete!");
} catch (e) {
console.log("Upload failed!", e);
} finally {
upload = null;
}
});
pause.addEventListener("click", () => {
if (upload) {
upload.pause();
}
});
unpause.addEventListener("click", () => {
if (upload) {
upload.unpause();
}
});
Config
{
id: null,
url: null,
file: null,
chunkSize: 262144,
storage: window.localStorage,
contentType: 'text/plain',
onChunkUpload: () => {},
metadata: { },
}
Requirements
This library requires regeneratorRuntime
to be available globally - it is written in ES7 and makes use of async/await, which gets compiled into generators. You can find out about regenerator-runtime here.
Handling errors
Various errors are thrown if something goes wrong during uploading. See src/errors.js for the different types. These are exported as a property on the Upload
class.
Developing
make bootstrap
make test
make test-watch