BlueImp File Upload "Error: Method Not Allowed" - Laravel 4 Routing Issue

Question

I am using Blueimp.jquery file-upload for file uploads. My app is also under Laravel 4 framework and I have an error on uploading file. The error returned by this API in Firefox and Chrome is:

 Error: Method Not Allowed

I think the error comes with routing on Laravel because this is what I found on 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">&nbsp;</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 routes code for the form:

Route::resource('image', 'ImageUploadController');

And inside the ImageUploadController I have:

public function store()
    {
        $file = Input::file('thumbnail');
        $file = move(public_path().'/product/images/temp/', $file=>getClientOriginaLName());
    }

If the routing is the issue, How could I register these routes on my routes file? I mean what verbs do I have to use and the codes inside of each functions? Or are there some other possible solutions to this? Thanks.

Probably more helpful if you post your current route handling the upload and also the relevant controller action — JofryHS
– JofryHS, Commented Aug 3, 2014 at 20:30

Jones03 · Accepted Answer · 2014-09-05 06:52:09Z

2

I also had that error with Blueimp.jquery file-upload + Laravel 4. I solved it by adding a route for my Ajax call with PUT method. (even though jquery-file-upload is said to use POST in their 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 further testing I found out that if I add additional 'data.formData' to my request (as described here), it will use a POST method instead of PUT...

edited Sep 5, 2014 at 6:52

answered Sep 4, 2014 at 7:35

Jones03

1,2572 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren Taylor · Accepted Answer · 2014-08-03 20:15:41Z

0

MethodNotAllowedHttpException generally means that the method you are using to call that URL is incorrect.

Assuming this error is happening when you are trying to upload a file, then it could just be a case of changing that Route to be a POST route instead of a GET route.

answered Aug 3, 2014 at 20:15

Darren Taylor

2,03515 silver badges19 bronze badges

1 Comment

Jay Marz Over a year ago

Yes, I also tried to change the method with GET or POST. But either way, same error returns.

user3617691 · Accepted Answer · 2017-11-08 11:33:19Z

0

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'll receive csrf error which can be fixed adding csrf-field ... check here: StackOverFlow

answered Nov 8, 2017 at 11:33

user3617691

336 bronze badges

Collectives™ on Stack Overflow

BlueImp File Upload "Error: Method Not Allowed" - Laravel 4 Routing Issue

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related