Как отключить автоматическую отправку файла после перетаскивания в форму?

У uikit3 есть пример формы для перетаскивания файлов, но при этом сразу выполняется POST запрос с файлом.
  • 23 сентября 2023 г. 20:57
Ответы на вопрос 2
Чтобы отключить автоматическую отправку файла после перетаскивания в форму в uikit3, вам нужно отменить стандартное поведение с помощью JavaScript.

Вот пример кода, который позволит вам отключить автоматическую отправку файла:

```html
<!-- HTML -->
<form id="myForm" action="/upload" method="POST" enctype="multipart/form-data">
  <div class="uk-placeholder uk-text-center">
    <span uk-icon="icon: cloud-upload"></span>
    <span class="uk-text-middle">Перетащите сюда файл или</span>
    <div uk-form-custom>
      <input type="file" id="fileInput" name="file">
      <span class="uk-link">выберите его</span>
    </div>
  </div>
  <progress id="progressBar" class="uk-progress" value="0" max="100" hidden></progress>
  <button id="submitButton" class="uk-button uk-button-default" type="submit">Отправить</button>
</form>
```

```javascript
// JavaScript
document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('myForm');
  var fileInput = document.getElementById('fileInput');

  // Отменяем событие "drop" для формы
  form.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

  // Отменяем событие "dragover" для формы
  form.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

  // Обрабатываем событие "change" для поля ввода файла
  fileInput.addEventListener('change', function(e) {
    e.preventDefault();
    e.stopPropagation();
  });
});
```

Этот код отменяет события "drop" и "dragover" для формы, а также событие "change" для поля ввода файла, чтобы предотвратить автоматическую отправку файла. Теперь вы можете добавить свою логику обработки файла и отправить его вручную при необходимости.
Тебе НЕ нужно отключать автозагрузку файлов. Просто создай на странице две формы. Первая форма будет загружать файлы в централизованное хранилище и автоматически добавлять полученную ссылку к форме с сообщением. Вторая форма должна иметь возможность удалить файл как из сообщения, так и из хранилища, нажав на крестик. Важно помнить, что сообщение должно содержать только ссылки на файлы, а не сами файлы. Попробуй вспомнить, как реализованы формы обратной связи на популярных сайтах, где медиа-файлы загружаются на сервер еще до отправки письма - это правильный подход.
Похожие вопросы