This post will tell you How to upload Image without button or form tag in Laravel. Usually, we upload the image by form submit button but sometimes we have to use or upload an image without the submit button or form tag in case of requirements. Here we have discussed one of the topics based on ajax which is how to upload files or images without using Form Submit with Ajax request without page refresh. In addition, we will cover image preview, validation depends on image types, store or saves in database. So let’s dig in.

Upload Image without Submit Button or Form tag in Laravel

Laravel Image upload without button

In web.php

Route::get('/','EmpController@viewImage');
Route::post('/ajaxuploadimg','EmpController@imguploadpost');

1 2	Route::get('/','EmpController@viewImage'); Route::post('/ajaxuploadimg','EmpController@imguploadpost');

In mainproject/app/Http/Controllers/EmpController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use File;
use DB;


class EmpController extends Controller
{
    //

    public function viewImage(){

    	$emp_data=DB::select('select * from emp_history');

    	return view('welcome',compact('emp_data'));
    }

    public function imguploadpost(Request $request){
    	if($request->ajax()){
    		$data = $request->file('file');
           $extension = $data->getClientOriginalExtension();
           $filename = 'usermina'.'_profilepic'.'.'.$extension; // renameing image
           $path =public_path('../emp_profile/');


           $usersImage = public_path("../emp_profile/{$filename}"); // get previous image from folder

if (File::exists($usersImage)) { // unlink or remove previous image from folder
               unlink($usersImage);

               DB::table('emp_history')->where('emp_id','199')->update(['emp_img' =>$filename]);
           }else{
//                dd('File is not exists.');
               $pp='nofileexist';

               DB::table('emp_history')->insert(['emp_id' => '199', 'emp_img' => $filename]);
           }

           $upload_success = $data->move($path, $filename);

           return response()->json([
               'success' => 'done',
               'valueimg'=>$data
           ]);




    	}
    }

   


}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use File;

use DB;

class EmpController extends Controller

{

public function viewImage(){

$emp_data=DB::select('select * from emp_history');

return view('welcome',compact('emp_data'));

}

public function imguploadpost(Request $request){

if($request->ajax()){

$data = $request->file('file');

$extension = $data->getClientOriginalExtension();

$filename = 'usermina'.'_profilepic'.'.'.$extension; // renameing image

$path =public_path('../emp_profile/');

$usersImage = public_path("../emp_profile/{$filename}"); // get previous image from folder

if (File::exists($usersImage)) { // unlink or remove previous image from folder

unlink($usersImage);

DB::table('emp_history')->where('emp_id','199')->update(['emp_img' =>$filename]);

}else{

// dd('File is not exists.');

$pp='nofileexist';

DB::table('emp_history')->insert(['emp_id' => '199', 'emp_img' => $filename]);

}

$upload_success = $data->move($path, $filename);

return response()->json([

'success' => 'done',

'valueimg'=>$data

]);

}

In mainproject/resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
  <title></title>

  <meta name="csrf_token" content="{{csrf_token()}}">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  
</head>
<body>
  <center>
    
  
<div class="row">

  @if(empty($emp_data[0]->emp_img))
  <img id="img_prv" style="max-width: 150px;max-height: 150px" class="img-thumbnail" src="{{url('../emp_profile/user.jpg')}}">

  @else
  <img id="img_prv" style="max-width: 150px;max-height: 150px" class="img-thumbnail" src="{{url('../emp_profile/'.$emp_data[0]->emp_img)}}">
  @endif
  
</div>
<div class="row">
  <label>Image upload</label>
  <input type="file" name="file_img" id="img_file_upid">

  <span id="mgs_ta">
    
  </span>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script type="text/javascript">
  $('#img_file_upid').on('change',function(ev){
    console.log("here inside");

    var filedata=this.files[0];
    var imgtype=filedata.type;


    var match=['image/jpeg','image/jpg'];

    if(!(imgtype==match[0])||(imgtype==match[1])){
        $('#mgs_ta').html('<p style="color:red">Plz select a valid type image..only jpg jpeg allowed</p>');

    }else{

      $('#mgs_ta').empty();
    

    //---image preview

    var reader=new FileReader();

    reader.onload=function(ev){
      $('#img_prv').attr('src',ev.target.result).css('width','150px').css('height','150px');
    }
    reader.readAsDataURL(this.files[0]);

    /// preview end

        //upload

        var postData=new FormData();
        postData.append('file',this.files[0]);

        var url="{{url('ajaxuploadimg')}}";

        $.ajax({
        headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},
        async:true,
        type:"post",
        contentType:false,
        url:url,
        data:postData,
        processData:false,
        success:function(){
          console.log("success");
        }


        });

    }

  });

</script>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

@if(empty($emp_data[0]->emp_img))

@else

@endif

</div>

<label>Image upload</label>

</span>

</div>

</center>

$('#img_file_upid').on('change',function(ev){

console.log("here inside");

var filedata=this.files[0];

var imgtype=filedata.type;

var match=['image/jpeg','image/jpg'];

if(!(imgtype==match[0])||(imgtype==match[1])){

$('#mgs_ta').html('<p style="color:red">Plz select a valid type image..only jpg jpeg allowed</p>');

}else{

$('#mgs_ta').empty();

//---image preview

var reader=new FileReader();

reader.onload=function(ev){

$('#img_prv').attr('src',ev.target.result).css('width','150px').css('height','150px');

}

reader.readAsDataURL(this.files[0]);

/// preview end

//upload

var postData=new FormData();

postData.append('file',this.files[0]);

var url="{{url('ajaxuploadimg')}}";

$.ajax({

headers:{'X-CSRF-Token':$('meta[name=csrf_token]').attr('content')},

async:true,

type:"post",

contentType:false,

url:url,

data:postData,

processData:false,

success:function(){

console.log("success");

}

});

}

});

</script>

</body>

</html>

Note:

This
new FileReader() =Here new FileReade() is creating new file reader object. FileReader is used to read the contents of a Blob or File
.onload
readAsDataURL
.empty()

https://www.youtube.com/watch?v=aIWgqJtYwrY

Share with: