Quantcast
Channel: Active questions tagged filereader - Stack Overflow
Viewing all articles
Browse latest Browse all 107

Trouble uploading binary files using JavaScript FileReader API

$
0
0

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 {}.

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

Viewing all articles
Browse latest Browse all 107

Trending Articles