How to upload image with Laravel using $.ajax (jquery ajax)

Question

I am trying to send image upload through AJAX Laravel(jquery ajax). Always I receive empty $_FILES array. I have added enctype="multipart/form-data in form. When I send data through post method of Laravel, I get my data. This is not working with jquery ajax. I am getting ajax response of other things I am sending other than $_FILES.

My View File

<form action="" name="myForm_comment" id="myForm" method="post" role="form" enctype="multipart/form-data">

    <input type="hidden" name="snap" id="snap" value="">
    <input type="hidden" name="op" id="op" value="">
    <input type="hidden" name="ucname" id="name" value="{{$fname}}&nbsp;{{$lname}}">


    <textarea rows="3" class="form-control" placeholder="Add a public comment" style="padding:10px;" name="ucmsg" id="textmsg" required></textarea>

    <input type="file" id="imgInp" name="imgInp"/>
    <img id="blah" src="" alt="" />

    <div class="row">
        <div class="col-xs-1 col-xs-offset-8 text-center">
            <label for="imgInp"><i class="fa fa-camera-retro" aria-hidden="true"></i></label>
        </div>
        <!-- <div class="col-xs-1 text-center">
            <label for="imgInp"><i class="fa fa-smile-o" aria-hidden="true"></i></label>
        </div> -->
        <div class="col-md-2">
            <input type="submit" id ="cmnt_btn" class="btn btn-primary pull-right" name="commentSubmit" value="Comment" onclick="commentFunction();">
        </div>

    </div>
</form>

<script>
    $(document).ready(function(){
        //comment database management
        $("#cmnt_btn").click(function(){
            var name = $("#name").val();
            var textmsg = $("#textmsg").val();
            var picture = $("#imgInp").val();
            $.ajax({
                url:'comment_dbm',
                type:'get',
                data:{
                    ucname:name,
                    ucmsg:textmsg,
                    ucpic:picture,
                },
                success:function(response)
                {
                    alert(response);
                }
            });
        });
    });
</script>

My Controller

<?php

namespace App\Http\Controllers;

use App\User;
use App\Http\Controllers\Controller;
use DB;
use Illuminate\Http\Request;
use Illuminate\Routing\Redirector;
use Session;
use Illuminate\Contracts\Validation\Validator;
use Mail;


session_start();

class CommentController extends Controller
{
    public function comment_dbm()
    {

       echo $ucname = $_GET['ucname'];
       $ucmsg = $_GET['ucmsg'];
       $cmnt_pic = $_GET['cmnt_pic'];       //I am getting these values response

       print_r($_FILES);    // getting empty array

     ]);

    }
}

My Route File(i.e. in web.php)

Route::get('/comment_dbm', [
    'uses' => 'CommentController@comment_dbm',
    'as' => 'comment_dbm'
]);

manniL manniL · Accepted Answer · 2017-06-03T09:44:57

You mustn't use session_start(), or $_GET. Better use the built-in Session and Request classes. Also, you cannot transfer data (like images) through a GET request. Use a POST one for it.

Then you can follow the answer here

How to upload image with Laravel using $.ajax (jquery ajax)

1 Answers