Библиотека загрузки файлов Ajax

Содержание

Вопрос или проблема
Ответ или решение
Легковесная библиотека для асинхронной загрузки файлов в Rails 5
Потребности и Проблемы
Рекомендуемые библиотеки
Реализация
Заключение

Вопрос или проблема

Я ищу очень легкую библиотеку для асинхронной загрузки файлов.

Она предназначена для проекта на Rails, который обновляется до Rails 5.

Я пробовал dropzone.js, и он в какой-то степени работал, но не было возможности сообщить, когда загрузка завершена, плюс документация ужасна.

Remotipart не работает в Rails 5. Он нормально загружает, но вызывает ответ контроллера в браузер, что приводит к ошибке “заголовок уже отправлен”, когда я пытаюсь отправить обратно пользовательские данные в браузер.

Когда я говорю “легкий”, я имею в виду, что мне не важны индикаторы прогресса или что-то подобное, как перетаскивание. Не зависеть от jQuery – это огромный плюс. Слишком часто плагины jQuery ломаются, когда Rails обновляет jQuery, поэтому я избегаю их, как чумы.

Не уверен, удовлетворяет ли это вашим критериям “легкости”, но оно без jQuery 😉

http://fineuploader.com/

Пожалуйста, дайте знать, если это не подходит

Документация для этого ужасна, но у меня есть небольшой загрузчик файлов только на JavaScript, который я написал и использую: https://github.com/gabe3886/charon

Он использует стандартные поля для загрузки файлов, но вы можете добавлять дополнительный функционал по мере необходимости с помощью обратных вызовов на события XMLHttpRequest

Ответ или решение

Легковесная библиотека для асинхронной загрузки файлов в Rails 5

Если вы ищете простое и легковесное решение для асинхронной загрузки файлов в вашем проекте на Rails 5, существует несколько вариантов, которые могут удовлетворить ваши требования.

Потребности и Проблемы

Основные требования, которые вы обозначили:

Легковесность — отсутствие лишних функциональных возможностей, таких как индикаторы загрузки или перетаскивание файлов.
Независимость от jQuery — избежание возможных конфликтов из-за обновлений jQuery.
Простота в использовании — недостаточно удовлетворительная документация у существующих опций.

Ваша попытка использовать Dropzone.js не привела к желаемым результатам, так как не было возможности отследить завершение загрузки. Также, возникли проблемы с Remotipart, которое давало ошибку «заголовок уже отправлен», когда вы пытались вернуть пользовательские данные обратно.

Реализация

Простой пример реализации загрузки файла с помощью Charon:

<input type="file" id="fileUpload" />
<button id="uploadButton">Загрузить</button>

<script>
  document.getElementById('uploadButton').addEventListener('click', function () {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/your/upload/endpoint', true);
    xhr.setRequestHeader('X-CSRF-Token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

    xhr.onload = function () {
      if (xhr.status === 200) {
        // Обработка успешного завершения загрузки
        console.log('Файл загружен успешно:', xhr.responseText);
      } else {
        console.error('Ошибка загрузки:', xhr.statusText);
      }
    };

    var formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);
  });
</script>

Заключение

Для вашего проекта на Rails 5 подойдут обе предложенные библиотеки, но выбор лучше делать в зависимости от конкретных потребностей и сложности ваших задач. Fine Uploader предоставляет больше возможностей, однако Charon предлагает простоту и минимализм. Хорошее решение будет зависеть от того, готовы ли вы управляться с кастомизацией и настроить обработку событий для безошибочной обработки загрузки.

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