Laravel + JQuery AJAX загрузка файла?

Question

Я пытался сделать это больше недели, и, похоже, ничего не работает. Предполагается, что пользователи смогут загружать на сервер файл с именем, но AJAX почему-то ничего не отправляет.

Это форма, в которую пользователь загружает файл:

        <div class="data-attachment" data-id="">
            <div class="new-attachment">
            <form id="form-attachment" name="newAttachment">
                <input type="text" class="attachment-name" name="name" placeholder="Name">
                <input id="file" type="file" name="file" class="attachment-name">
                <input type="submit" name="submit" value="Add attachment" id="submit">
            </form>                    
            </div>
            <button class="btn-del">
                <i class="fa fa-times"></i>
            </button>
        </div>

Эта функция вызывается при отправке формы:

        $('#form-attachment').on('submit', function (e) {
            e.preventDefault();
            form = document.forms.namedItem('newAttachment');
            formData = new FormData(form);
            reader = new FileReader();

            // data = {
            //     'name': formData.get('name'),
            //     'file': reader.readAsText($('#file')[0].files[0], 'UTF-8'),
            //     'task': $('#holder').data('id')
            // };

            console.log(formData.get('file'));

            $.ajax({
                method: 'POST',
                url: '/ajax/tasks/attachments/add',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (response) {
                    alert(response);
                    // window.location.reload();
                },
                error: function (xhr, response, error) {
                    console.log(error);
                }
            })
        });

Это код PHP, который получает форму:

/**
 * @param Req $request
 *
 * @return void
 */
public function addAttachment(Req $request)
{
    if ($request->ajax()
        && $_SERVER['REQUEST_METHOD'] == 'POST'
        && $request->exists('file')
        && $request->exists('name')
        && $request->exists('task')
        && Auth::user()->hasRight('projects.tasks.attachments.add')
    ) {
        $oTask = Task::find($_POST['task']);
            if ($oTask) {

                Request::file('file')->store(
                    '/'.$oTask->project->id, 'local'
                );
                $oTask->attachments()->create([
                    'name' => $request->input('name'),
                    'file' => $request->file('file')
                ]);

                $oTask->project->logs()->save(
                    new Log(['description' => 'User ' . Auth::user()->nameFormatter() . ' added attachment ' . $_POST['name'] . ' to task ' . $oTask->name . ' in project ' . $oTask->project->name])
                );
            }
        }
    }

Файлы служат вложениями к задачам, отсюда и индекс «задача». Я просмотрел несколько похожих вопросов и попытался применить коды из ответов, но ничего не помогло. Любая помощь или точка в правильном направлении приветствуется!

Answer 1

Я вижу, что файл не был отправлен, потому что ваша форма блокируется на enctype="multipart/form-data"

    <div class="data-attachment" data-id="">
        <div class="new-attachment">
        <form id="form-attachment" name="newAttachment" enctype="multipart/form-data">
            <input type="text" class="attachment-name" name="name" placeholder="Name">
            <input id="file" type="file" name="file" class="attachment-name">
            <input type="submit" name="submit" value="Add attachment" id="submit">
        </form>                    
        </div>
        <button class="btn-del">
            <i class="fa fa-times"></i>
        </button>
    </div>

также попробуйте просто добавить в свою формуДанные

 if ($("#file")[0].files > 0) {
     var file = $("#file")[0].files[0];
     formData.append("file", file, file.name);
 }