#laraveldropzoneexample

[codesolutionsstuff]

Laravel 9 Dropzone Image Upload Example Step By Step

The most well-known, free, and open-source library for drag-and-drop file uploads with image previews is Dropzone. I'll be using Laravel 9 in this example.

Laravel Dropzone Image Upload

- To begin, use dropzone to upload several photos. - Adding photos to the database with alternative file names. - Removing photos from the preview box of the dropzone.

Step 1: Download Laravel Project

Type the following command to create a Laravel project. composer create-project --prefer-dist laravel/laravel dropzonefileupload

Step 2: Set up a MySQL database

//.env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=*********** DB_USERNAME=root DB_PASSWORD=

Step 3: Compose a model and migration file

In your cmd, type the following command. php artisan make:model ImageUpload -m There will be two files created. - ImageUpload.php model. - create_image_uploads_table migration file. For the image upload table, we'll need to develop a Schema. Go to Laravel >> database >> migrations >> create_image_uploads_table to get started. //create_image_uploads_table public function up() { Schema::create('image_uploads', function (Blueprint $table) { $table->increments('id'); $table->text('filename'); $table->timestamps(); }); }

Step 4: Create a view file

Create an imageupload.blade.php file in resources >> views >> imageupload.php. Put the code below in there. We'll add a dropzone for file uploading in this file. Laravel Multiple Images Upload Using Dropzone Laravel Multiple Images Upload Using Dropzone @csrf First, we'll include our bootstrap.min.css and dropzone.min.css files in this file. After that, we'll include jquery.js and dropzone.js. After that, we'll make a form and add the dropzone class to it. In addition, we have some text in our upload box. Also, if the image is successfully uploaded, it will display a tick otherwise it displays a cross and error.

Step 5: Configure Dropzone

Now we'll write all of the Dropzone setups. So, in a view file, add the following code. Laravel Multiple Images Upload Using Dropzone Laravel Multiple Images Upload Using Dropzone @csrf We're adding Dropzone setup options to the file above. Any of the setting options are documented in the Dropzone Documentation Let's take a look at each choice one by one. - maxFilesize is set to 12 by default. Dropzone will only accept photos that are smaller than 12MB in size. You can make it smaller or larger depending on your needs. - Before the file is uploaded to the server, the renameFile function is called, which renames the file. - acceptedFiles compares the mime type or extension of the file to this list. The terms.jpeg,.jpg,.png, and.gif are defined. You have the option to alter according on your requirements. - The value of addRemoveLinks is set to true. Dropzone will show the Remove button, which we may use to delete the file we just uploaded. - The timeout is set to 5000 seconds.

Step 6: Create one controller and route 

php artisan make:controller ImageUploadController ImageUploadController.php will be created, and we'll register routes in the routes >> web.php file. So let's get started. //web.php Route::get('image/upload','ImageUploadController@fileCreate'); Route::post('image/upload/store','ImageUploadController@fileStore'); Route::post('image/delete','ImageUploadController@fileDestroy'); The next step is to add some code to the fileCreate() function in the ImageUploadController.php file. // ImageUploadController.php public function fileCreate() { return view('imageupload'); } We are simply returning the imageupload that we have made in the create() method.

Step 7: Save File into Database

To store the filename in the database, we must code the fileStore() procedure in sequence. // ImageUploadController.php use AppImageUpload; public function fileStore(Request $request) { $image = $request->file('file'); $imageName = $image->getClientOriginalName(); $image->move(public_path('images'),$imageName); $imageUpload = new ImageUpload(); $imageUpload->filename = $imageName; $imageUpload->save(); return response()->json(); }

Step 8: Remove File From Database

The removedFile() function has now been added to the dropzone configuration. Laravel Multiple Images Upload Using Dropzone Laravel Multiple Images Upload Using Dropzone @csrf To delete a file from the database, add the fileDestroy() function. In FileUploadController, add the following code. //ImageUploadController.php Read the full article