Laravel 6 Upload Image Using Dropzone js

Tram Ho

Hello everyone, come to see me today, I will upload one more article to share. I hope that my share can help some friends who are inadvertently looking for a solution to the problem. you are having .. Today I want to share with everyone how to upload images in laravel, but a little bit special is that we will use Dropzonejs. Last time on the website, and especially the systems belonging to Japanese users, they enjoyed the experience of dragging and dropping images when they needed to eidt the data, rather than having to select each image file perhaps because this is a spread. The experience is quite smooth and handy, so many users prefer it. So today I want to join you in creating a small function for dragging and dropping images in laravel 6 (other versions are okay) to increase the user experience offline..Let’s Go.

  • Follow these few steps and upload image using dropzone in laravel:
  1. Install Laravel App
  2. Setup Database Credentials in .env
  3. Create Route
  4. Generate a Controller & Model
  5. Create a View File
  6. Start Development Server

Laravel Install

The first thing of course will be to install the laravel on our local, you copy your code below to use for convenience.

Setup Database Credentials in .env

You create a database first on phpmysql, and move to the .env file and config the necessary information.

Create Route

Next, go to routes / web.php and create 2 routes as shown below.

Generate a Controller & Model

Now we need to initialize more Model, Controller and migration to service the work

With this command, we created all 3 files to use, moved to the database / migrations … and placed the following code into the newly created images_table file.

Here, as I said at the beginning, I will share how to upload image files using Dropzonejs so I don’t focus on adding many other columns. If you want more information, please. Next, you run the command to create the table on the database.

Next you edit again in the ImageController file we just created.

Create Blade view

Next, create the view file to make the image upload. Go to app / resources / views and create a file called image.balde.php and add the code below.

You can slowly to learn more about the libraries, here I just ran the test should only pull the CDN link to use for convenience, if you use it for the real project, you should download and put in the project to avoid js file error during transmission when calling CDN and can work even when internet is not available.

Start Development Server

Finally, start the server and test the results.

You click on the frame and drag photos from local to test offline.


That’s it, I just bottle with you how to create and test image upload function in laravel with the use of dropzonejs. As I mentioned above, when you create a table, you can create other information fields according to the needs of the job and we just need to add the input boxes in the input form and reprocess it a bit in the Controller. Please. I wish you success and see you in the post later.

Share the news now

Source : Viblo