Javascript, read from input file and upload with XMLHttpRequest

Question

Sorry about my english. I need upload my file (.exe) selected by input file:

<input type="file" id="myfile">

Read like this(Javascript):

var myfile='';
var input = document.getElementById('myfile');
input.onchange = function(evt){
    var tgt = evt.target || window.event.srcElement, files = tgt.files;
    if (FileReader && files && files.length) {
            var fr = new FileReader();
            fr.onload = function(){
                myfile = fr.result;
            }
        fr.readAsDataURL(files[0]);
        }
}

Now I have variable "myfile" like:

"data:application/msdownload;base64,0J/RgNC40LLQtdGCINC80LjRgCE= .... etc."

Inside base64 part I have source file what I was select. When I trying upload my file, encoding and size of this file changed and file is corrupted. What am doing wrong?

Upload code:

    var fd = new FormData();
    var b = new Blob([atob(decodeURIComponent((myfile).split(',')[1]))],{type: 'application/msdownload'});
    fd.append('file', b, "myfile.exe");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://myserver/");
    xhr.send(fd);

File upload OK. BUT when I download this file, this file corrupted...encoding and size changed.

I was trying set different headers like this:

xhr.setRequestHeader("Content-Type", "charset=windows-1251"); 
.............
xhr.setRequestHeader("Content-Type", "charset=utf-8");

etc...... but nothing changed...

I can upload my file without ajax, but I need hold this file localy ...and after manipulation upload it from variable.

In short:

I have a string encoded in Base64 like this:

0J/RgNC40LLQtdGCINC80LjRgCE=

Well, I know at this string is source of file "SecretFile.exe". I want decode and upload this file using javascript. With standart window.atob decoded string is not equal of original file source. How true decode this file, encoded by Base64 in FileReader.

Thank you.

is the file OK once you upload it? how are you storing it on the server, how are you downloading it (you haven't shown that code, yet you say it's the **download** that corrupts the file) — Jaromanda X, Sep 27 '16 at 23:51
`size changed` - by how much? what is the original size, what is the changed size - the devil is in the details — Jaromanda X, Sep 27 '16 at 23:52
Don't edit answers into questions. Please read [How does accepting an answer work?](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) — Quentin, Oct 08 '16 at 10:55

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You don't have to read the file to a data string, and then convert it to a Blob. Any File object (such as the one you get from an <input type="file" /> element) will already also be a Blob, so you can just pass it directly to fd.append.

If you need to manipule the File object before uploading, you should use the FileReader's readAsArrayBuffer method instead, which gives you an ArrayBuffer that you can manipulate directly, and then simply create a blob with new Blob([ arrayBuffer ]) before uploading.

Javascript, read from input file and upload with XMLHttpRequest

1 Answers1