1

I'm building a Chrome extension in which I simulate form POST to send images over to a server. I managed to upload the file, yet its content is distorted. By comparing the byte array of the uploaded and the original, it can be observed that every byte > 127 is transformed into 2 other bytes.

E.g: 137 -> 194 137

   233 -> 195 169

The POST payload in Chrome developer tool suggests that the redundant byte is added before the request is sent.

My original file Content:

   ‰PNG ....

And content recorded in web payload

   ‰PNG ....

A char not supposed to be there precedes the content. Do you have any idea how to avoid this issue? Below is the code I use to test:

        var fr = new FileReader();
        fr.onloadend = function(evt){
                        
            if(evt.target.readyState == FileReader.DONE){
                                    //str - image content
                var str = "";
                var byteStr = "";
                var dv = new DataView(evt.target.result);
                console.log("data length = " + evt.target.result.byteLength);
                for(var i = 0 ; i < evt.target.result.byteLength; i++){
                  var b1 = dv.getUint8(i);
                  str += String.fromCharCode(b1);
                  byteStr += b1 + " ";
                                
                }
                            
                console.log(str);
                console.log(byteStr);
                                 //use jQuery.ajax to post image to server
                attachImage(str, file.name,file.type);
            }
        }
                    
        fr.readAsArrayBuffer(file);

Thank you in advance.

Community
  • 1
  • 1
vuamitom
  • 173
  • 2
  • 8
  • 2
    Sounds like UTF-8 encoding. Could you try sending it as base 64? – pimvdb Oct 02 '11 at 17:42
  • you mean javascript using UTF-16 while post request is sent using UTF-8 causes this issue? I tried base64 and it didn't work. And I don't have access to the server either. – vuamitom Oct 02 '11 at 18:03
  • What do you mean base64 didn't work? Just use `FileReader.readAsDataURL` to get the base64 value, it has never not worked for me. – Martin Jespersen Oct 02 '11 at 18:53
  • I meant I can get base64 encoded value just fine. But the server doens't support it. So the file uploaded using base64 can't be displayed as an image on the server. And I don't have control over the server – vuamitom Oct 02 '11 at 18:59
  • Are you using a form, or XHR? For XHR you could try xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=ISO-8859-1"). For a form you could use
    – Gerben Oct 02 '11 at 19:38
  • I'm sending using XHR. Content-Type is set to :"multipart/form-data; boundary=----WebKitFormBoundarynpPf2woRwMfQQqnc". I need multipart for file uploading. – vuamitom Oct 03 '11 at 16:58
  • Hi, thanks to a friend for pointing me to this post http://stackoverflow.com/questions/5292689/sending-images-from-canvas-elements-using-ajax-and-php-files/5303242#5303242 , my issue now can be resolved. The approach uses xhr sendasbinary to avoid encoding issue. – vuamitom Oct 10 '11 at 18:38

0 Answers0