Laravel Multiple Image Upload using Ajax

Question

I have been trying to upload multiple images in Laravel 4, using jQuery & Ajax without the page refreshing, with the progress bar, remove button and review (display the uploaded thumbnail where remove deletes it from the DB).

I have taken many approaches, (http://packalyst.com/packages/package/sukohi/surpass) (despite following every step, still doesn't work). Another approach I used (https://gist.github.com/filip-adriginal/bd397c5ec22a5916a966#file-gistfile1-txt) and tried the jQuery-File-Upload.

I am able to upload multiple images using (using foreach in the Controller):

 {{ Form::file('image[]', array('multiple'=>true)) }}

I have also looked at videos, tutorials and blogs, but they either had partial information or unsolved problems.

If anyone could give me some sample code, or point me in the right direction, that would be great! Thanks everyone for any help, really appreciate it.

First, you should get the images uploading w/o AJAX. Just my opinion especially starting out. — Rafael
– Rafael, Commented Feb 22, 2015 at 2:08
What is not working for you at the moment? when you define the file input name as array you should receive the files as an array on to the controller. run a for loop on Input::file['image']. — astroanu
– astroanu, Commented Feb 22, 2015 at 3:52
The upload is working great, I am able to upload multiple images to specific folders, but I have no idea how to use Ajax, with {{ Form::file('image[]', array('multiple'=>true)) }} I can also store their names and locations in the database, but when I looked at how to implement it with Ajax, it looks like I have to change all of my code. — Filip Nikolic
– Filip Nikolic, Commented Feb 22, 2015 at 9:58
Taylor otwell the man behind Laravel has always said if you're not comfortable with certain features of Laravel you can always change things here and there. I personally hate blade. It's a mess. You should try it with regular form html syntax and see if it works. — astroanu
– astroanu, Commented Feb 23, 2015 at 9:53
I actually got it to work up to a certain point with: code <script> var form = document.querySelector('#ajax'); var request = new XMLHttpRequest(); form.addEventListener('submit',function(e) { e.preventDefault(); var formdata = new FormData(form); request.open('post', 'submit'); request.send(formdata); }, false); </script> code Now I am getting a 405 MethodNotAllowedHttpException — Filip Nikolic
– Filip Nikolic, Commented Feb 23, 2015 at 20:37

Tim · Accepted Answer · 2015-06-11 10:51:49Z

1

try DropzoneJs. I think it is the best upload JS plugin

answered Jun 11, 2015 at 10:51

Tim

3802 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amr · Accepted Answer · 2015-06-14 08:49:35Z

1

Howto : AJAX multiple file upload in Laravel is a great tutorial using Dropzone.js, check it. Also take a look at this tutorial Laravel Ajax Multiple Image Upload and Preview which uses Dropzone.js as well.

edited Jun 14, 2015 at 8:49

answered Jun 14, 2015 at 8:41

Amr

5,1797 gold badges52 silver badges68 bronze badges

Collectives™ on Stack Overflow

Laravel Multiple Image Upload using Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related