How to allow formData sends null

Question

I have a form it works fine if i fill all fields, but if i don't fill attachment field it returns error says: The attachment must be a file of type: image/jpeg, image/png. while my attachment is nullable in back-end validator.

code

backend

public function sendEmail(Request $request) {
    $this->validate($request, array(
        'body'  => 'required',
        'subject'  => 'required',
        'receivers'  => 'required',
        'project_id' => 'required',
        'attachment' => 'nullable|mimetypes:image/jpeg,image/png|max:2048',
    ));

    if ($request->hasFile('attachment')) {
        $request->validate([
            'attachment' => 'nullable|mimetypes:image/jpeg,image/png|max:2048',
        ]);
        $image = $request->file('attachment');

        $filename = 'attachment-' . str_random(10) . '-' . time() . '.' . $image->getClientOriginalExtension();

        $location = public_path('images/'. $filename);
        // $request->file('photo')->move(public_path('images') . $filename);
        $request->file('attachment')->storeAs('attachment', $filename);
        $attachment = $filename;
    } else {
        $attachment = null;
    }
    //rest of function
}

Ajax

$('body').on('click','.sendMailNowSubmit',function(e) {
    e.preventDefault();
    $(this).text('Please wait ...');

    var formData = new FormData();
    formData.append('body', $('#messageBody').val());
    formData.append('subject', $('#messageSubject').val());
    formData.append('receivers', $('#receivers').val());
    formData.append('project_id', $(this).data('id'));
    formData.append('attachment', $('input[type=file]')[0].files[0]);

    $.ajax({
        type:'POST',
        url:'{{route('sendEmail')}}',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        dataType: 'JSON',
        enctype: 'multipart/form-data',
        processData: false,
        success:function(data){
            $(".sendMailNow").attr("disabled", false);
            document.getElementById("sendMailForm").reset();
            $(".Mailmessage").append('<div class="alert alert-success fade in">'+data.success+'</div>').hide(4000);
            $(".sendMailModal").modal('hide');
            $(".sendMailNowSubmit").val("Done!");
            $(".sendMailNowSubmit").text('Submit');

        },
        error: function(data){
            $(".sendMailNow").attr("disabled", false);
            var errors = data.responseJSON;
            errorsHtml = '<div class="alert alert-danger alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><ul>';
            $.each(errors.errors,function (k,v) {
                    errorsHtml += '<li>'+ v + '</li>';
            });
            errorsHtml += '</ul></di>';
            $( '.Mailmessage' ).html( errorsHtml );
            $(".sendMailNowSubmit").text('Re-Submit');
        }
    });
});

Any idea?

Answer 1

Try this code for validation

$rules = [
    'body'  => 'required',
    'subject'  => 'required',
    'receivers'  => 'required',
    'project_id' => 'required'
];
if ($request->hasFile('attachment')) {
   $rules['attachment'] = 'mimetypes:image/jpeg,image/png|max:2048';
}
 $this->validate($request, $rules);