# Using Multiple Uploader Plugins

**URL:** <https://community.transloadit.com/t/using-multiple-uploader-plugins/17347>\
**Category:** Uppy\
**Created:** [November 9, 2024, 1:47am UTC](https://community.transloadit.com/t/using-multiple-uploader-plugins/17347 "2024-11-09T01:47:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![muadpn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/muadpn/32/1256_2.png) [@muadpn](https://community.transloadit.com/u/muadpn)\
**Post date:** [November 9, 2024, 1:47am UTC](https://community.transloadit.com/t/using-multiple-uploader-plugins/17347/1 "2024-11-09T01:47:58Z")

</div>

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.

```auto
//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.

```auto

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

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [November 11, 2024, 8:59am UTC](https://community.transloadit.com/t/using-multiple-uploader-plugins/17347/2 "2024-11-11T08:59:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muadpn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/muadpn/32/1256_2.png) [@muadpn](https://community.transloadit.com/u/muadpn)\
**Post date:** [November 11, 2024, 9:20am UTC](https://community.transloadit.com/t/using-multiple-uploader-plugins/17347/3 "2024-11-11T09:20:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [November 11, 2024, 9:33am UTC](https://community.transloadit.com/t/using-multiple-uploader-plugins/17347/4 "2024-11-11T09:33:01Z")

</div>

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