Edit Uploaded File Client Side With Javascript

I am developing a web application where the user have to upload a file. Before sending it to server, I will need to modify that file on client side. Here is the code for loading th

Solution 1:

You can't change the File object, as that represents a file on the user's local filesystem. However, you can create a new Blob from your modified array buffer:

var uploadBlob = new Blob(arrayBuffer);

Then simply upload this uploadBlob in place of the original File object using FormData:

var uploadData = new FormData(),
    request = null;

upload.append('fileData', uploadBlob);

request = new XMLHttpRequest();
request.open("POST", "http://yourURL.com");
request.send(formData);

(Obviously, remember to add any needed handlers to deal with your request's response.)

The only issue is browser support (basically, IE10+):

http://caniuse.com/#feat=xhr2

http://caniuse.com/#feat=blobbuilder