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.
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 ...
MethodNotAllowedHttpException usually means that the method you are using to call this URL is incorrect.
Assuming this error occurs when you try to upload a file, it might be a case of changing the POST route instead of the GET route.
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 / ...