Uppy — это универсальная библиотека JavaScript, которая упрощает процесс добавления функций загрузки файлов в веб-приложения. Одним из распространенных требований при использовании Uppy является возможность динамического изменения конечной точки (URL), куда загружаются изображения. В этой статье мы рассмотрим несколько методов с примерами кода для достижения этой цели.

Метод 1: использование параметров Uppy
Uppy предоставляет параметр meta.uploadUrl, который позволяет динамически устанавливать конечную точку загрузки. Вы можете обновить это значение перед каждой загрузкой, чтобы изменить конечную точку. Вот пример:

const uppy = Uppy({
  meta: {
    uploadUrl: 'https://example.com/upload' // Initial endpoint
  }
});
// Change the endpoint before each upload
uppy.on('file-added', (file) => {
  uppy.setMeta({ uploadUrl: 'https://example.com/upload2' });
});
uppy.on('upload-success', (file, response) => {
  // Handle successful upload
});

Метод 2: изменение заголовков с помощью uppy.addPreProcessor
Вы можете изменить заголовки, отправляемые на сервер, с помощью метода uppy.addPreProcessor. Это позволяет вам динамически изменять конечную точку, изменяя urlв вызове xhr.open. Вот пример:

uppy.addPreProcessor((file, next) => {
  const xhr = new XMLHttpRequest();
  const newEndpoint = 'https://example.com/upload2'; // New endpoint
  xhr.open('POST', newEndpoint, true);
  xhr.setRequestHeader('Authorization', 'Bearer token123'); // Add headers
  xhr.onload = () => {
    // Handle response
    next();
  };
  xhr.send(file.data);
});

Метод 3. Использование события uppy.onBeforeUpload.
Событие uppy.onBeforeUploadзапускается непосредственно перед каждой загрузкой. Вы можете использовать это событие для изменения параметров запроса, включая конечную точку. Вот пример:

uppy.on('before-upload', (file, data) => {
  data.endpoint = 'https://example.com/upload2'; // Change the endpoint
});

В этой статье мы рассмотрели различные методы динамического изменения конечных точек для загрузки изображений в Uppy. Используя параметры, изменяя заголовки или используя события, вы можете адаптировать Uppy в соответствии с вашими конкретными требованиями. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям.