Search code examples
javascriptphptizen

Image created with blob only contains numbers and commas


I have a file on my device that is stored in a folder like:

/opt/share/folder/image.jpg

I'd like to upload this file on my server using some ajax request just as I'd do with a standard HTML form.

After few searches, I've come to create a Blob file and upload it on the server; this works. But the problem is that my jpeg at the arrival is corrupted and contains a suit of numbers and commas (technically, Bytes of the source file):

255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,219,0,67,0,8,6,6,7,6,5,8,7,7

The Filesystem API of Tizen allows me to open this file and read its bytes - which is what I do. So I use the following code to read bytes, create a blob and upload it on my server:

var raw = fs.readBytes(1024);                    
var blob = new Blob([raw], {type:"image/jpeg"});
var formData = new FormData();
formData.append('screenCapture', blob);

$.ajax({
   type: 'post',
   url: myurl,
   processData: false,
   contentType: false,
   data: formData,
   success: function(data){
             ...

   },
   error: function(jqxhr, status, msg){
          console.log("ERROR! " + msg);
          }
});

Solution

  • I finally found what was wrong with my code.

    In fact, readBytes return an array of number corresponding to bytes, but the array isn't formatted as a byte array.

    Creating a new Uint8Array from this array did the trick:

    var raw = fs.readBytes(1024);
    var byteArray = new Uint8Array(raw);
    var blob = new Blob([byteArray], {type:"image/jpeg"});