laravel 422 (Unprocessable Entity) ajax file upload

Question

I am using Laravel 6 and i would also like to say that i am not that much experienced working on Laravel. I have searched SO and google as well but not got any solution to this problem. Below are the files and code PordController.php

    <?php

namespace App\Http\Controllers\Admin;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use App\Prod;
use App\Section;
use Illuminate\Support\Facades\Validator;
class ProdsController extends Controller
{

    function __construct () {
        $this->middleware('role:admin');

    }


    public function index(Request $request)
    {

        $tasks = Prod::orderBy('id', 'desc')->get();
        $section = Section::all();
$arr['tasks'] = $tasks;
$arr['sections'] = $section;
        return view('admin.pords',$arr);
    }

    public function store(Request $request)
    {

        $validator = Validator::make($request->input(), array(
            'name' => 'required',



        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        if ($files = $request->file('fileUpload')) {
            $destinationPath = public_path('images'); // upload path
            $profileImage = rand() .".". $files->getClientOriginalExtension();
            $files->move($destinationPath, $profileImage);
         }



        $task = Prod::create($request->all());


       return response()->json([
           'error' => false,
            'task'  => $task,
       ], 200);
    }

    public function show($id)
    {
        $task = Prod::find($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function update(Request $request, $id)
    {
        $validator = Validator::make($request->input(), array(
            'name' => 'required',

        ));

        if ($validator->fails()) {
            return response()->json([
                'error'    => true,
                'messages' => $validator->errors(),
            ], 422);
        }

        $task = Prod::find($id);

        $task->name        =  $request->input('name');


        $task->save();

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }

    public function destroy($id)
    {
        $task = Prod::destroy($id);

        return response()->json([
            'error' => false,
            'task'  => $task,
        ], 200);
    }
}

prods_add.blade.php

    <!-- Add Task Modal Form HTML -->
<div class="modal fade" id="addTaskModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="frmAddTask" enctype="multipart/form-data" method="POST">
                <div class="modal-header">
                    <h4 class="modal-title">
                       add
                    </h4>
                    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" id="add-error-bag">
                        <ul id="add-task-errors">
                        </ul>

                    </div>
                    <div class="form-group">
                        <label>
                            name
                        </label>
                        <input class="form-control" id="name" name="name" required="" type="text">
                        </input>
                    </div>
                    <div class="form-group">

                        <label>
                         desc
                        </label>
                        <input class="form-control" id="desc" name="description" required="" type="text">
                        </input>
                    </div>
                    <div class="form-group">
                        <label>
                       member
                        </label>
                        <input class="form-control" id="member" name="member" required="" type="number">
                        </input>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>
                               isfiles allow
                                </label>
                                <input class="form-control" type="checkbox" id="isfile" name="isfile" value="true" checked>

                                </input>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>
                               camera allow
                                </label>
                                <input class="form-control" type="checkbox" id="isvideo" name="isvideo" value="true" checked>

                                </input>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>
                                mic allow
                                </label>
                                <input class="form-control" type="checkbox" id="ismic" name="ismic" value="true" checked>

                                </input>
                            </div>
                        </div>
                        </div>
<div class="form-group">
    <label>
    sections
    </label>
  <select id="section_id" name="section_id" class="form-control">
@foreach ($sections as $section)
    <option value="{{$section->id}}">{{$section->name}}</option>
@endforeach
  </select>


</div>
<div class="form-group">


    <div class="form-group">
        <label for="file"> <div class="btn btn-primary btn-sm float-left">
            <span>Choose file</span>

          </div></label>
        <input style="color:black" type="file" class="form-control-file" id="file" name="fileUpload">
      </div>



</div>





                    </div>

                <div class="modal-footer">
                    <input class="btn btn-default" data-dismiss="modal" type="button" value="cancel">
                        <button class="btn btn-info" id="btn-add" type="button" value="add">
                         add
                        </button>
                    </input>
                </div>
            </form>
        </div>
    </div>
</div>

pords.js

  $(document).ready(function() {
    $("#btn-add").click(function() {

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

        var car = 0;
        var car1 = 0;
        var car2 = 0;
       var  x = document.getElementById("isfile").checked;
        if(x === true){
            car = 1;
        }
        if(document.getElementById("isvideo").checked === true){
             car1 = 1;
        }
        if(document.getElementById("ismic").checked === true){
             car2 = 1;
        }
        console.log($("#file").get(0).files[0]);
       var filess = $("#file").get(0).files[0];

        $.ajax({
            type: 'POST',
            url: '/admincp/prods',



            data: {
                name: $("#frmAddTask input[name=name]").val(),
                description: $("#frmAddTask input[name=description]").val(),
                display: 1,
                sessionid: 'sadasdasdasdasd',
                password: 'sadasdasdasdasd',
                fileUpload: filess,
                img: "path",

                member: $("#frmAddTask input[name=member]").val(),
                isfile: car,
                isvideo: car1,
                ismic: car2,
                section_id: $("#frmAddTask select[name=section_id]").val(),



            },
            processData: false,
            dataType: 'json',
            success: function(data) {
                $('#frmAddTask').trigger("reset");
                $("#frmAddTask .close").click();
                window.location.reload();
            },
            error: function(data) {
                var errors = $.parseJSON(data.responseText);
                $('#add-task-errors').html('');
                $.each(errors.messages, function(key, value) {
                    $('#add-task-errors').append('<li>' + value + '</li>');
                });
                $("#add-error-bag").show();
            }
        });
    });
    $("#btn-edit").click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'PUT',
            url: '/admincp/prods/' + $("#frmEditTask input[name=id]").val(),
            data: {
                name: $("#frmEditTask input[name=name]").val(),

            },
            dataType: 'json',
            success: function(data) {
                $('#frmEditTask').trigger("reset");
                $("#frmEditTask .close").click();
                window.location.reload();
            },
            error: function(data) {
                var errors = $.parseJSON(data.responseText);
                $('#edit-task-errors').html('');
                $.each(errors.messages, function(key, value) {
                    $('#edit-task-errors').append('<li>' + value + '</li>');
                });
                $("#edit-error-bag").show();
            }
        });
    });
    $("#btn-delete").click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'DELETE',
            url: '/admincp/prods/' + $("#frmDeleteTask input[name=id]").val(),
            dataType: 'json',
            success: function(data) {
                $("#frmDeleteTask .close").click();

                window.location.reload();
                pushnotify('تم الحذف بنجاح ');
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
});

function addTaskForm() {
    $(document).ready(function() {
        $("#add-error-bag").hide();

        $('#addTaskModal').modal('show');
    });
}

function editTaskForm(task_id) {
    $.ajax({
        type: 'GET',
        url: '/admincp/prods/' + task_id,
        success: function(data) {
            $("#edit-error-bag").hide();
            $("#frmEditTask input[name=name]").val(data.task.name);

            $("#frmEditTask input[name=id]").val(data.task.id);
            $('#editTaskModal').modal('show');
        },
        error: function(data) {
            console.log(data);
        }
    });
}

function deleteTaskForm(task_id) {
    $.ajax({
        type: 'GET',
        url: '/admincp/prods/' + task_id,
        success: function(data) {
            $("#frmDeleteTask #delete-title").html("Delete Task (" + data.task.name + ")?");
            $("#frmDeleteTask input[name=id]").val(data.task.id);
            $('#deleteTaskModal').modal('show');
        },
        error: function(data) {
            console.log(data);
        }
    });
}

The error in js file because without fetching the image value works great When I add a value the image gets the error

Answer 1

The problem could be here:

$task = Prod::create($request->all());

try to make

public function store(Request $request)
{
   dd($request->all());
}

and in network see the response. also, when you make Prod::create($request->all());

it request everything like __token and so on