Laravel 5.5 - multiple images uploading using dropzone js

If you are planing to implement drag and drop multiple images upload using ajax in your laravel 5.5 application then you a right place. Here i will let you know how to upload multiple images upload using ajax.

If you think drag and drop images upload with ajax and it is easy then you are wrong. It is not easy to make drag and drop image upload. But if you are doing it using dropzone js then it's very easy.

Dropzone JS is a lightweight open source js library that provides drag and drop file uploads with image previews. Dropzone JS though we can easily implement by using js. So here i will show you simple example very quickly. So just follow bellow points and you will get layout like as bellow screenshot.

Layout

Create Routes:

In first point, i will tell you to add two route one for get verb and another for post verb. Get will be display form and POST will be upload image.

routes/web.php


Route::get('dropzoneFileUpload','HomeController@dropzoneFileUpload') ;
Route::post('dropzoneFileUpload',array('as'=>'dropzone.fileupload','uses'=>'HomeController@dropzoneFileUploadPost')) ;

Create Controller Method:

Here, we require to add two controller method, dropzoneFileUpload() and dropzoneFileUploadPost() in your controller.

One thing is important is here write code of image upload and it store in "images" folder, so create images folder in your public directory.

So you can add those method in your any controller. So here i added it in HomeController.

app/Http/Controllers/HomeController.php


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{

    public function dropzoneFileUpload(){
        return view('dropzoneFileUpload');
    }

    public function dropzoneFileUploadPost(Request $request){
        
        $imageName = time().'.'.$request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'), $imageName);
        return response()->json(['success'=>$imageName]);
    }

}

Create View File:

In last step we have to simply create new blade file and write code of form layout and js code of dropsone js. So let's create it.

resources/views/dropzoneFileUpload.blade.php


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 5.5 - multiple images uploading using dropzone js</title>
    <link href="http://demo.expertphp.in/css/dropzone.css" rel="stylesheet">
    <script src="http://demo.expertphp.in/js/dropzone.js"></script>
</head>
<body>

<h3>Laravel 5.5 - multiple images uploading using dropzone js</h3>

{!! Form::open([ 'route' => [ 'dropzone.fileupload' ], 'files' => true, 'class' => 'dropzone','id'=>"image-upload"]) !!}
{!! Form::close() !!}

</body>
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize  : 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>
</html>

Laravel 5.5 - multiple images uploading using dropzone js

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles