Какие существуют подходы для загрузки файлов к посту, до того как пост создан?

Question

[serikd]

Здравствуйте.
Какие существуют подходы для загрузки файлов к посту, до того как пост создан?
Например - Жмем кнопку добавить новость, загружаем сначала к ней картинки (AJAX), далее пишем сам текст и только после этого жмем кнопку сохранить новость.
Как лучше загружать связанные файлы вообще до того как родитель существует?

Answer 1

[Станислав Меньшов]

Можно еще проще.. Используйте JS FileReader (это встроенное WEB API JavaScript)
https://developer.mozilla.org/ru/docs/Web/API/File...

У вас есть форма отправки , фишка в том, что пользователь может загружать картинки и если передумает отправить пост, картинки не попадут на сервер, пока не будет сабмита. Но он их может видеть.

Процесс очень прост:
1. Пользователь что то пишет (или не пишет)
2. В инпут=file загружает картинку, она через FileReader считывается в base64 (FileReader может и валидировать их mime/types и размер!)
3. Создаете временный тег img ( document.createElement('img').src = ) или input=hidden с хэшом картинки... или и то и другое , чтобы показать ему картинку моментально и затем при отправке сохранить...
4. При нажатии сабмита - сохраняете форму. Данные в базу или куда то... а картинку читаете из потока input
php.net/manual/en/wrappers.data.php (для PHP пример)
5. Создаете новый пустой файл и пишете в него поток

Итого: картинок юзер может накликать хоть 100 штук и думать что они загрузились, но сохраняться они только когда форма обработается

Comments

[serikd]

Спасибо, хорошее решение, возьму на заметку для картинок.
Вопрос касается больше файлов в общем, чем какого то конкретного типа. Видимо мой пример всех запутал.

[Станислав Меньшов]

FileReader API - и есть для файлов. Я привел пример с картинками, вы же можете загружать любые файлы в объект javascript .. Вот именно пример для вашей реализации

www.nickdesteffen.com/blog/file-uploading-over-aja...
- добавляете файлы в буфер при input=file.onchange() а на onsubmit() отправляете и сам пост и все файлы

Answer 2

[Dimonchik]

https://blueimp.github.io/jQuery-File-Upload/

вот это в /tmp на пару часов

пока нет родителя - нет и картинок

Answer 3

[Ptolemy_master]

У нас это организовано так.
Пользователь пишет пост. Захотелось ему вставить картинку, пожалуйста, кликает кнопку, показывается окно выбора файла, файл загрузился --> продолжает писать пост, вставляет картинку снова (картинки можно вставлять по ходу написания), закончил, сохраняет. Все картинки уходят в его личную папку. Позже у нас будет интерфейс доступа ко всем загруженным файлам, но пока так. Файлы грузятся на сервер, через API, который возвращает путь к файлу - эта ссылка просто вставляется в пост (даже до того, как он сохранен).

Один минус при таком подходе - если пользователь вдруг передумал писать пост, а файлы уже загрузились и сидят в его папке. На этот случай можно запускать прогу по расписанию, которая будет проверять, используется ли этот файл или нет, и если нет, то удалять (впрочем, неизвестно, может, пользователь просто загрузил картинки для будущего поста).

Answer 4

[xmoonlight]

Создание поста - это как транзакция: в 3 этапа.
1-й этап: это создание "контейнера" публикации и наполнение всей нужной информацией (текст, картинки, ролики, код и т.д.)
2-й этап: это сохранение текущей актуальной версии и добавление предыдущей к архиву изменений (версионность)
3-й этап: публикация для всех - релиз поста.