Search code examples
javascriptazurefine-uploaderfileapi

How to manipulate filestream in memory before uploading


I'm working on an uploader that needs to censor a few bytes in the uploaded data by overwriting them to a predetermined value, before uploading them.

Right now, I've hooked into the onSubmit event because it allows for non-blocking work to be performed. Below you can see my event handler. Just before the call to promise.success(); you will note the heavily commented part, which is the problem I need help with. How can I return/set the byte array there?

onSubmit: function (id, name) {
    // http://docs.fineuploader.com/branch/master/api/events.html#submit
    // Called when the item has been selected and is a candidate for uploading.
    // Return false to prevent submission to the uploader.

    // create promise
    var promise = new qq.Promise();

    // configure file reader
    var reader = new FileReader();
    reader.onerror = function (e) {
        promise.failure("error occured reading file");
    };
    reader.onabort = function (e) {
        promise.failure("file reading aborted");
    };
    reader.onload = function (e) {
        var buffer = reader.result;
        var byteArray = new Uint8Array(buffer);

        manipulateByteArray(byteArray);

        /******************* Missing part... **********************/
        // TODO (How to return manipulated byteArray?)
        /******************* Missing part...**********************/

        // signal success
        promise.success();
    }

    // initiate async work
    var file = this.getFile(id);
    reader.readAsArrayBuffer(file);

    // return promise
    return promise;
},

Solution

  • I figured it out. This was the crucial part:

            if(needsManipulation(byteArray))
            {
                manipulateByteArray(byteArray);
    
                // construct a new blob
                var newBlob = { blob: new Blob([byteArray], { type: 'application/octet-stream' }), name: name };
    
                // restart the process for the adjusted file
                uploader.addFiles(newBlob);
    
                // signal failure and exit early
                promise.failure();
                return;
            }
    

    Here's the revised code:

    onSubmit: function (id, name) {
        // http://docs.fineuploader.com/branch/master/api/events.html#submit
        // Called when the item has been selected and is a candidate for uploading.
        // Return false to prevent submission to the uploader.
    
        // create promise
        var promise = new qq.Promise();
    
        // add uploader instance to closure
        var uploader = this;
    
        // configure file reader
        var reader = new FileReader();
        reader.onerror = function (e) {
            promise.failure("error occured reading file");
        };
        reader.onabort = function (e) {
            promise.failure("file reading aborted");
        };
        reader.onload = function (e) {
            var buffer = reader.result;
            var byteArray = new Uint8Array(buffer);
    
            if(needsManipulation(byteArray))
            {
                manipulateByteArray(byteArray);
    
                // construct a new blob
                var newBlob = { blob: new Blob([byteArray], { type: 'application/octet-stream' }), name: name };
    
                // restart the process for the adjusted file
                uploader.addFiles(newBlob);
    
                // signal failure and exit early
                promise.failure();
                return;
            }
    
            // signal success
            promise.success();
        }
    
        // initiate async reading work
        var file = this.getFile(id);
        reader.readAsArrayBuffer(file);
    
        // return promise
        return promise;
    },