0

My question is about upload photo with Ajax.

This is my blade:

<section class="panel">
    <header class="panel-heading">
        Medya Ekle
    </header>
    <div class="panel-body">
        <form class="form-horizontal tasi-form" id="upload_form" method="post" enctype="multipart/form-data">
            {{csrf_field()}}
            <div class="form-group">
                <label class="col-sm-2 control-label">Medya Başlığı *</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control mediaTitleTxt" name="mediaTitleTxt" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Medya *</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control mediaInput" name="mediaInput" autocomplete="off" required>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12">
                    <button class="btn btn-success pull-right addMediaBtn">Ekle</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="panel tasks-widget">
    <header class="panel-heading">
        Medyalar
    </header>
    <div class="panel-body">

    </div>
</section>

<!--main content end-->

This is my JS code:

let form = $("#upload_form");
form.on("submit", function (e) {
    e.preventDefault();
    $.ajax({
        url:"/api/media/create",
        method:"POST",
        data:new FormData(this),
        dataType:'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data)
        {
            console.log(data);
        }
    });
});

This is my routes/api.php:

Route::post("media/create", "api@createMedia");

This is my controller:

public function createMedia(Request $request){
    //TODO Upload image
    return [$request];
}

When I click submit button I'm getting this error:

MethodNotAllowedHttpException in RouteCollection.php line 251

I can't figure it out. How can I solve this?

  • javascript post url is `/api/media/create` but your route is just `media/create` I guess that should be the problem ? – tinker Jan 19 '19 at 11:48
  • Route defined in the routes/api.php Within this group, the /api URI prefix is automatically applied. @sking – M. Özdemir Jan 19 '19 at 11:56
  • do you get the error as a post error in the console or do you get the error view of laravel? – François L Jan 19 '19 at 11:59
  • GET http://localhost:8000/api/media/create?[object%20FormData]&_=1547899230474 405 (Method Not Allowed) I'm getting this error. @FrançoisLanzeray – M. Özdemir Jan 19 '19 at 12:01
  • So you get these MethodNotAllowed Exceptions when you defined a post route but you do not send a post request to this route. And as you are getting a GET error, you are sending a get. I'd guess everythings fine on the laravel part, but there seems to be a problem in you're html/js, I'll have a look into it... – François L Jan 19 '19 at 12:09
  • are there any other ajax request that are triggered for #upload_form? do you only use #upload_form in this particular view? because if i replicate your scenario in an isolated that blade, it works fine. So I'd guess that at some point you send a GET somehwere else by accidents. But again, this is guessing, unfortunately – François L Jan 19 '19 at 12:22
  • I just use one Ajax request in this blade. I've used GET instead of POST it's works without error but I can't get form data in controller. – M. Özdemir Jan 19 '19 at 12:56
  • Great to hear, good you post this as the answer and mark it as the right one? So that the question is closed. Regarding FormData: the wy you try to use FormData doesn't work, here's an example of how you can use it for files: https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload . Here's a great article about formdata in general: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects . If you have further questions about after reading the docs consider asking a different question and close this one in any case. – François L Jan 19 '19 at 13:19
  • I get same error again. But I figured it out. It was about old jQuery version I changed to new version of jQuery and problem solved – M. Özdemir Jan 21 '19 at 07:48

3 Answers3

0

Could you try to put that route in web.php ? then call it from there without including the /api/ in the link

Tghosh
  • 180
  • 3
  • 14
0

For anyone wondering: problem is that he used GET in his code at some point, but he fixed it by now and it's working. Please see the comments to his question for further information. Some general notes after I've seen the questions and proposed answers:

  1. General information about Laravel Routes can be obtained from the docs: https://laravel.com/docs/5.7/routing (make ure you use the one version that matches your laravel version)
  2. API Routes defined in api.php do always auto prepend api/ so theres no need to specifically type that in the route files
  3. Leading / in routes are not necessary Route::get("api/test", function(){}); can be accessed by /api/test.
  4. However, trying to access it by using /api/test/ results in an MethodNotAllowedException as Laravel assumes that after the / something follows as a get parameter. So be careful :)
François L
  • 99
  • 1
  • 8
0

It was about old jQuery version I change jQuery version and problem solved. Thanks for helping.