Drag and Drop для FormIt и AjaxForm

Доброго времени суток!

Возникла необходимость релизовать прикрепление файлов к форме обратной связи методом «Drag and Drop», кто-нибудь реализовывал данную задачу?
Alexandr
Alexandr
24 июня 2020, 19:07
modx.pro
2 000

Комментарии: 17

SEQUEL.ONE
SEQUEL.ONE
25 июня 2020, 00:53
Тоже самое что и с прикреплением файла через кнопку Обзор, только с использованием плагина для jQuery
Александр Мельник
Александр Мельник
25 июня 2020, 10:16
input type file как был в форме так и останется.
просто его внешний вид подменяется при помощи сторонних плагинов, которые и реализуют эффект «забрасывания файла»
я пользуюсь вот таким www.dropzonejs.com/
    Alexandr
    Alexandr
    25 июня 2020, 10:27
    Подменить я подменил, но прикрепление файлов почему-то не происходит к input type file.
      Alexandr
      Alexandr
      25 июня 2020, 13:48
      Пробую с dropzonejs, та же самая история. Файл «крепится», а письмо пустое. Без dropzonejs, просто с input file, файлы приходят на почту.

      <script src="assets/js/dropzone.js"></script>
<link rel="stylesheet" href="assets/css/dropzone.css">
<form id="contactForm" method="post" action="[[~[[*id]]]]" enctype="multipart/form-data" class="dropzone">
    <input id="individual_name" type="text" class="input-text" name="individual_name" placeholder="Имя*" value="[[!+fi.individual_name]]">
    <input id="individual_phone" type="text" class="input-text" name="individual_phone" placeholder="Телефон*" value="[[!+fi.individual_phone]]">
    <input id="individual_mail" type="email" class="input-text" name="individual_mail" placeholder="E-mail*" value="[[!+fi.individual_mail]]">
    <div class="fallback">
    <input name="file" type="file" multiple />
    </div>
    <input id="contact_send" class="buttom btn-lg" name="send" type="submit" value="Отправить" disabled>
</form>
        Дмитрий
        Дмитрий
        01 марта 2021, 20:25
        Здравствуйте, больше не разбиралить как прикрутить dropzonejs и почемц не работает?
    Максим
    Максим
    26 июня 2020, 18:36
    Если вы пытаетесь установить атрибут value тегу input с типом файл, то это не допустимо по соображениям безопасности. А при логике описанной в комментариях выше, вам просто нужно сформировать корректные данные и отправить их на сервер и уже там их ловить и отправлять ручками с атачами либо формитом (только я хз как для формита сформировать данные с файлом или файломи).
      Alexandr
      Alexandr
      29 июня 2020, 17:18
      Вот и я не могу понять. Комментаторы выше сообщают что у них реализовано с помощью «плагинов» или скриптов, но у меня предложенные варианты не заработали. Если бы кто-нибудь выложил свой рабочий вариант для примера посмотреть.
        Максим
        Максим
        08 июля 2020, 13:09
        Готовый пример есть в компоненте Tickets.
      Alexandr
      Alexandr
      08 июля 2020, 13:30
      Решил пойти более простым путём и купил компонент YandexDiskUploader, но как оказалось это решение тоже не заработало. Проблема возможно в хостере.

      Файлы вроде загружаются на ЯндексДиск, но весят 0 б и не открываются т.е. битые. Запросы PUT хостер разблокировал, но файлы так и не загружаются на ЯД.

      Ни у кого небыло такой проблемы?
        Alexandr
        Alexandr
        15 июля 2020, 16:25
        Нашёл решение в виде плагина YandexDiskUploader с сайта modstore.pro

        Была проблема с загрузкой файлов на ЯД, они загружались, но весили 0, помогло добавление пары строк в плагин «yandexDiskUploader»

        if (isset($response['href']) && $response['href']) {
   $ch = curl_init($response['href']);
   curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
   curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
   curl_setopt($ch, CURLOPT_INFILE, fopen($_FILES[$inputId]['tmp_name'], 'r'));
   <u>curl_setopt($ch, CURLOPT_INFILESIZE, filesize($_FILES[$inputId]['tmp_name']));</u>
   curl_setopt($ch, CURLOPT_UPLOAD, true);
   curl_setopt($ch, CURLOPT_POST, false);
   <u>curl_setopt($ch, CURLOPT_PUT, true);</u>
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   curl_exec($ch);
   curl_close($ch);
}

        А именно добавил эти строки:
        curl_setopt($ch, CURLOPT_INFILESIZE, filesize($_FILES[$inputId]['tmp_name']));
curl_setopt($ch, CURLOPT_PUT, true);

        Всем спасибо кто дал советы и помогал найти решение!
          Дмитрий
          Дмитрий
          22 марта 2022, 22:18
          А можно твой телеграм в лс?
            Alexandr
            Alexandr
            23 марта 2022, 08:40
            Вам не возможно в личку написать, она у вас закрыта.
        Алексей
        Алексей
        16 июля 2020, 15:34
        И Вам спасибо, искал похожее решение для своего проекта.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          17