Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

File Upload in Laravel 5 using Ajax With Form Data

ajax laravel
File Upload in Laravel 5 using Ajax With Form Data

Today, I am going to show you How to excel or file upload using jquery Ajax in our Laravel 5 application. In this tutorial i explain step by step example code of ajax excel upload using jquery form JS.

 <meta name="_token" content="{{ csrf_token() }}" />


<form id="uploaddiamond" class="form-horizontal form-label-left" method="post" enctype="multipart/form-data">
     <div class="col-md-6">
        <div class="block">
            <div class="panel-body">
              <div class="form-group">
                    <label class="col-md-3 control-label">Upload Diamond <span class="required">*</span></label>
                    <div class="col-md-9">
                        <input required="" type="file" name="result_file" id="result_file" />

                <div class="btn-group pull-right">
                    <button class="btn btn-primary" type="submit">Submit</button>

Ajax call with validation excel file

$("#uploaddiamond").on("submit", function(e) {
    var extension = $('#result_file').val().split('.').pop().toLowerCase();
    if ($.inArray(extension, ['csv', 'xls', 'xlsx']) == -1) {
        $('#errormessage').html('Please Select Valid File... ');
    } else {

        var file_data = $('#result_file').prop('files')[0];
        var supplier_name = $('#supplier_name').val();

        var form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('supplier_name', supplier_name);
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')

            url: "{{url('postDiamond')}}", // point to server-side PHP script
            data: form_data,
            type: 'POST',
            contentType: false, // The content type used when sending data to the server.
            cache: false, // To unable request pages to be cached
            processData: false,
            success: function(data) {


Ajax call in Routes

Route::post('postDiamond', [
    'as' => 'postDiamond',
    'uses' => 'UploadDiamondController@postDiamond'

Routes Call in Controller and with excel file upload in specific folder.

$supplier_name = $request->supplier_name;
$extension = $request->file('file');
$extension = $request->file('file')->getClientOriginalExtension(); // getting excel extension
$dir = 'assets/files/';
$filename = uniqid().'_'.time().'_'.date('Ymd').'.'.$extension;
$request->file('file')->move($dir, $filename);


Ahmad Husen

07 Sep 2018

Thank you..

09 Nov 2018

Thank you for the post. I was stuck in this problem the entire day and this post totally solved that. I hope you may keep up the awesome content.

23 Nov 2018

Nice WORKING tutorial

Html code work in comment box

Related Post