Ravi Ravi - 3 months ago 39
Ajax Question

Laravel Ajax image upload with preview not working?

The form for uploading the image using Laravel Form Facade

{{Form:: open(['route'=>'jcrop.store', 'method'=>'post','id'=>'upload','role'=>'form-role', 'enctype'=>'multipart/form-data'])}}
@include('backend.admin.jcrop.general._form',['submitButton'=>'Save Values'])
{{Form:: close()}}

The form which is included...

<div class="form-group">
{{Form:: label('title','Title')}}
{{Form:: text('title',null,['placeholder'=>'Enter Title', 'class'=>'form-control'])}}
<div class="form-group">
{{Form:: label('rank','Rank')}}
{{Form:: number('rank',null,['placeholder'=>'Enter Rank', 'class'=>'form-control'])}}
<div class="form-group">
{{Form:: label('image','Image')}}
{{Form:: file('image',null,['placeholder'=>'Enter Rank', 'class'=>'form-control', 'id'=> 'image'])}}
<div class="form-group">
{{Form:: label('status','Status:')}}
{!! Form::radio('status', '1', 'true')!!} Active
{!! Form::radio('status', '0')!!} De-Active

{{Form:: button($submitButton,['class'=>'btn btn-primary','type'=>'submit'])}}
{{Form:: button('Reset',['class'=>'btn btn-danger','name'=>'reset','type'=>'reset'])}}

The script which uploads image using malsupform plugin.

<script type="text/javascript">
var options= {
beforeSubmit: showRequest,
success: showResponse,
dataType: 'json'

function showRequest(formData, jqForm, options){
return true;

function showResponse(response, statusText, xhr, $form){

var arr= response.errors;
$.each(arr, function(index, value){
$("#validation-errors").append('<div class="alert alert-danger">+value+</div');
$("#output").html("<img src='"+response.file+"'/>");

The routes to handle the upload and store methods.

Route::resource('jcrop', 'Admin\JcropController');

The Controller which handles the upload and returns the json format of the data.

This is the Controller file in which I have declared some protected variable.

protected $view_path = 'backend.admin.jcrop';
protected $imagePath = '\public\uploads\jcrop';
protected $imageUrl = 'uploads\jcrop';

The Controller Function which handles the upload and the returns the json format of the data..

public function store(Request $request)
$image= $this->saveImage($request->file('image'));

Here I have made a simple function called saveImage() which uploads the image and returns the uploaded file

$file= base_path(). $this->imagePath.'/' .$image->getFileName();
return response()->json(['success'=>'true', 'file'=>$file]);

The function which handles the upload is...

protected function saveImage($image)
$filename= $image->getClientOriginalName();
$filename= pathinfo($filename, PATHINFO_FILENAME);
$file= $filename. '.' .$image->getClientOriginalExtension();
$upload= $image->move(base_path().$this->imagePath, $file);
return $upload;

Everything is working fine except when the data is returned i see

Not allowed to load local resource:

In chrome and FireFox as well. Please help me sort out the problem?


I think the issue is with the saveImage() return. Instead of base_path(), try using url('/'). base_path() returns server path not the URL.

$file= url('public/uploads/jcrop').$image->getFileName();