User selects img with file. I then dynamically create a form with data img from that selected file. and place it as source for tag. Later when user presses submit I create a FormData object. And get a blob from DataUri.

This is the code for finding the right img,it can have more then one.

var images = [];

$('#imgDiv'+id+' img').each(function(index, img){
      images[index] = dataURItoBlob(img.src);
});

And the dataURItoBlob function

function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/*'});
    }

Then I append the img to formData.

formData.append('images[]',images);

and do this

var req = new XMLHttpRequest();
req.open('post','/ads/add');
req.send(formData);

And php side. Using laravel I tried this

$images = Input::file('images[]');

Returns null for me. Same for

$images = Input::file('images');

When i try this

$images = Input::get('images');

it returns as json response ["[object Blob]"] or as a dd() it returns

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  0 <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'[object Blob]'</font> <i>(length=13)</i>
</pre>

How could i then save it in for example /uploads/images/1

User selects img with file. I then dynamically create a form with data img from that selected file. and place it as source for tag. Later when user presses submit I create a FormData object. And get a blob from DataUri.

This is the code for finding the right img,it can have more then one.

var images = [];

$('#imgDiv'+id+' img').each(function(index, img){
      images[index] = dataURItoBlob(img.src);
});

And the dataURItoBlob function

function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/*'});
    }

Then I append the img to formData.

formData.append('images[]',images);

and do this

var req = new XMLHttpRequest();
req.open('post','/ads/add');
req.send(formData);

And php side. Using laravel I tried this

$images = Input::file('images[]');

Returns null for me. Same for

$images = Input::file('images');

When i try this

$images = Input::get('images');

it returns as json response ["[object Blob]"] or as a dd() it returns

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  0 <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'[object Blob]'</font> <i>(length=13)</i>
</pre>

How could i then save it in for example /uploads/images/1

• javascript
• php
• jquery
• laravel
• laravel-5

• Check the request details Network tab in your browser to see exactly what payload is being send to the server, to make sure you're sending what you expect from JS. – Bogdan Commented Feb 10, 2015 at 16:27

2 Answers 2

Is it necessary to convert data url to blob ?

if not you can upload the image by just sending data uri (base64) of image in ajax request and decode it at php side

for reference : http://www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html

I got same trouble like you. I solved it.

you were try to transfer with an Array and a formData. like this

formData.append('images[]',[object1, object2, objec3, ...]);

However, it was wrong. if we want to transfer lots of files, we should code like this.

$('#imgDiv'+id+' img').each(function(index, img){
      images[index] = img.src;
});

and

for(i=0; i<images.length; i++){    
  var blob = dataURLtoBlob(images[index]);
  formData.append("images[]", blob); // we must use "append" many time.
}