Неопределенный ответ при загрузке изображения с помощью ajax

Question

У меня проблема с загрузкой изображений в AJAX. Когда я нажимаю на отправку изображения, я получаю отзыв jquery, который говорит мне «неопределенный», пока на изображение нажимали

Я попробовал еще одну вещь, которая работает правильно, но создает действительно простую форму и дает атрибут класса jquery вместо id. И это работает ..

Форма, которая не работает (хотелось бы, чтобы она работала :))

<form action="ajax/uploadimage.php" method="post" enctype="multipart/form-data" >
              <div class="card-body">
                <!-- Single -->

                <div class="dropzone dropzone-single mb-3" data-toggle="dropzone" data-dropzone-url="http://">

                    <div class="custom-file">
                      <input id="file-upload" type="file" name="fileToUpload" class="custom-file-input" multiple required>
                      <label class="custom-file-label" for="file-upload">Choose file</label>
                    </div>

                  <div class="dz-preview dz-preview-single">
                    <div class="dz-preview-cover">
                      <img class="dz-preview-img" src="..." alt="..." data-dz-thumbnail>
                    </div>
                  </div>
                </div>


             <center><input type="submit" class="btn btn-primary" id="file-submit" value="<?php echo TXT_DASHBOARD_MODIFIER; ?>"></center>

              </div>
            </form>

JQuery, который не работает

<script type="text/javascript">
    $(function() {
        $('#file-submit').on('click', function() {
            var file_data = $('#file-upload').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax/uploadimage.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else if(response == 'false') {
                            alert('Invalid file type.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }

                        $('#file-upload').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

Форма, которая работает:

<form>
    <input type="file" name="image" class="image" required>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

JQuery, который работает:

<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.image').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax/uploadimage.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else if(response == 'false') {
                            alert('Invalid file type.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }

                        $('.image').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

Я хотел бы решить неопределенную ошибку .. Спасибо за помощь:)