{"id":17834,"date":"2020-08-30T19:57:05","date_gmt":"2020-08-30T19:57:05","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17834"},"modified":"2022-04-28T09:15:14","modified_gmt":"2022-04-28T09:15:14","slug":"create-laravel-multiple-upload-images-and-displaying-on-view","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/create-laravel-multiple-upload-images-and-displaying-on-view\/","title":{"rendered":"Create Laravel multiple upload images and Displaying on view"},"content":{"rendered":"\n<p>Today , We will build a simple multiple images upload system using&nbsp;<strong>Laravel 5.8<\/strong>. We will use a&nbsp;<strong>jQuery<\/strong>&nbsp;plugin to populate image field and submit the multiple images to the server. The server checks all the inputs against defined&nbsp;<a href=\"https:\/\/laravel.com\/docs\/5.5\/validation\" target=\"_blank\" rel=\"noreferrer noopener\">validation<\/a>, and if any of the validation fails, it will redirect to our create page with error messages and displaying the data image on view.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1 : Configure the laravel<\/strong><\/h3>\n\n\n\n<p><em>first create project via composer<\/em><\/p>\n\n\n\ncomposer create-project &#8211;prefer-dist laravel\/laravel multipleUploads\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/1-3.png\" alt=\"\" class=\"wp-image-17837\"\/><\/figure>\n\n\n\n<p>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<\/p>\n\n\n\nphp artisan make:migration create_formMultipleUpload_table\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/2-1.png\" alt=\"\" class=\"wp-image-17838\"\/><\/figure>\n\n\n\n<p>next , define the schema as follow<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/3-1024x553.png\" alt=\"\" class=\"wp-image-17839\"\/><\/figure>\n\n\n\n<p id=\"9f33\">before migrate the schema , setup the .env file<\/p>\n\n\n\n<p id=\"3d39\">then, migrate the schema table to database<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/4-1024x553.png\" alt=\"\" class=\"wp-image-17840\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/5-1024x553.png\" alt=\"\" class=\"wp-image-17841\"\/><\/figure>\n\n\n\nphp artisan migrate\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/6.png\" alt=\"\" class=\"wp-image-17842\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 : Create Controller and Model<\/h3>\n\n\n\nphp artisan make:model FormMultipleUpload\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/7.png\" alt=\"\" class=\"wp-image-17843\"\/><\/figure>\n\n\n\n<p>When the migration and the model have been created successfully, go to&nbsp;<strong>app\/FormMultipleUpload.php&nbsp;<\/strong>and add the following code :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/8-1024x553.png\" alt=\"\" class=\"wp-image-17844\"\/><\/figure>\n\n\n\n<p>Next , define the controller , go to&nbsp;<strong>app\/Http\/Controllers\/FormController&nbsp;<\/strong>add the following code to it.<\/p>\n\n\n\nuse App\\FormMultipleUpload;\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/9-1024x553.png\" alt=\"\" class=\"wp-image-17845\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 3: Setup the routes in web.php file<\/strong><\/h4>\n\n\n\n<p>Go to the&nbsp;<strong>routes\/web.php<\/strong>&nbsp;file and add the following routes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/10-1024x553.png\" alt=\"\" class=\"wp-image-17846\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 4 : Create function in FormController<\/strong><\/h4>\n\n\n\n<p>In this case I combine the form input and display data in one view. i use the el<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capture-4-1024x553.png\" alt=\"\" class=\"wp-image-17854\"\/><\/figure>\n\n\n\n<p>then , this function to insert the image filename into database<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/13-1024x553.png\" alt=\"\" class=\"wp-image-17848\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Create View Form_upload.blade<\/strong><\/h3>\n\n\n\n<p>first , add the following link rel stylesheet in view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/14g.png\" alt=\"\" class=\"wp-image-17849\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/15.png\" alt=\"\" class=\"wp-image-17850\"\/><\/figure>\n\n\n\n<p>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&nbsp;<strong>jQuery<\/strong>&nbsp;for that feature.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/17.png\" alt=\"\" class=\"wp-image-17852\"\/><\/figure>\n\n\n\n<p id=\"116a\">To show errors in the form, we need to write the following code after&nbsp;<strong>container class<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/19-1.png\" alt=\"\" class=\"wp-image-17853\"\/><\/figure>\n\n\n\n<p>After adding the jQuery code and some HTML code to insert dynamic input fields, our file looks like this.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/dharmu9898\/090bef6ff481c4cdab65192561094e26.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capt1ure-1-1024x553.png\" alt=\"\" class=\"wp-image-17856\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Captu452re-1024x553.png\" alt=\"\" class=\"wp-image-17857\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6 : Display multiple image on View<\/h3>\n\n\n\n<p>To display data array [] in one row from db, we need to loop inside foreach with json_decode, like this following code .<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/454.png\" alt=\"\" class=\"wp-image-17858\"\/><\/figure>\n\n\n\n<p>this our full code on view form_upload.blade look like this.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/dharmu9898\/13792eedbd57ac8bc1e388d1e3fceadd.js\"><\/script>\n\n\n\n<p>Finally..!!, the result here .<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Captu45525re-1024x553.png\" alt=\"\" class=\"wp-image-17859\"\/><\/figure>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_39551\"><figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube epyt-figure\"><div class=\"wp-block-embed__wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_83717\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_39551\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Today , We will build a simple multiple images upload system using&nbsp;Laravel 5.8. We will use a&nbsp;jQuery&nbsp;plugin to populate image field and submit the multiple images to the server. The server checks all the inputs against defined&nbsp;validation, and if any of the validation fails, it will redirect to our create page with error messages and&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5201],"tags":[],"class_list":["post-17834","post","type-post","status-publish","format-standard","hentry","category-laravel"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17834"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17834\/revisions"}],"predecessor-version":[{"id":24561,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17834\/revisions\/24561"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}