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

by
Category:laravel
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() }}" />

HTML Code

<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>
                </div>

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

Ajax call with validation excel file

$("#uploaddiamond").on("submit", function(e) {
    e.preventDefault();
    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);
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name=_token]').attr('content')
            }
        });

        $.ajax({
            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);

5 Comments

Ahmad Husen

07 Sep 2018

Thank you..
Luiz

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.
dean

23 Nov 2018

Nice WORKING tutorial
saddam

09 Mar 2019

Thanks its works fine for me
kaiser

11 Mar 2019

omg you save my time i love you!!

Html code work in comment box


Related Post