Drag and Drop для FormIt и AjaxForm

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

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

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

SEQUEL.ONE
25 июня 2020, 00:53
0
Тоже самое что и с прикреплением файла через кнопку Обзор, только с использованием плагина для jQuery
Александр Мельник
25 июня 2020, 10:16
0
input type file как был в форме так и останется.
просто его внешний вид подменяется при помощи сторонних плагинов, которые и реализуют эффект «забрасывания файла»
я пользуюсь вот таким www.dropzonejs.com/
    Alexandr
    25 июня 2020, 10:27
    0
    Подменить я подменил, но прикрепление файлов почему-то не происходит к input type file.
      Alexandr
      25 июня 2020, 13:48
      0
      Пробую с 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>
    Максим
    26 июня 2020, 18:36
    0
    Если вы пытаетесь установить атрибут value тегу input с типом файл, то это не допустимо по соображениям безопасности. А при логике описанной в комментариях выше, вам просто нужно сформировать корректные данные и отправить их на сервер и уже там их ловить и отправлять ручками с атачами либо формитом (только я хз как для формита сформировать данные с файлом или файломи).
      Alexandr
      29 июня 2020, 17:18
      0
      Вот и я не могу понять. Комментаторы выше сообщают что у них реализовано с помощью «плагинов» или скриптов, но у меня предложенные варианты не заработали. Если бы кто-нибудь выложил свой рабочий вариант для примера посмотреть.
        Максим
        08 июля 2020, 13:09
        0
        Готовый пример есть в компоненте Tickets.
      Alexandr
      08 июля 2020, 13:30
      0
      Решил пойти более простым путём и купил компонент YandexDiskUploader, но как оказалось это решение тоже не заработало. Проблема возможно в хостере.

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

      Ни у кого небыло такой проблемы?
        Alexandr
        15 июля 2020, 16:25
        0
        Нашёл решение в виде плагина 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);

        Всем спасибо кто дал советы и помогал найти решение!
          Алексей
          16 июля 2020, 15:34
          0
          И Вам спасибо, искал похожее решение для своего проекта.
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            13