Загрузка файла с фронтенда

Koresh · 21 июл 2020

Фронтенд - компонент редактирования данных у модели. На странице нет формы и кнопки сабмит. Данные для полей модели собираю и передаю через js.
Проблема в том что не могу загрузить файл изображения для поля logo модели.

В HTML у меня есть инпут для загрузки файла:

<input type="file" name="logo" accept=".jpg, .jpeg, .png, .gif"/>

В файле компонента функция обновления данных у модели:

function onUpdate() {
    $data = Input::all();

    $model = Model::where('id', $id)->first();

    $model->name = e(array_get($data, 'name'));
    $model->logo = Input::file('logo'); // не загружает

    $model->save();
}

Сам файл связан с моделью через связь attachOne

public $attachOne = [
    'logo' => 'System\Models\File'
];

Данные для полей я передаю через JavaScript

onSave() {
    $.request('onUpdate', {
        files: true,
        data: {
            name: 'string',

            //logo: ??????
        }
    });
}

Как мне загрузить файл для поля logo?

reazzon · 21 июл 2020

Koresh

onSave() {
    $.request('onUpdate', {
        files: true,
        data: {
            name: 'string',
            logo: $("#fileinput").val();
        }
    });
}

Koresh · 21 июл 2020

reazzon так не получается. Модель сохраняется и запускается success после сохранения, но файл изображения не загружается. В таблице system_files записи не добавляются.

Добавляю проверку для валидации: 'logo' => 'nullable|image|max:20000', выдаёт такую ошибку:

X_OCTOBER_ERROR_MESSAGE: "Поле logo должно быть изображением."

У меня нет структуры

<form>
    <input type="file"/>
    <button type="submit"></button>
</form>

У меня просто:

<input type="file" name="logo" accept=".jpg, .jpeg, .png, .gif"/>
<button></button>

В js стоит слушатель который при клике на кнопку запускает ajax запрос.

Koresh · 21 июл 2020

У меня это в ООП стиле вот так прописано:

var myApp = {
    $btnSave: document.querySelector('#save'),
    $inputLogo: document.querySelector('input[name="logo"]'),

    event() {
        this.$btnSave.addEventListener('click', this.onUpdate.bind(this));
    },

    onUpdate() {
        $.request('onUpdate', {
            files: true,
            data: {
                name: 'string',
                logo: this.$inputLogo.value
            }
        });
    },

    init() {
        this.event();
    }
}

myApp.init();

Я по максимуму код сократил, оставил только что касается вопроса. У меня у модели полей под полсотни с самыми разными данными. Всё работает только с загрузкой этого файла не могу разобраться.