Where and how do I set the correct encoding when uploading files using xhr

Question

I am uploading image files, and I need them to work with accented characters - so I have made everything use UTF-8.

I use this javascript function to upload them:

     $('#files').change(function(e) {
            var formData = new FormData();
            for (var i=0; i<this.files.length;i++){
                formData.append(this.files[i].name, this.files[i]);
            }
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(e) {
                if ( 4 == this.readyState ) {
                    showMessage("Uploaded.");
                }
            };
            xhr.open('post', 'accoms/upload.jsp', true);
            xhr.send(formData);
        }, false);

So if I have a file named "Björk.jpg" for example, when I look at what gets sent to the server using FireFox Firebug it shows as:

Content-Disposition: form-data; name="BjÃ¶rk.jpg"; filename="BjÃ¶rk.jpg"

and that seems to be what the server receives.

The encoding for the post shows as this:

Content-Type    text/html;charset=UTF-8

When I send regular form data input text in other forms, it sends, and the server receives, the word "Björk" correctly.

Here is the server-side code in case its that:

mpp=new MultipartParser(request, 100000000);
com.oreilly.servlet.multipart.Part part;
FilePart fp=null;
String fileName="";
files=new ArrayList();
while((part=mpp.readNextPart())!=null){
    if (part.isFile()){
        fp=(FilePart)part;
        fileName=fp.getFileName();
        File file=new File(fileName);
        long size=fp.writeTo(file);
                    files.add(file);
            }
}

Any ideas?

Thanks.

score 1 · Accepted Answer · answered Apr 11 '13 at 19:08

The parser uses its own encoding as is evident from the API reference.

Try:

mpp = new MultipartParser(request, 100000000);
mpp.setEncoding("UTF-8");
//rest of your code

The reference recommends passing it in constructor though:

mpp = new MultipartParser(request, 100000000, true, true, "UTF-8");

score 0 · Answer 2 · answered Apr 11 '13 at 17:34

0

You can set encoding like this

var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
// retrieve data unprocessed as a binary string
oReq.overrideMimeType("text/plain; charset=x-user-defined");

Some more info can be found here https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

answered Apr 11 '13 at 17:34

Dev Shangari

336
2
7

Thanks, I did try that by adding xhr.overrideMimeType("multipart/form-data; charset=UTF-8"); but the encoding was already UTF-8 as seen in the headers in FireBug – iainmac999 Apr 11 '13 at 18:52

score 0 · Answer 3 · answered Apr 11 '13 at 18:39

0

The issue is most likely in your server-side code. Perhaps you are not taking into account that the filename is UTF-8 encoded. Nothing you posted in your question suggests that the name is being sent incorrectly. What you see in Firebug is not necessarily what is being sent. It's very possible that the default encoding being used by Firebug when examining the request does not match the encoding in use by the browser. This would explain why the filename looks garbled in Firebug.

answered Apr 11 '13 at 18:39

Ray Nicholus

19,538
14
59
82

Thanks for the reply. Yes I did consider that, so I output the filenames to the console as they are appended, and they look ok, ie. firebug console displays them correctly, but in the post params they are not correct. On the server I am receiving correctly when its regular posted params from a regular form. Also on the server side I have tried decoding as UTF-8 but its just more garbled. – iainmac999 Apr 11 '13 at 18:59
Please show your server-side code. The problem most likely lies there. – Ray Nicholus Apr 11 '13 at 19:02
I am using com.oreilly.servlet.multipart.* to get the parts on the server which I do not use for regular forms, so I guess I'll check them to see what they are doing. – iainmac999 Apr 11 '13 at 19:03
Yikes. Why don't you just use [Apache Commons FileUpload](http://commons.apache.org/proper/commons-fileupload/)? That would be my choice. Regardless, it seems likely that you are simply not decoding the parameters correctly server-side. – Ray Nicholus Apr 11 '13 at 19:04
I've added the server-side code, I'll take a look at the FileUpload too thanks. – iainmac999 Apr 11 '13 at 19:09
also, adding a decoder makes no difference fileName=URLDecoder.decode(fp.getFileName(),"UTF-8"); – iainmac999 Apr 11 '13 at 19:10
Thanks, you were right, I'll probably replace it with the lib you mentioned. – iainmac999 Apr 11 '13 at 20:41

Where and how do I set the correct encoding when uploading files using xhr

3 Answers3

Linked