Laravel PHP : Upload image with validation using jquery ajax form plugin

Leave a Comment / php / By

Laravel PHP : Upload image with validation using jquery ajax form plugin

In this post we will give you information about Laravel PHP : Upload image with validation using jquery ajax form plugin. Hear we will give you detail about Laravel PHP : Upload image with validation using jquery ajax form pluginAnd how to use it also give you demo for it if it is necessary.

In this post, I will let you know how to upload image file on server using jquery form plugin in Laravel PHP Framework.

In our last post, I have explained How to upload image with validation in Laravel.

Uploading image using jquery is in demand in most applications where you need to change your profile image.

This will be helpful because uploading image file using ajax won’t reload the entire webpage.

Laravel provide different type of validation rules for image file, you can set the max file size, their mime type etc.

In this example, We will use ajax to upload image without page refresh and get preview of uploaded image.


Step 1 : Add routes

In this first step, Add following routes in your routes/web.php for ajax upload image.

  1. Route::get('get-image','ImageController@getImage');
  2. Route::post('ajax-upload-image',['as'=>'ajax.upload-image','uses'=>'ImageController@ajaxUploadImage']);
Route::get('get-image','ImageController@getImage');
Route::post('ajax-upload-image', ['as'=>'ajax.upload-image','uses'=>'ImageController@ajaxUploadImage']);


Step 2 : Create ImageController

In this step, we will create ImageController in following path app/Http/Controllers/ImageController.


app/Http/Controllers/ImageController.php 

  1. <?php
  3. namespace AppHttpControllers;
  5. use IlluminateHttpRequest;
  7. class ImageController extends Controller
  8. {
  9.     public functiongetImage(){
  10.         returnview('ajaxUploadImage');
  11.     }
  13.     public functionajaxUploadImage(Request $request){
  14.         $this->validate($request,[
  15.             'image'=>'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  16.           ]);
  18. $image=time().'.'.$request->image->getClientOriginalExtension();
  19. $request->image->move(public_path('images'),$image);
  20. $url='images/'.$image;
  21. returnresponse()->json(['url'=>$url]);
  23.     }
  25. }
<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class ImageController extends Controller
{
  public function getImage(){
    return view('ajaxUploadImage');
  }

  public function ajaxUploadImage(Request $request){
    $this->validate($request, [
          'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $image = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $image);
        $url='images/'.$image;
        return response()->json(['url'=>$url]);

  }

}


Step 3 : Create View “ajaxUploadImage.blade.php” File

In this step, we will manage layouts and design form to upload files to send to the server.

To have jQuery form plugin we will include following library :

  • bootstrap.min.css

  • jquery.min.js

  • jquery.form.min.js

resources/views/ajaxUploadImage.blade.php 

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4.     <title>Laravel 5 - Ajax upload image to server without refresh the page with preview</title>
  5.     <linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.     <scriptsrc="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  7.     <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js"></script>
  8. </head>
  9. <body>
  11. <divclass="container">
  12. <h1>Laravel 5 - jQuery ajax upload image with example</h1>
  14.   {!! Form::open(['route'=>'ajax.upload-image','files'=>'true']) !!}
  15.       <divclass="alert alert-danger error-msg"style="display:none">
  16. <ul></ul>
  17. </div>
  19. <divclass="preview-uploaded-image">
  20. </div>
  22.       <divclass="form-group">
  23. <label>Image:</label>
  24. <inputtype="file"name="image"class="form-control">
  25. </div>
  27. <divclass="form-group">
  28. <buttonclass="btn btn-primary upload-image"type="submit">Upload Image</button>
  29. </div>
  30.   {!! Form::close() !!}
  32. </div>
  34. <scripttype="text/javascript">
  35.   $("body").on("click",".upload-image",function(e){
  36.     $(this).parents("form").ajaxForm({ 
  37.       complete: function(response) 
  38.       {
  39.         if($.isEmptyObject(response.responseJSON.image)){
  40.           $('.preview-uploaded-image').html('<imgsrc="'+response.responseJSON.url+'">');
  41.         }else{
  42.           var msg=response.responseJSON.image;
  43.           $(".error-msg").find("ul").html('');
  44.           $(".error-msg").css('display','block');
  45.           $.each( msg, function( key, value ) {
  46.             $(".error-msg").find("ul").append('<li>'+value+'</li>');
  47.           });
  48.         }
  49.       }
  50.     });
  51.   });
  53. </script>
  55. </body>
  56. </html>
<!DOCTYPE html>
<html>
<head>
  <title>Laravel 5 - Ajax upload image to server without refresh the page with preview</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js"></script>
</head>
<body>

<div >
  <h1>Laravel 5 - jQuery ajax upload image with example</h1>

  {!! Form::open(['route'=>'ajax.upload-image','files'=>'true']) !!}
    <div  style="display:none">
        <ul></ul>
    </div>

    <div >
    </div>

    <div >
      <label>Image:</label>
      <input type="file" name="image" >
    </div>

    <div >
      <button  type="submit">Upload Image</button>
    </div>
  {!! Form::close() !!}

</div>

<script type="text/javascript">
  $("body").on("click",".upload-image",function(e){
    $(this).parents("form").ajaxForm({ 
      complete: function(response) 
      {
        if($.isEmptyObject(response.responseJSON.image)){
          $('.preview-uploaded-image').html('<img src="'+response.responseJSON.url+'">');
        }else{
          var msg=response.responseJSON.image;
          $(".error-msg").find("ul").html('');
          $(".error-msg").css('display','block');
          $.each( msg, function( key, value ) {
            $(".error-msg").find("ul").append('<li>'+value+'</li>');
          });
        }
      }
    });
  });

</script>

</body>
</html>
Show Demo

Label :

PHP

OOP

Laravel PHP Framework

File

jQuery

How To

Web Development

JavaScript

Hope this code and post will helped you for implement Laravel PHP : Upload image with validation using jquery ajax form plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  54  =  63

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US