{"id":1912,"date":"2021-07-19T22:46:59","date_gmt":"2021-07-19T19:46:59","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1912"},"modified":"2021-07-19T22:48:01","modified_gmt":"2021-07-19T19:48:01","slug":"upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/","title":{"rendered":"Upload Multiple Files\/Images with Drag and Drop Using DropzoneJS in Laravel"},"content":{"rendered":"\n

User experience is given great importance in web applications today. Filling out forms is a boring activity for users. That’s why it’s the application developer’s job to make it easy to fill out forms. In this post, I will explain how users can easily upload multiple files and images in applications developed with Laravel<\/strong>.<\/p>\n\n\n\n

In the example I will explain below, I will use the javascript dropzoneJS<\/strong> library. DropzoneJS<\/strong> library is a simple, lightweight and useful library with a progress bar.<\/p>\n\n\n\n

1.) Installation Laravel Project<\/h3>\n\n\n\n

If you have composer <\/strong>installed on your computer, you can create your laravel<\/strong> project by running the following line of code in the terminal.<\/p>\n\n\n\n

composer create-project --prefer-dist laravel\/laravel dropzone-laravel-project<\/code><\/pre>\n\n\n\n
2.) MySQL <\/strong>Database Settings<\/h3>\n\n\n\n
We define our Mysql<\/strong> database settings in the .env<\/strong> file of the Laravel project.<\/p>\n\n\n\n
DB_CONNECTION=mysql \nDB_HOST=127.0.0.1  \nDB_PORT=3306  \nDB_DATABASE=myLaravelDb \nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\n
3.) Creating Model and Table in the Database<\/h3>\n\n\n\n
First, we create our model named ImageGallery <\/strong>and the migration file<\/strong> by running the following line of code.<\/p>\n\n\n\n
php artisan make:model ImageGallery -m<\/code><\/pre>\n\n\n\n
We have created a file named 2021_07_19_144128_create_image_galleries_table.php<\/strong>. By opening this file, we define the columns we will create in the database.<\/p>\n\n\n\n
class CreateImageGalleriesTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('image_galleries', function (Blueprint $table) {\n            $table->id();\n            $table->string('original_filename');\n            $table->string('filename_path');\n            $table->timestamps();\n        });\n    }\n\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('image_galleries');\n    }\n}<\/pre><\/div>\n\n\n\n
After editing the file, we migrate it.<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
4.) Defining Routes<\/h3>\n\n\n\n
We define our routes in the routes\\web.php<\/strong> file. The first route is the interface that the user will encounter. In the second route, we define the url where we will post our file, and in the third route, we define the url that will work when the user immediately deletes the uploaded file.<\/p>\n\n\n\n
\/\/ ============== DropZone Example ==================\nRoute::get('\/dropzone-ui', [ UploadController::class, 'dropzoneUI' ])->name('front.dropzone-ui');\nRoute::post('\/upload', [ UploadController::class, 'uploadDropzoneFile' ])->name('front.upload');\nRoute::post('\/file-destroy', [ UploadController::class, 'destroyFile' ])->name('front.file-destroy');<\/pre><\/div>\n\n\n\n
5.) Create Blade View File<\/h3>\n\n\n\n
We are creating our view file named dropzone-upload.blade.php<\/strong> as seen in the picture below.<\/p>\n\n\n\n
\"\"
Klas\u00f6r yap\u0131s\u0131<\/figcaption><\/figure><\/div>\n\n\n\n
We add bootstrap, jquery<\/strong> and dropzone<\/strong> javascript libraries to the blade file.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <link rel="stylesheet" href="{{asset('assets\/css\/bootstrap.css')}}">\n  \t<link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.7.2\/min\/dropzone.min.css">\n<\/head>\n<body>\n\n<div class="container">\n    <h2>Dropzone Example<\/h2>\n    <div class="row justify-content-md-center">\n        <div class="col-12">\n            <div class="dropzone" id="file-dropzone"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script src="{{ asset('assets\/js\/jquery.js')}}"><\/script>\n<script src="{{ asset('assets\/js\/bootstrap.js')}}"><\/script>\n<script src="{{ asset('assets\/js\/bootstrap.bundle.js')}}"><\/script>\n<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.7.2\/min\/dropzone.min.js"><\/script>\n<script>\n    Dropzone.options.fileDropzone = {\n      url: '{{ route('front.upload') }}',\n      acceptedFiles: ".jpeg,.jpg,.png,.gif",\n      addRemoveLinks: true,\n      maxFilesize: 8,\n      headers: {\n      'X-CSRF-TOKEN': "{{ csrf_token() }}"\n      },\n      removedfile: function(file)\n      {\n        var name = file.upload.filename;\n        $.ajax({\n          type: 'POST',\n          url: '{{ route('front.file-destroy') }}',\n          data: { "_token": "{{ csrf_token() }}", name: name},\n          success: function (data){\n              console.log("File has been successfully removed!!");\n          },\n          error: function(e) {\n              console.log(e);\n          }});\n          var fileRef;\n          return (fileRef = file.previewElement) != null ?\n          fileRef.parentNode.removeChild(file.previewElement) : void 0;\n      },\n      success: function (file, response) {\n        console.log(file);\n      },\n    }\n  <\/script>\n\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
6-) Creating Controller <\/h3>\n\n\n\n
We create the controller by running the following line of code.<\/p>\n\n\n\n
php artisan make:controller UploadController<\/code><\/pre>\n\n\n\n
We write our methods in app\\Http\\Controllers\\UploadController.php <\/strong>file.<\/strong><\/p>\n\n\n\n
namespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\nuse App\\Models\\ImageGallery;\n\nclass UploadController extends Controller\n{\n    private $photos_path;\n\n    public function __construct()\n    {\n        $this->photos_path = public_path('\/uploads');\n    }\n\n    \/** \n * Generate Upload View \n * \n * @return void \n\n *\/  \n\n  public  function dropzoneUI()  \n  {  \n      return view('front.dropzone-upload');  \n  }  \n\n\/** \n * File Upload Method \n * \n * @return void \n *\/  \n\n  public  function uploadDropzoneFile(Request $request)  \n  {  \n\n    if (!is_dir($this->photos_path)) {\n        mkdir($this->photos_path, 0777);\n    }\n\n    if ($request->file('file')) {\n        $file = $request->file('file');\n        $fileName = $file->getClientOriginalName();\n        $filePath = time().'.'.$file->getClientOriginalName();\n        $file->move(public_path('uploads'), $filePath);\n      }\n\n        $imageUpload = new ImageGallery;\n        $imageUpload->original_filename =  $fileName;\n        $imageUpload->filename_path = $filePath;\n        $imageUpload->save();\n    return response()->json(['success'=>$fileName]);  \n  }\n\n  public function destroyFile(Request $request)\n  {\n      $filename =  $request->get('name');\n      ImageGallery::where('original_filename',$filename)->delete();\n      $path = public_path('uploads\/').$filename;\n      if (file_exists($path)) {\n          unlink($path);\n      }\n      return response()->json(['success'=>$filename]);\n  } \n}<\/pre><\/div>\n\n\n\n
When we run our project, we can upload our files to the server by dragging and dropping the pictures as below.<\/p>\n\n\n\n
\"\"
User interface<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Database view<\/figcaption><\/figure><\/div>\n\n\n\n
Good Luck…<\/p>\n","protected":false},"excerpt":{"rendered":"
User experience is given great importance in web applications today. Filling out forms is a boring activity for users. That’s why it’s the application developer’s job to make it easy to fill out forms. In this post, I will explain how users can easily upload multiple files and images in applications developed with Laravel. In […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[50,2],"tags":[],"yoast_head":"\nUpload Multiple Files\/Images with Drag and Drop Using DropzoneJS in Laravel - blog website<\/title>\n<meta name=\"description\" content=\"User experience is given great importance in web applications today. Filling out forms is a boring activity for users. That's why it's the application developer's job to make it easy to fill out forms. In this post, I will explain how users can easily upload multiple files and images in applications developed with Laravel.In the example I will explain below, I will use the javascript dropzoneJS library. DropzoneJS library is a simple, lightweight and useful library with a progress bar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Multiple Files\/Images with Drag and Drop Using DropzoneJS in Laravel - blog website\" \/>\n<meta property=\"og:description\" content=\"User experience is given great importance in web applications today. Filling out forms is a boring activity for users. That's why it's the application developer's job to make it easy to fill out forms. In this post, I will explain how users can easily upload multiple files and images in applications developed with Laravel.In the example I will explain below, I will use the javascript dropzoneJS library. DropzoneJS library is a simple, lightweight and useful library with a progress bar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-19T19:46:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T19:48:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\",\"width\":937,\"height\":208},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/\",\"name\":\"Upload Multiple Files\/Images with Drag and Drop Using DropzoneJS in Laravel - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/#primaryimage\"},\"datePublished\":\"2021-07-19T19:46:59+00:00\",\"dateModified\":\"2021-07-19T19:48:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"User experience is given great importance in web applications today. Filling out forms is a boring activity for users. That's why it's the application developer's job to make it easy to fill out forms. In this post, I will explain how users can easily upload multiple files and images in applications developed with Laravel.In the example I will explain below, I will use the javascript dropzoneJS library. DropzoneJS library is a simple, lightweight and useful library with a progress bar.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/07\/19\/upload-multiple-files-images-with-drag-and-drop-using-dropzonejs-in-laravel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Multiple Files\/Images with Drag and Drop Using DropzoneJS in Laravel\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1912"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=1912"}],"version-history":[{"count":48,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1912\/revisions\/1975"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}