Upload multiple images in laravel 5.7 tutorial

Upload multiple images in laravel 5_7 tutorial kodementor image upload

Most of the web applications use image uploads features whether they are a small or large application. In this article, we will create a form which accepts multiple images and saves it in our database.

We will resize our image so that all of the uploaded image same aspect ration. Moreover, we will create a thumbnail for each image which can be used to display in frontend which loads faster. We will use Laravel 5.7 and Intervention package for this.

Creating Project

We will install a fresh copy of laravel 5.7. At the time of writing this article, laravel 5.7 has not been released. We will install development version. Run the command:

The Composer.json file looks as below:
Laravel 5.7

Install Intervention/Image

we are going to use Intervention Image package for manipulating images. We will install it via composer. Run the command:

After installing Intervention Image, we need to add service providers and facade. Let’s open our config/app.php file and add following lines.

In the $providers array add the service providers for this package.

Add the facade of this package to the $aliases array.

And finally publish the configuration using following command:

Model and Migration

We will use a table named photos in database. Let’s create a model and migration at once. Run the command below:

Open our newly created migration file and add some columns for image. Our migration looks like below:

Now, we change our model so that we can insert some data. Add fillable type so that our model looks like below.

After these setup, migrate our table.

Route Setup

After migrating our table, let’s setup our route to access our form. Add below route in your web.php file.

Create Blade

We will create a blade file which include a form input of type file. We will extends laravel’s default template.

Create Controller

Now, it’s time to do some logic in controller. Let’s create a new controller called PhotoController.

It’s time to modify our controller by adding some methods. We will add first method called index to see our frontend. Add the following code in PhotoController.

If we navigate to the route /photo, we will see as the following.
Upload multiple images in laravel 5.7 tutorial kodementor

We need to add another method for handling our form request. We named it uploadImage. I have added some code inside it and commented each line to make it readable. Thus, our final controller file looks like below:

Testing

We have successfully integrated multiple image upload in our system. Now, let’s test it if it works. First of all, navigate to the route /photo. We will see a form with image upload input.

Below is a screenshot of validation error for image type and size.
kodementor image error validation We can upload multiple multiple files and see them listed below the input form as the screenshot below:
Upload multiple images in laravel 5_7 tutorial kodementor image upload

Conclusion

That is all for uploading multiple images in our system. We have used a popular package called intervention/image to upload to the server. If you have any issue implementing the above code, feel free to drop a comment. Feedbacks are highly appreciated.