Jan 21, 2017
0
Level 15
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

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!
Please or to participate in this conversation.