Uploading BlueImp file "Error: Method not allowed" - Laravel 4 Routing error
I am using Blueimp.jquery file-upload to upload files. My app is also in the framework Laravel 4
and I have an error uploading a file. The error returned by this API
in Firefox and Chrome:
Error: Method Not Allowed
I think the error comes from routing
to Laravel
, because this is what I found in the Firebug
dev console:
{"error":{"type":"Symfony\\Component\\HttpKernel\\Exception\\MethodNotAllowedHttpException","message":"","file":"C:\\xampp\\htdocs\\digisells\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php","line":210}}
This is the form code:
{{ Form::open(['route'=>'image.store','id'=>'fileupload','files'=>true]) }}
<div class="col-md-12">
<div class="container">
<!-- file upload -->
<!-- <form id="fileupload" action="file-upload/product-images" method="POST" enctype="multipart/form-data"> -->
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-md-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="thumbnail" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-md-5 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>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
<!-- </form> -->
</div>
</div>
{{ Form::close() }}
This is the code routes
for the form:
Route::resource('image', 'ImageUploadController');
And inside ImageUploadController
I have:
public function store()
{
$file = Input::file('thumbnail');
$file = move(public_path().'/product/images/temp/', $file=>getClientOriginaLName());
}
If the problem is routing
, how can I register these routes
in my file routes
? I mean, what verbs do I need to use and also the codes inside each function? Or are there some other possible solutions? Thank.
source to share
I also had an error with Blueimp.jquery file-upload + Laravel 4. I solved this by adding a route for my Ajax call using the PUT method. (although jquery-file-upload is said to use POST in its documentation )
My route looks like this:
Route::put('upload/image', array('as' => 'admin.upload', 'uses' => 'App\Controllers\Admin\ImageController@postUpload'));
javascript call:
$('.image-upload').fileupload({
url: '/upload/image',
dataType: 'JSON',
//type: 'POST',
done: function (e, data) {
//console.log(data);
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo($('.image-placeholder'));
});
}
});
EDIT:
After some additional testing, I found out that if I add additional data.formData to this request (as described here ), it would use the POST method instead of PUT ...
source to share
This worked for me:
$('.image-upload').fileupload({
url: '/upload/image',
dataType: 'JSON',
method: 'POST',
done: function (e, data) {
//console.log(data);
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo($('.image-placeholder'));
});
}
});
Then you will get a csrf error which can be fixed by adding csrf-field ... here: fooobar.com/questions/420075 / ...
source to share