Using Multiple Uploader Plugins

Uppy
1

Hello, I have been going through the docs for some time, and its kinda hard to archive, and I don’t see lot of people asking about the things, that I have been looking for. anyways straight to the point.

CF -> cloudflare.

Am using CF stream’s + CF images as for my media contents, and using Uppy dashboard.

and I want to use Tus in specific conditions, and also use Xhr on specific conditions only.

So, like using two Plugins in same instance is not going as expected.

//core-tsx
 const [ref] = useState(
    new Uppy({
      id: "xx-global-uploader---",
      debug: false,
    })
      .use(XHRUpload, {
        endpoint: endpoints.uploader("/uploads/v1/sign/image"),
        formData: true,
        fieldName: "file",
      })
      .use(Tus, {
        addRequestId: true,
      })
  );
  useUppyEvent(ref, "files-added", (files) =>
    handleFilesAddedEvents(files, ref, props, (message) => {
      toast.error(message);
    })
  );

There are multiple Plugins being used, and how do i stop one being used for specific files?

lets say
image || Video < 50MB → Xhr
video > 50MB → Tus

I have tried This way of handling things but, it works, and uploads the Images and videos to specified endpoints, but throw’s error because one failed.


export function handleFilesAddedEvents(
  files: UppyFile<Meta, Record<string, never>>[],
  uppy: Uppy<Meta, Record<string, never>>,
  meta: TMetadatas,
  errorCb: (message: string) => void
) {
  files.map((item) => {
    let isVideo = allowedVideoTypes.includes(item.type);
    let isImage = allowedImageTypes.includes(item.type);
    let isUploadable = isVideo || isImage;

    if (!isUploadable) {
      errorCb(`${item.extension} is not supported.`);
      uppy.removeFile(item.id);
    }

    if (isVideo) {
      uppy.setFileState(item.id, {
        xhrUpload: undefined,
        tus: {
          endpoint: endpoints.uploader(
            `/uploads/v1/sign/video?relId=${meta.relationId}&visibility=${meta.visibility}`
          ),
          chunkSize: 150 * 1024 * 1024,
          retryDelays: [0, 3000, 5000, 10000, 20000],
          onBeforeRequest: (req) => {
            return new Promise((resolve) => {
              let xhr: XMLHttpRequest = req.getUnderlyingObject();
              if (req.getURL().includes(import.meta.env.VITE_BACKEND_URL)) {
                xhr.withCredentials = true;
                let token = sessionStorage.getItem("authToken");
                if (token) {
                  xhr.setRequestHeader("Authorization", token);
                }
              } else {
                xhr.withCredentials = false;
              }
              resolve(() => {});
            });
          },
        },
      });
      return;
    }
    uppy.setFileState(item.id, {
      xhrUpload: {
        endpoint: endpoints.uploader("/uploads/v1/sign/image"),
        formData: true,
        method: "POST",
        fieldName: "file",
        onBeforeRequest(xhr) {
          if (files[0] && allowedVideoTypes.includes(files[0].type)) {
            console.log("I have been called?");
            xhr.abort();
            return;
          }
          let token = sessionStorage.getItem("authToken");
          if (token) {
            xhr.setRequestHeader("Authorization", token);
          }
        },
      },
    });
  });
}

b.w never mind about auth, its handled the way it is because of some domain issue that needs to be resolved in the other side.
Thanks you for reading Until the end <3

2

Hi, unfortunately using multiple uploaders at the same time is not supported.

3

Okay, Thank you for your response and time. is there a solution for this? or Should I create two separate instance and manage its upload based on the type?

4

I’m afraid that’s probably what you’d need to do yes.