Create Laravel multiple upload images and Displaying on view

Today , We will build a simple multiple images upload system using Laravel 5.8. We will use a jQuery plugin to populate image field and submit the multiple images to the server. The server checks all the inputs against defined validation, and if any of the validation fails, it will redirect to our create page with error messages and displaying the data image on view.

Step 1 : Configure the laravel

first create project via composer

composer create-project –prefer-dist laravel/laravel multipleUploads

then, we need to create a migration file to store the image name , go to cmd make sure on directory project and hit the following command

php artisan make:migration create_formMultipleUpload_table

next , define the schema as follow

before migrate the schema , setup the .env file

then, migrate the schema table to database

php artisan migrate

Step 2 : Create Controller and Model

php artisan make:model FormMultipleUpload

When the migration and the model have been created successfully, go to app/FormMultipleUpload.php and add the following code :

Next , define the controller , go to app/Http/Controllers/FormController add the following code to it.

use App\FormMultipleUpload;

Step 3: Setup the routes in web.php file

Go to the routes/web.php file and add the following routes.

Step 4 : Create function in FormController

In this case I combine the form input and display data in one view. i use the el

then , this function to insert the image filename into database

Step 5: Create View Form_upload.blade

first , add the following link rel stylesheet in view.

Here, I have taken a straightforward form to add the images. We need a functionality when populate the input field with click on add button. We have used jQuery for that feature.

To show errors in the form, we need to write the following code after container class

After adding the jQuery code and some HTML code to insert dynamic input fields, our file looks like this.

Step 6 : Display multiple image on View

To display data array [] in one row from db, we need to loop inside foreach with json_decode, like this following code .

this our full code on view form_upload.blade look like this.

Finally..!!, the result here .

Rajesh Kumar
Follow me