Laravel5 file Upload via Ajax

Question

When I am uploading file showing some error. Error details and file contents are given below. Could you please check and help me to solve this issue?

Error

 Whoops, looks like something went wrong.

 MethodNotAllowedHttpException in RouteCollection.php line 201:

 in RouteCollection.php line 201

at RouteCollection->methodNotAllowed(array('GET', 'HEAD')) in RouteCollection.php line 188

at RouteCollection->getRouteForMethods(object(Request), array('GET', 'HEAD')) in RouteCollection.php line 140

at RouteCollection->match(object(Request)) in Router.php line 746

at Router->findRoute(object(Request)) in Router.php line 655

at Router->dispatchToRoute(object(Request)) in Router.php line 631

at Router->dispatch(object(Request)) in Kernel.php line 236

etc

routes.php

Route::post('/ambition/update', [
    'before'  => 'csrf',
    'as'      => 'tagambitionupdate',
    'uses'    => 'TagambitionController@update'
]);

TagambitionController.php

public function update(TagambitionRequest $request)
    {
        $userTagID     = $request->hiddenid;
        $file          = $request->file('file');
        dd($file);
    }

JS

 $(document).ready(function() {
        /* Upload files of ambition tags begin*/
        $("#submit").click(function(){
            alert('hai');
            var form      = $("#addForm")[0];
            var formdata  = new FormData(form);
            formdata.append('file', 'file');
            $.ajax({
                url : "/ambition/update",
                type: "POST",
                data : formdata,
                processData: false,
                contentType: false,
                success:function(data){
                    alert(data);
                }
            });
        });
        /* Upload files of ambition tags end*/
    });

forntend.blade.php

<div class="tag-handler-ambition-response">
                        <form id="addForm" method="post" enctype="multipart/form-data"><span id="tag-ambition-append">Test</span><input name="file" type="file" id="file" ><input name="hiddenid" id="hiddenid" type="hidden" value='{{ $id }}' ><input type="hidden" name="_token" value="{{ csrf_token() }}"><button class="btn btn-default" id="submit" >Submit</button></form>
                    </div>

can you please do a `console.log(url)` inside your javascript script? and post the result? Are you sure you are posting in the correct url? — Harry Geo, Sep 18 '15 at 10:08
@ Harry Geo, My console is showing error "NetworkError: 405 Method Not Allowed - http://www.ct.dev/ct". I am posting the correct url — Sarath TS, Sep 18 '15 at 10:13
That's the result of the failed request, I asked about your url? are you sure you are posting at `http://yourdomain.com/ambition/update` also take a look at this [thread](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Harry Geo, Sep 18 '15 at 10:20
@HarryGeo, yes posting url is correct. Firebug Net showing -----------------------------25603393529504 Content-Disposition: form-data; name="hiddenid" 28 -----------------------------25603393529504 Content-Disposition: form-data; name="_token" wdqLkfj10vaj9efEV2dncm3v6E0KLw52ArQXbXCl -----------------------------25603393529504-- — Sarath TS, Sep 18 '15 at 10:35

score 1 · Accepted Answer · answered Sep 18 '15 at 12:46

Finally I got my result. I have changed the button click function to form submit. Please check my code below. I can upload files without refreshing page using Laravel5 and jQuery ajax.

jS

$("#addForm_"+response.id).submit(function(e){
                            e.preventDefault();
                            var form      = $("#addForm_"+response.id)[0];
                            var formdata  = new FormData(form);
                            formdata.append('file', 'file_'+response.id);
                            $.ajax({
                                url : "/ambition/update",
                                type: "POST",
                                data : formdata,
                                processData: false,
                                contentType: false,
                                success:function(data){
                                }
                            });
                            e.preventDefault();
                        });

Laravel5 file Upload via Ajax

1 Answers1