Trouble uploading binary files using JavaScript FileReader API

Question

New to javascript, having trouble figuring this out, help!

I am trying to use the Javascript FileReader API to read files to upload to a server. So far, it works great for text files.

When I try to upload binary files, such as image/.doc, the files seem to be corrupted, and do not open.

Using dojo on the client side, and java on the server side, with dwr to handle remote method calls. Code :

Using a html file input, so a user can select multiple files to upload at once :

<input type="file" id="fileInput" multiple>

And the javascript code which reads the file content:

        uploadFiles: function(eve) {
        var fileContent = null;

        for(var i = 0; i < this.filesToBeUploaded.length; i++){
            var reader = new FileReader();
            reader.onload = (function(fileToBeUploaded) {
                return function(e) {
                    fileContent = e.target.result;
                    // fileContent object contains the content of the read file
                };
            })(this.filesToBeUploaded[i]);

            reader.readAsBinaryString(this.filesToBeUploaded[i]);
        }            
    }

The fileContent object will be sent as a parameter to a java method, which will write the file.

    public boolean uploadFile(String fileName, String fileContent) {
    try {
        File file = new File("/home/user/files/" + fileName);
        FileOutputStream outputStream = new FileOutputStream(file);
        outputStream.write(fileContent.getBytes());
        outputStream.close();
    } catch (FileNotFoundException ex) {
        logger.error("Error uploading files: ", ex);
        return false;
    } catch (IOException ioe) {
        logger.error("Error uploading files: ", ioe);
        return false;
    }
    return true;
}

I have read some answers suggesting the use of xhr and servlets to achieve this.

Is there a way to use FileReader, so that it can read files of any type (text, image, excel etc.) ?

I have tried using reader.readAsBinaryString() and reader.readAsDataUrl() (Decoded the base64 fileContent before writing to a file), but they did not seem to work.

PS : 1. Also tried reader.readAsArrayBuffer(), the resultant ArrayBuffer object shows some byteLength, but no content, and when this is passed to the server, all I see is {}.

2. This bit of code is intended to work on only newer versions of browsers..

Answer 1

Thanks N.M! So, it looks like ArrayBuffer objects cannot be used directly, and a DataView must be created in order to use them. Below is what worked -

    uploadFiles: function(eve) {
    var fileContent = null;

    for(var i = 0; i < this.filesToBeUploaded.length; i++){
        var reader = new FileReader();
        reader.onload = (function(fileToBeUploaded) {
            return function(e) {
                fileContent = e.target.result;
                var int8View = new Int8Array(fileContent);
                // now int8View object has the content of the read file!
            };
        })(this.filesToBeUploaded[i]);

        reader.readAsArrayBuffer(this.filesToBeUploaded[i]);
    }            
}

Refer N.M 's comments to the question for links to the relevant pages.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays