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
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 .
I’m a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I have worked at Cotocus. I share tech blog at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at TrueReviewNow , and SEO strategies at Wizbrand.
Do you want to learn Quantum Computing?
Please find my social handles as below;
Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at WIZBRAND
Find Trusted Cardiac Hospitals
Compare heart hospitals by city and services — all in one place.
Explore Hospitals