Laravel Symfony\Component\HttpKernel\Exception\HttpException when uploading multiple image files with AJAX

I'm making a web app to which I would like from the user to be able to post multiple images to my server via AJAX. firstly, I want to check whether the files the user uploaded are legit (png, jpeg) and not something else. Laravel throws an

Symfony\Component\HttpKernel\Exception\HttpException

error without message making it very hard for me to debug.

For more info, am getting a 419 error on the client side.

Anyone having an idea what it might be?

I made sure to include the csrf tokens on both form and JS. I am using jQuery for AJAX.

This is the snippet of my form:

<form action="" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        
            <label for="title">What's in your mind (title)?</label>
            <input type="text" class="form-control" name="title" id="title" value="">
        
    </div>
    <div class="row">
        
            <label for="content">What would you like to discuss or ask (message)?</label>
            <textarea class="form-control" name="content" id="content" rows="6"></textarea>
        
    </div>
    <div class="row">
        <div class="custom-control custom-checkbox mr-sm-2">
            <input type="checkbox" class="custom-control-input" id="question" name="question">
            <label class="custom-control-label" for="question">Question</label>
        </div>
    </div>

    <input accept=".gif,.jpeg,.jpg,.png" type="file" multiple="" class="" aria-label="Attach files to your post" id="images_upload">
    <input type="hidden" name="category" value="">
    <input type="hidden" name="topic" value="">

    <button type="submit">Submit</button>
</form>

This is the snippet of the JS code:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    }
});

var ImagesInput = document.getElementById("images_upload");
ImagesInput.addEventListener('change', handleImages, false);

function handleImages(e){

    var fd = new FormData();
    fd.append("images_upload", ImagesInput.files[0]);

    var ins = document.getElementById('images_upload').files.length;
    for (var x = 0; x < ins; x++) {
        fd.append("images_upload[]", ImagesInput.files[x]);
    }

    check_images(fd);

}

function check_images(images){
    $.ajax({

        type:'POST',
        url:'/forum_post_check_images',
        data: {images_upload: images, _token : $('meta[name="csrf-token"]').attr('content')},
        dataType: "JSON",
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){

          document.getElementById("test-debug").innerHTML = data;

          if (JSON.parse(data).message == "success"){
              console.log("motherfucking works")
          }
      },
      error: function(data){

          // Something went wrong
          // HERE you can handle asynchronously the response 

          // Log in the console
          var errors = data.responseJSON;
          console.log(errors);
          console.log("motherfucking error")

          // or, what you are trying to achieve
          // render the response via js, pushing the error in your 
          // blade page
            errorsHtml = '<div class="alert alert-danger"><ul>';

            $.each( errors.error, function( key, value ) {
                errorsHtml += '<li>'+ value[0] + '</li>'; //showing only the first error.
            });
            errorsHtml += '</ul></div>';

            $( '#form-errors' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form  
        }
      });
}    

The route is defined as:

Route::post('/forum_post_check_images', ['uses' => 'forumThreadController@check_legit_image', 'as' => 'forum.thread.images_check']);

And the Controller function which is meant to be called after the AJAX execution:

    public function check_legit_image(Request $request){
        dd($request);
    }

The end goal is to see the output of:

dd($request)

Just for me to see that the request is working and the images are sent to the server (controller) to be processed.

I have an idea that the issue may be that PHP doesn't let me to upload files more than 2MB, but I cannot be absolutely sure.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2oX2YMj
via IFTTT