X

Congrats, You are Subscribed to Receive Updates.

jQuery AJAX Uploader For Laravel


jQuery AJAX uploader for laravel  site and we are going to use simple HTML form and uploading image and show a preview on the upload form.

laravel-ajax-image

Lets start write coding, First begin with Routes.

Route::get('files', 'ImageController@getUploadForm');
Route::post('/files/image','ImageController@postUpload');

The above one help you to create the folder and path to images directory. Than move to the view file and create the form for the image uploader and preview.

<div class="row">
			<div class="span8">
				<h4>Ajax Image Upload and Preview With Laravel</h4>
			</div>
		</div>
		<!-- Post Footer -->
		<div class="row">
			<div class="span3">
				<div id="validation-errors"></div>
				<form class="form-horizontal" id="kv_upload" enctype="multipart/form-data" method="post" action="{{ url('files/image') }}" autocomplete="off">
					<input type="hidden" name="_token" value="{{ csrf_token() }}" />
					<input type="file" name="image" id="kv_image" /> 
				</form>

			</div>
			<div class="span5">
				<div id="output" style="display:none">
				</div>
			</div>
</div>

This is a sample form with AJAX support.  and now we need to create a controller class to perform  upload and storing operations.

<?php

class ImageController extends BaseController {
	public function getUploadForm() {	return View::make('image/upload-form');	}

	public function postUpload() {
		$file = Input::file('image');
		$input = array('image' => $file);
		$rules = array(	'image' => 'image');
		$validator = Validator::make($input, $rules);
		if ( $validator->fails() ){
			return Response::json(['success' => false, 'errors' => $validator->getMessageBag()->toArray()]);
		}
		else {
			$destinationPath = 'files/';
			$filename = $file->getClientOriginalName();
			Input::file('image')->move($destinationPath, $filename);
			return Response::json(['success' => true, 'file' => asset($destinationPath.$filename)]);
		}
	}
}

And finally , the Js function to handle the AJAX operations.

	

function showRequest(formData, jqForm, options) { 
	jQuery("#validation-errors").hide().empty();
	jQuery("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
	if(response.success == false)
	{
		var arr = response.errors;
		jQuery.each(arr, function(index, value)
		{
			if (value.length != 0)
			{
				jQuery("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
			}
		});
		jQuery("#validation-errors").show();
	} else {
		 jQuery("#output").html("<img src='"+response.file+"' />");
		 jQuery("#output").css('display','block');
	}
}

jQuery(document).ready(function() {
	var options = { 
                beforeSubmit:  showRequest,
		success:       showResponse,
		dataType: 'json' 
        }; 
 	jQuery('body').delegate('#image','change', function(){
 		jQuery('#kv_upload').ajaxForm(options).submit();  		
 	}); 
});

That’s it. and create files folder on your public/files/images/  and make the directory permission as 0777.

 

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

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

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts