Синхронная Drag and drop загрузка файлов, как реализовать?
Добрый день!
У меня есть весьма простая задача: необходимо реализовать форму создания заказа. Эта форма синхронная, то есть мы нажимаем на кнопку и отправляемся POST запросом на сервер. На текущий момент используется обычная input[type="file"], но существует требование реализовать классическую на сегодня систему с прикреплением файлов с помощью drag and drop. При этом менять логику отправки формы нельзя.
Подскажите, каким образом такое можно реализовать?
Stalker_RED, Поясню, что мешает.
1) Человек может добавить один файл. Подумать. Добавить другой файл. Вследствие политики безопасности браузеров мы не можем добавлять к инпуту программно файлы. Решение проблемы - добавление дополнительных инпутов при добавлении файлов? Возможно. Но не точно.
2) Логично, что затащить файл, но не отправлять его до тех пор, пока не нажата кнопка. Можно даже воспользоваться вот таким вот кодом, добавив к нему синхронность, можно даже избавиться от Jquery, это не особые проблемы. Вопрос лишь в том, как подружить это дело со стандартной формой, а не с асинхронной загрузкой на непонятный урл (мне нужно ассайнить файлы к заказу). Мне нужно прикрепление к нативной FormData, а не программное собирание каждого отдельного поля в FormData и затем отправка его со сменой страницы. Если бы хотел сделать так - я бы с легкостью сделал.
Алексей Ярков, пожалуйста, без комментариев. Код свой в той мере, в которой он должен быть - я не копипастил ничего из интернета и, тем более, я никогда бездумно не использую чужой код. Не по причине того, что это не хорошо, а по причине того, что я должен представлять, что в нем происходит или знать, для чего конкретно я буду его использовать, как в случае с open source библиотеками. Я могу использовать тот же moment.js, но никогда не возьму просто код с gist или github или с туториала в интернете, если не буду четко осознавать каждую его строку.
Виктор Евгеньев, да вы не бомбите, я ж шучу ))
По делу. форма синхронная - формулировка чуть более чем странная и наводит на другие мысли, нежели то, о чем написано вами.
В вашем случае вам либо юзать <input type="file" multiple>,
Либо ловить событие перетаскивания файла и выполнять formData.append('file[][filename]', fileBlob).
В следующий раз начните с создания демо в песочнице с минимально воспроизводимым примером кода и описанием КАК должно быть и ЧТО именно не получается.
Алексей Ярков, Про первое - текущий вариант. Не устраивает. Необходимо сделать именно перетягивание. По поводу прикрепления к formData, это нарушит классическую работу приложения - файл будет блобом, а не нормальным файлом, который обрабатывает бэк. Следовательно, потребуется вносить изменения туда, что невозможно. Да, у нас передается массив files[].
Виктор Евгеньев, да не надо выдумывать на ходу )) Ничего не придется в бэкенде менять. Я пример схематично привел. Чуть-чуть гуглинга в эту сторону и все встанет на свои места.
Виктор Евгеньев, в таком случае вариантов два - либо множественные инпуты (и соответствующая поддержка на бэке, но там изменений совсем чуток).
Либо сохранять все в FormData и затем отправлять ajax'ом.
бред какой-то. если инпут мульти, то ВСЕ файлы отправятся,хоть аджаксом. хоть не аджаксом.
что такое синхронность в понятии ТС - огромный и отдельный вопрос)))
я так думаю, у ТС проблемы на стороне сервера, он банально не знает, как там принять файлы, теория чуток хромает...
вобщем или инпут мульти или FileReader() использовать.
alex-1917, Глупенький ответ) тс знает обо всем, что вы сказали. И знает, как принять файлы на сервере. Вопрос был лишь в том, как можно динамически прибавлять инпуты к форме (по итогу, это решение стало самым простым и удобным). А мульти инпут не подходил по ряду параметров.
Виктор Евгеньев, а зачем вы мне отвечаете? мне глубоко на это положить, если честно)))
возможно, вопрос был задан невнятно с набитым ртом..
я мимоходом оставил свое мнение и дальше пошел. а ваш ответ только засоряет мне ленту...)))
