@juice-js/upload v1.3.0

Juice upload library

Build library

npm run build

Run demo

npm run serve

Publish

// commit before update version. This message will be git commit message. npm version 1.0.4 -m "Upgrade to %s to fix vulnerable dependencies" npm publish --access public

Api

Supported methods:

• upload
• resume
• abort
• exists

Supported events:

• onupload
• onsuccess
• onerror
• onprogress
• onabort

Usage

Embed javascript library

<script src="~/lib/juice-js/upload/dist/jupload.js" asp-append-version="true"></script>

Or import library in your own js file

import {JUpload, FileExistsBehavior} from "~/lib/juice-js/upload/dist/jupload.js"; 

// enum FileExistsBehavior{RaiseError: 0,    Replace: 1,    AscendedCopyNumber: 2,    Resume: 3}
// class UploadConfiguration{ UploadId, Name, Offset, SectionSize, PackageSize, Exists}
// class Progress(percent, bps, totalTime, remaining)

// Init uploader with upload endpoint
window.uploader = new JUpload("/storage1");

// Init upload events
uploader.onsuccess = function (upload, progress, dateModifiedPreserved) {
    //upload: UploadConfiguration
    console.log("success", upload);
}

uploader.onerror = function (upload, message) {
    //upload: UploadConfiguration
    console.log("error", upload, message);
}

uploader.onprogress = function (progress) {
    //progress: Progress
    console.log("progress", progress.message);
}

// NOTE: onupload event will only be called on the large file, after the first part is uploaded.
// The smaller file will be completed in single request so it only fires onsuccess/onerror event
uploader.onupload = function (upload) {
    //upload: UploadConfiguration
    console.log("start", upload.Name, upload.UploadId);
    document.getElementById("uploadId").value = upload.UploadId; // set upload id to handle resume later
}

uploader.onabort = function (upload) {
    //upload: UploadConfiguration
    console.log("abort", upload);
}

// Handle file input event to upload or resume
// The sectionSize option will be used only for first request, after that it will be replaced by the sectionSize in the response headers
document.getElementById("file").onchange = function (event) {
    if (this.files[0]) {
        let uploadId = document.getElementById("uploadId").value;
        if (!uploadId) {
        
            uploader.upload(this.files[0]
                //, { 
                //    fileExistsBehavior: FileExistsBehavior.RaiseError, 
                //    filePath: "foo/bar/"+this.files[0].name,
                //    correlationId: "1234",
                //    metadata: {
                //        "key1": "value1",
                //        "key2": "value2"
                //    },
                //    sectionSize: 5000000
                //  } // option
            );
        }
        else {
            // check exists
            // uploader.exists(this.files[0].name);
            uploader.resume(uploadId, this.files[0]);
        }
    }
}
// Abort current upload, you can resume it later
document.getElementById("abort").onclick = function(){
    uploader.abort();

    // cancel upload and report failure to API, the file on storage maybe removed
    // uploader.cancel();
}