Last active
September 23, 2024 00:20
-
-
Save zahidhasanemon/afbbf65918703f0e897db518dd77f2ce to your computer and use it in GitHub Desktop.
Multiple file upload asynchronously using Laravel and Dropzone JS. Works perfectly with multiple files dragged and dropped or selected at a time. Images are uploaded via ajax request.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //add image to the storage disk. | |
| public function uploadImageViaAjax(Request $request) | |
| { | |
| $name = []; | |
| $original_name = []; | |
| foreach ($request->file('file') as $key => $value) { | |
| $image = uniqid() . time() . '.' . $value->getClientOriginalExtension(); | |
| $destinationPath = public_path().'/images/'; | |
| $value->move($destinationPath, $image); | |
| $name[] = $image; | |
| $original_name[] = $value->getClientOriginalName(); | |
| } | |
| return response()->json([ | |
| 'name' => $name, | |
| 'original_name' => $original_name | |
| ]); | |
| } | |
| //add form data to database | |
| public function store(Request $request) | |
| { | |
| $messages = array( | |
| 'images.required' => 'Image is Required.' | |
| ); | |
| $this->validate($request, array( | |
| 'images' => 'required|array|min:1', | |
| ),$messages); | |
| foreach ($request->images as $image) { | |
| Image::create([ | |
| 'name' => $image, | |
| 'created_by' => Auth::id() | |
| ]); | |
| } | |
| return redirect() | |
| ->route('home') | |
| ->with('success', 'Images Added Successfully'); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //dropzone css | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" /> | |
| //form | |
| <form class="" method="POST" action="{{ route('image.store') }}" enctype="multipart/form-data"> | |
| @csrf | |
| <div class="form-row"> | |
| <div class="col-md-12"> | |
| <div class="position-relative form-group"> | |
| <label for="details" class="">Images</label> | |
| <div class="needsclick dropzone" id="document-dropzone"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-2 btn btn-primary">Submit</button> | |
| </form> | |
| //script | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script> | |
| <script> | |
| let uploadedDocumentMap = {}; | |
| Dropzone.autoDiscover = false; | |
| let myDropzone = new Dropzone("div#document-dropzone",{ | |
| url: '{{ route('uploadImageViaAjax') }}', | |
| autoProcessQueue: true, | |
| uploadMultiple: true, | |
| addRemoveLinks: true, | |
| parallelUploads: 10, | |
| headers: { | |
| 'X-CSRF-TOKEN': "{{ csrf_token() }}" | |
| }, | |
| successmultiple: function(data, response) { | |
| $.each(response['name'], function (key, val) { | |
| $('form').append('<input type="hidden" name="images[]" value="' + val + '">'); | |
| uploadedDocumentMap[data[key].name] = val; | |
| }); | |
| }, | |
| removedfile: function (file) { | |
| file.previewElement.remove() | |
| let name = ''; | |
| if (typeof file.file_name !== 'undefined') { | |
| name = file.file_name; | |
| } else { | |
| name = uploadedDocumentMap[file.name]; | |
| } | |
| $('form').find('input[name="images[]"][value="' + name + '"]').remove() | |
| } | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Route::post('upload-image-via-ajax', 'Controller@uploadImageViaAjax')->name('uploadImageViaAjax'); | |
| Route::post('store-image', 'Controller@store')->name('image.store'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Merciii