Alter the content of a file before upload with FileReader using javascript

Question

Is it possible to change the content of a file before beeing uploaded in javascript ? I can read the content but changing it seems impossible.

    f = document.getElementById('input').files[0];
    var reader = new FileReader();
    reader.onload = function(e){
        console.log(e.target)
        e.target.result = "new content"
        console.log(e.target);
    };
    reader.readAsDataURL(f);

Possible duplicate of [Is it possible to update FileList?](https://stackoverflow.com/questions/52078853/is-it-possible-to-update-filelist) — Endless, Jan 11 '19 at 14:16

score 0 · Answer 1 · answered Jan 11 '19 at 13:48

You can't rewrite the value of a file input.

You can take the content of the file and send it with Ajax though.

reader.onload = function(e){
    const data = new FormData();
    const url = this.result;
    const blob = convertUrlToBlob(url);
    data.append("file_input", blob, "filename.ext");
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/example/url');
    xhr.send(data);
};

I won't go into the detail of how to write a convertUrlToBlob function, it is covered by this question.

actually you can rewrite file input... [[1](https://stackoverflow.com/questions/52078853/is-it-possible-to-update-filelist)] — Endless, Jan 11 '19 at 14:17

Alter the content of a file before upload with FileReader using javascript

1 Answers1