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
– Harry Geo, Commented Sep 18, 2015 at 10:08
@ Harry Geo, My console is showing error "NetworkError: 405 Method Not Allowed - ct.dev/ct". I am posting the correct url — Sarath TS
– Sarath TS, Commented Sep 18, 2015 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 — Harry Geo
– Harry Geo, Commented Sep 18, 2015 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
– Sarath TS, Commented Sep 18, 2015 at 10:35

Sarath TS · Accepted Answer · 2015-09-18 12:46:11Z

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();
                        });

Collectives™ on Stack Overflow

Laravel5 file Upload via Ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related