Как создать пользовательский источник для загрузки файлов с помощью Angular

Большинство приложений JavaScript в какой-то момент будут работать с загрузкой файлов, созданных с учетом простой, но надежной функциональности. Загрузка файлов с помощью Angular должна быть совместима с устройствами и безопасна при передаче пользовательских данных.

В отличие от решений типа plug-and-play, API загрузки файлов Angular обеспечивает гораздо большее взаимодействие с веб-формами и награждает пользователей множеством богатых возможностей.

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

Таким образом, загрузка файлов с помощью Angular решает эту проблему, добавляя динамические компоненты к кнопке «Выбрать файл» и тексту имени файла.

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

API на стороне сервера может оказаться правильным решением, так как для разработки элемента загрузки файлов нужно сначала создать клиентский HTTP-запрос.

Что такое пользовательский источник для загрузки файлов в Angular

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

const customSource = {
  label: 'LABEL_IN_MENU',
  name: 'CUSTOM_SOURCE_KEY_NAME',
  icon: 'ICON.svg',
  mounted: (element, actions) => {
  },
  unmounted: (element) => {
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Далее обратитесь к объекту customSource из кода конфигурации, где различные источники определяют ключ API, например, локальная файловая система.

Параметр maxFiles позволяет ограничить количество загружаемых файлов за сеанс. Вы также можете переключать параметры из меню File Picker для вызова методов после монтирования представления.

const apikey = YOUR_APIKEY;
  const client = filestack.init(apikey);
  const options = {
    fromSources: [ 'local_file_system', customSource, 'googledrive', 'unsplash', 'facebook', 'instagram'],
    maxFiles: 20,
    uploadInBackground: false,
    onUploadDone: (res) => console.log(res),
  };
  const picker = client.picker(options);
  picker.open();
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Говоря о методах, следует отметить, что они принимают заданные параметры, показанные ниже:

  • rawFile — actions.addRawFile(fileObj) захватывает содержимое необработанного файла и переносит вас в сводное представление.

  • customFileObj — actions.addCustomFile(customFileObj) добавляет объект пользовательского файла, который включает URL, тип файла, отображаемое имя и необязательные заголовки

  • fetchAndAddURL — actions.fetchAndAddUrl(url, headers) собирает метаданные URL и добавляет их в очередь выгрузки.

  • metadata — actions.metadata(url, headers) извлекает данные файла из URL-пути в формате JSON с именем файла, ссылкой, миниатюрой, датой изменения и т.д.

  • getFile — actions.getFile(uuid) возвращает преобразованный файл, готовый к загрузке по UUID.

Как сделать плагин пользовательского источника, поддерживающий загрузку файлов с помощью Angular

Составными частями плагина Custom Source являются название, ярлык, иконка, а также действия монтирования и размонтирования. Чтобы проиллюстрировать, как это работает, давайте попробуем представить список файлов в загрузчике.

Во-первых, для этого образца списка создайте массив словарей, чтобы включить имя миниатюры и URL в sourceURLsArray. Следующим шагом будет определение объекта myNewCustomSource, который должен иметь иконку HTML.

Внутри атрибута mounted создается новый список для представления плагина путем итерации по каждому элементу list/span, прикрепления миниатюры и добавления их в список.

mounted: (element, actions) => {
        // create new list for plugin view
        const list = document.createElement('ul');
        list.setAttribute('class', 'fsp-picker--custom-source');
        sourceUrlsArray.forEach((element, idx) => {
            // add list element
            const li = document.createElement("li");
            const span = document.createElement("span");
            // create thumbnail view
            const thumb = document.createElement("img");
            thumb.setAttribute("src", element.url);
            thumb.width = "50";
            thumb.height = "50";
            // append elements to list
            li.appendChild(thumb);
            span.innerHTML = `${element.name}`;
            li.appendChild(span);
            list.appendChild(li);
        });
        // append list to picker placeholder
        element.appendChild(list);
    },
Вход в полноэкранный режим Выход из полноэкранного режима

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

Какие утилиты лучше всего использовать для загрузки файлов с помощью Angular

Загрузка файлов в Angular.js выиграет от наличия функции перетаскивания, которая поможет пользователям перемещать файлы с накопителя в другое место.

Пользователи также должны иметь возможность переносить элементы между вкладками браузера или изменять расположение файлов.

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

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

Что еще более важно, защитите API загрузки файлов от рисков безопасности, особенно при работе с пользовательским контентом, где вероятна кража данных.

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

Кроме того, используя Angular SDK, вы можете упростить процесс конвертации файлов. Иногда пользователи должны предоставлять документы в формате PDF или DOCX, поэтому конвертер будет полезен.

Что касается загрузки изображений, то конвертер PNG в JPG позволит сжать файлы до приемлемого размера. Подумайте об интеграции этой основной функции через API Processing Engine.

Решение для загрузки файлов в Angular

Сторонние сервисы, такие как этот, подключены к нескольким API на стороне сервера и размещают свои SDK для редакторов изображений.

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

В большей степени Angular file upload SDK позволяет копировать и вставлять файл прямо с компьютера.

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

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

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

Также опубликовано здесь.

Оцените статью
devanswers.ru
Добавить комментарий