# Uppy with no UX

**URL:** <https://community.transloadit.com/t/uppy-with-no-ux/17341>\
**Category:** Uppy\
**Created:** [November 6, 2024, 10:05pm UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341 "2024-11-06T22:05:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rodneyt](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/rodneyt/32/558_2.png) [@rodneyt](https://community.transloadit.com/u/rodneyt)\
**Post date:** [November 6, 2024, 10:05pm UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341/1 "2024-11-06T22:05:12Z")

</div>

Hello everyone,

I am updating an existing web app that has a well defined user experience (UX) for file uploads. I would like to use Uppy but without using any Uppy UX, i.e. just hook into it via javascript API.

Is this possible? Easy? Are there any examples for this type of usage?

Thank you for your thoughts.

Rod

---

<div class="post-metadata">

**Author:** ![rodneyt](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/rodneyt/32/558_2.png) [@rodneyt](https://community.transloadit.com/u/rodneyt)\
**Post date:** [November 6, 2024, 10:07pm UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341/2 "2024-11-06T22:07:14Z")

</div>

Noting discussion at this issue: [Using uppy without the UI · Issue #213 · transloadit/uppy · GitHub](https://github.com/transloadit/uppy/issues/213)

And [Uppy without dashboard or fileinput](https://community.transloadit.com/t/uppy-without-dashboard-or-fileinput/14955)

---

<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 7, 2024, 8:19am UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341/3 "2024-11-07T08:19:09Z")

</div>

I still want to make a proper example but it’s very much possible yes.

If you use React, I recommend using the hooks `useUppyState` and `useUppyEvent`.

If you use vanilla JS, probably [event](https://uppy.io/docs/uppy/#events) driven would work best for you.

---

<div class="post-metadata">

**Author:** ![rodneyt](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/rodneyt/32/558_2.png) [@rodneyt](https://community.transloadit.com/u/rodneyt)\
**Post date:** [November 10, 2024, 8:53am UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341/4 "2024-11-10T08:53:41Z")

</div>

I created a demo repo

> **[GitHub - rodneytamblyn/uppyTransloaditDemo: Upload image or video using Uppy, Tus and...](https://github.com/rodneytamblyn/uppyTransloaditDemo)**
>
> Upload image or video using Uppy, Tus and Transloadit. Server side signing (NodeJS, Express). Supports resumable uploading. Illustrates saving (via Transloadit) to Wasabi S3 bucket (easily changeable to other services using TL robots in assembly template)

Review, commentary, feedback, improvements and suggestions from experienced Uppy and Transloadit users would be most welcome.

# Uppy Transloadit NoUX

This project illustrates how to upload files using Uppy:

- this example shows how to use Uppy without the Dashboard UX for situations where you want to integrate Uppy with an existing app or using your own UI
- uploads go to Transloadit, which can save your files on to storage of your choice, the example is configured for Wasabi
- supports multi-part resumable uploads with signing implemented on backend using NodeJS/Express
- illustrates how to upload images pasted from clipboard to a content editable field

---

<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:49am UTC](https://community.transloadit.com/t/uppy-with-no-ux/17341/5 "2024-11-11T08:49:21Z")

</div>

If you prefer the vanilla JS/HTML route, then this looks good yes. Thanks for sharing.