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 .
- DevOps Certified Professionals (DCP)
- Site Reliability Engineering Certified Professionals (SRECP)
- Master in DevOps Engineering (MDE)
- DevSecOps Certified Professionals (DSOCP)
URL - https://www.devopsschool.com/certification/
My Linkedin - https://www.linkedin.com/in/rajeshkumarin
- Installing Jupyter: Get up and running on your computer - November 2, 2024
- An Introduction of SymOps by SymOps.com - October 30, 2024
- Introduction to System Operations (SymOps) - October 30, 2024
