Help with single request dropzone and ajax with other form field

[mahenda]

/*I'm trying to use dropzone js plugin for drag/drop single phote but it require me to create another form for file upload, but i want to use single form for both image and name input, i have no idea on how to combine this field in sinle request, the form to submit both image and name look like*/
<form method="POST" enctype="multipart/form-data">
<input type="text" name="name" id="name">
<!--how to replace this field with dropzone but in this form in order to use the same ajax as below-->
<input type="file" name="photo" id="photo">
<button type="submit">send</button>
</form>


//ajax, how to add dropzone data in
$("form").on('submit', function(e) {
        $.ajax({
            url: 'add.php',
            type: 'POST',
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData:false,
        }).done( function (data) {
            
            if(data.success == false) { //for error message response

                if(data.errors.name) {
                    $('#name').append('<span class="text-danger">' + data.errors.name + '</span>');
                }
				if(data.errors.photo) {
                    $('#photo').append('<span class="text-danger">' + data.errors.photo + '</span>');
                }

			}
        });
        e.preventDefault();
    });