Chris1904's avatar

jQuery File Upload - issues connecting to Laravel

Hi!

First off, I am super new using Laravel and I love it!

I am trying to include the Blueimp jQuery File Upload library (Basic Plus UI). The issue I run into is that I don't know exactly how to call my MediaUpload() method via AJAX. Before I was just submitting the form. The error message I occur is Error message

The code I use

MediaController.php

public function mediaUpload(UploadMediaRequest $request){
        dd($request->all());
};

upload.blade.php

<form id="fileupload" action="{{ route('media.upload') }}" method="POST" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-12 col-md-10 col-md-offset-1">
            <div class="card" style="padding: 0px 25px">
                <div class="card-header">
                    <h6>UPLOAD MEDIA</h6>
                </div>
                <div class="card-block">
                    <div class="row">
                        <div class="col-sm-12 col-md-10 col-md-offset-1">
                            <div class="fileupload-buttonbar dropzone">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="btn btn-sm btn-success fileinput-button">
                                        <i class="fa fa-plus"></i>
                                        <span>Add Files...</span>
                                        <input type="file" name="files[]" multiple>
                                    </span>
                                <button type="submit" class="btn btn-sm btn-primary start">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>Start Upload</span>
                                </button>
                                <button type="reset" class="btn btn-sm btn-warning cancel">
                                    <i class="fa fa-ban"></i>
                                    <span>Cancel Upload</span>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger delete">
                                    <i class="fa fa-trash"></i>
                                    <span>Delete</span>
                                </button>
                                <input type="checkbox" class="toggle">
                                <!-- The global file processing state -->
                                <span class="fileupload-process"></span>
                                <div style="padding-top: 20px">
                                    <span class="help-block"><center>Drag 'n Drop a file here</center></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="padding-top: 20px;">
                        <div class="col-md-10 col-md-offset-1">
                            <!-- The global progress state -->
                            <div class="fileupload-progress fade">
                                <!-- The global progress bar -->
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                                </div>
                                <!-- The extended global progress state -->
                                <div class="progress-extended"> </div>
                            </div>
                        </div>
                    </div>

                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

                </div>
            </div>
        </div>
    </div>
</form>

web.php

Route::post('upload', ['as' => 'media.upload', 'uses' => 'MediaController@mediaUpload']);

main.js

// Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
    });

I would appreciate any hints into the right direction to how I can call my mediaUpload method without submitting the form each time.

This is a demo of what I am trying to accomplish: https://blueimp.github.io/jQuery-File-Upload/index.html

Thank you so much for any help!

0 likes
0 replies

Please or to participate in this conversation.