Как сделать drop-zone для мульти загрузки картинок с предпросмотром?

Question

[Alex Mirgorodskiy]

Дорогие братья тостеры, HELP! Уже пол недели взрываю мозг и интернет в поиске решения загрузки картинок, уже руки опускаются, судя по всем статьям что я перерыл, это либо невозможно)) либо коряво и не так как надо, я далеко не спец, даже не Junior, я вообще дизинер) Так что вопрос к спецам)

Цель:

Есть форма


Отправляется через ActiveForm Синхронно через post();

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



Использования стандартных Multipli Инпутов не позволяют манипулировать загружаемыми файлами, залил один не нужный файл, приходиться очищать форму полностью и перезаливать заново.

Использования Ajax тоже не до конца подходит, так как нужно сначала нажать кнопку загрузить на сервер, а потом только отправить всю форму, мне нужно чтоб сначала сохранилась форма с данными, а потом уже к известному id модели привязать созданные на серваке картинки if ($model->save());

Нашел урок Максима Тимофеева, почти то что надо, он там использует расширение Катрик, но там весь урок с операцией Update, когда уже есть модель + отправка формы и картинок отдельно.

Максим если вы тут, не подскажите реально ли в этом расширении привязать Drop-zone к форме, сохраняя весь его функционал? Ajax отправка не подходит, так как конфликтует одновременная Post отправка данных формы, и отправка картинок AJAX.

Если кто реализовывал, что использовали, поделитесь плз опытом с начинающим програмером.
Расширения, статьи, способы, очень выручите! Заранее спасибо)

Comments

[Модератор]

Alex Mirgorodskiy дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама.

[SlimSavernake]

через ajax можно загрузить файлы во временную папку, запомнить имена в сессию, а после сохранения модели привязать их.

[Alex Mirgorodskiy]

SlimSavernake, Да что-то пытался такое делать, но мне нужно одним действием отправить и картинки и форму, в этом случаи AJAX post конфликтует с формой которая тоже постом отправляет, а как писали на кибер форуме POST and GET is BAD) Был еще вариант их сразу во временную папку грузить после попадания в input[file], но как их потом удалять от туда?

Answer 1

[Максим Тимофеев]

1. С картиком это реализуется на раз два, разницы с update не будет особо. Тем более, что у картика есть примеры с тем что Вам надо
2. Для yii2 есть виджет и для dropZone: https://github.com/perminder-klair/yii2-dropzone
Учитесь искать информацию, например Вы знаете, что надо yii2 и надо dropzone, открываем github и тупо вбиваем в поиск https://github.com/search?utf8=✓&q=yii2+dropzone&type=

Comments

[Alex Mirgorodskiy]

Да мне тоже показалась что у картика есть такая возможность, но добавляя код из примера

// Multiple file selection with both text and image preview
// Note for multiple file upload, the attribute name must be appended with 
// `[]` for PHP to be able to read an array of files
echo $form->field($model, 'upload_files[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
    'pluginOptions' => ['previewFileType' => 'any']
]);

Пропадает Drop-zone(Так как не указан 'uploadUrl' => Url::to(['/site/file-upload'])) и возможность удалять картинки по одной, только все три сразу(Как у обычных multipli). Ну а если добавить Урл, дроп зона работает, но только через AJAX, и не через главный submit загружает фото с формой, а через кнопочку загрузить отдельными Post запросами по одному, или я чего-то не до глядел? Как я понял файлы загружаются по одному AJAX-ом(отдельно от формы) или всей пачкой вместе с формой, но без возможности удалять по одному еще не загруженные файлы. Вот я и ищу ответ, можно как-то по человечески это сделать, или тупо смириться и делать раздельные формы через PJAX. (Заполните инфу)

if ($model->save() ) {

$model_id = $model->id;

return $this->renderAjax('_registration_img',[
                      'model_id' => $model_id,
                  ]);
}

Ну а во второй форме уже делать кучу ненужных действий

(Выберите картинки)
if (Yii::$app->request->post()) {

...Сохраняем картинку, привязываем к пользователю по переданному id
Если нет, удаляем пользователя(Т.к без картинок он не нужен)

Как то это коряво и нагрузки куча лишней, вот я и думаю как на клиенте отфильтровать загружаемые картинки, а после отправить их с формой, если она сохранилась сохранить на сервер и привязывать, если я где-то затупил и не увидел решения в доках, просьба ткнуть носом) Если нет, то все равно спасибо что уделили время)

[Максим Тимофеев]

Alex Mirgorodskiy, Второй виджет подошел?

[Alex Mirgorodskiy]

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

[Alex Mirgorodskiy]

Максим Тимофеев, Увы дроп зона для yii2 не удаляет добавленные в нее картинки, только принимает и выводит, даже нет возможности ее полностью очистить(Больше ничего не подскажите?

[Максим Тимофеев]

Alex Mirgorodskiy, Вы документацию читали? А именно www.dropzonejs.com/#usage
Что же тогда - "addRemoveLinks"?
Там очень много возможностей, как и у картика. Но это не лежит на поверхности. Надо сесть и потрать день на изучение того или иного плагина. Попробовать, поиграться с разными функциями и потом уже использовать для реального проекта. Не ищете готовых решений, ищите инструменты для создания решения.
С тем же картиком можно иметь 'uploadUrl', что мешает сохранять файлы с произвольным названием и возвращать в виджет, по событию загрузки формировать hidden input-ы c названиями и отправлять вместе с формой?

[Alex Mirgorodskiy]

Максим Тимофеев, Спасибо большое) Да наверное так и сделаю) просто не сильно еще научился работать с документациями, поверхность вижу, а скрытые возможности нет( нужно как-то это исправлять + английский технический подтягивать т.к почти все толковые документации на нем( Еще раз спасибо за уделенное время! Уроки у вас классные! Продолжайте в том же духе!)

Answer 2

[ThunderCat]

Как используя js/jq загрузить в input file файлы не за 1 раз, а за несколько? я решил так, возможно и вам подойдет.