pingdotgg / uploadthing

File uploads for modern web devs

A thing for uploading files.

Home | Docs | Roadmap

Table of Contents

This repository contains the packages, docs and examples for uploadthing

• Next.js App Directory - A simple example using the Next.js app directory
• Next.js Pages Directory - A simple example using the Next.js pages directory
• SolidStart SSR - A simple example using SSR with SolidStart
• Docs Site - Source for docs.uploadthing.com
• React Package - @uploadthing/react - the components and hooks for using uploadthing in your React projects
• Solid Package - @uploadthing/solid - the components and hooks for using uploadthing in your Solid projects
• uploadthing - server/client stuff (framework agnostic)

Report an Issue

Contributing

All UploadThing SDKs are open source and we welcome contributions from the community.

Note

If your change also requires infrastructure changes, please reach out and we can work together to make the necessary changes on our end.

1. Fork and clone the repository
2. Ensure you have the LTS version of Node.js installed, as well as the latest version of pnpm.
3. Install the project dependencies by running pnpm install.
4. Implement your changes, as well as any documentation or tests that are required.
5. Create a changeset for your changes by running pnpm changeset.
6. Open a pull request with your changes and changeset.

uploadthing's Issues

[Bug]: Landing Page Doesn't Look Right on Smaller Screens

What happened?

On smaller screen sizes the banner text isn't (vertically) centered and the background gradient doesn't cover the whole screen:

I created a fork so I could submit a PR but couldn't find the code for the site; it would seem that it doesn't live here.

I realize that this may not be a high priority issue, but thought it necessary to bring it to your attention, in case you weren't aware of it.

What did you expect to happen?

Ummm, for the banner text to be vertically centered and the background gradient to cover the entire background I guess? :)

Version

N/A

Reproduction Steps

Visit uploadthing's home page. Hit ctrl + to simulate a smaller screen.

Reproduction Repository

N/A

Relevant log output

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct

ERROR! Failed to get presigned URLs

Filetype is set to blob and I tried uploading a PNG image. Not sure if this is a bug, or just wrong config on my end for localhost.

[Docs] Code snippets with title bars

I really like how the Next docs do this

Nextra builds sporadically fail on Vercel

LOGS

[14:21:20.502] Running build in San Francisco, USA (West) – sfo1
[14:21:20.569] Cloning github.com/pingdotgg/uploadthing (Branch: theo/stream-fixes, Commit: c1f6068)
[14:21:21.394] Cloning completed: 824.266ms
[14:21:23.948] Restored build cache
[14:21:23.978] Running "vercel build"
[14:21:24.419] Vercel CLI 29.1.1
[14:21:24.740] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8...
[14:21:24.744] Running "install" command: `pnpm install`...
[14:21:25.286] Scope: all 8 workspace projects
[14:21:25.535] ..                                       | Progress: resolved 1, reused 0, downloaded 0, added 0
[14:21:25.609] ..                                       |   +4   -4 +-
[14:21:26.595] ..                                       | Progress: resolved 4, reused 0, downloaded 4, added 4, done
[14:21:26.707] 
[14:21:26.709] Done in 1.9s
[14:21:26.725] Detected Next.js version: 13.4.1
[14:21:26.739] Running "turbo run build"
[14:21:27.034] • Packages in scope: docs
[14:21:27.034] • Running build in 1 packages
[14:21:27.034] • Remote caching enabled
[14:21:27.448] docs:build: cache miss, executing cb1ce34bb09d6835
[14:21:27.958] docs:build: 
[14:21:27.958] docs:build: > docs@ build /vercel/path0/docs
[14:21:27.958] docs:build: > next build
[14:21:27.958] docs:build: 
[14:21:28.513] docs:build: - info Linting and checking validity of types...
[14:21:30.288] docs:build: - info Creating an optimized production build...
[14:21:31.904] docs:build: [nextra] The repository is shallow cloned, so the latest modified time will not be presented. Set the VERCEL_DEEP_CLONE=true environment variable to enable deep cloning.
[14:21:40.627] docs:build: - info Compiled successfully
[14:21:40.636] docs:build: - info Collecting page data...
[14:21:41.008] docs:build: unhandledRejection Error: Cannot find module '../../[email protected][email protected][email protected]/node_modules/next/dist/shared/lib/constants.js'
[14:21:41.008] docs:build: Require stack:
[14:21:41.008] docs:build: - /vercel/path0/docs/.next/server/pages/_document.js
[14:21:41.008] docs:build: - /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require.js
[14:21:41.009] docs:build: - /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js
[14:21:41.009] docs:build: - /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/utils.js
[14:21:41.009] docs:build: - /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/worker.js
[14:21:41.009] docs:build: - /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js
[14:21:41.009] docs:build:     at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
[14:21:41.010] docs:build:     at /vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:180:36
[14:21:41.010] docs:build:     at Module._load (node:internal/modules/cjs/loader:920:27)
[14:21:41.010] docs:build:     at Module.require (node:internal/modules/cjs/loader:1141:19)
[14:21:41.010] docs:build:     at require (node:internal/modules/cjs/helpers:110:18)
[14:21:41.010] docs:build:     at 4038 (/vercel/path0/docs/.next/server/pages/_document.js:895:18)
[14:21:41.010] docs:build:     at __webpack_require__ (/vercel/path0/docs/.next/server/webpack-runtime.js:25:43)
[14:21:41.013] docs:build:     at 3515 (/vercel/path0/docs/.next/server/pages/_document.js:43:20)
[14:21:41.014] docs:build:     at __webpack_require__ (/vercel/path0/docs/.next/server/webpack-runtime.js:25:43)
[14:21:41.015] docs:build:     at __webpack_exec__ (/vercel/path0/docs/.next/server/pages/_document.js:926:39) {
[14:21:41.015] docs:build:   type: 'Error',
[14:21:41.015] docs:build:   code: 'MODULE_NOT_FOUND',
[14:21:41.015] docs:build:   requireStack: [
[14:21:41.015] docs:build:     '/vercel/path0/docs/.next/server/pages/_document.js',
[14:21:41.015] docs:build:     '/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require.js',
[14:21:41.016] docs:build:     '/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/load-components.js',
[14:21:41.016] docs:build:     '/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/utils.js',
[14:21:41.016] docs:build:     '/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/worker.js',
[14:21:41.025] docs:build:     '/vercel/path0/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js'
[14:21:41.025] docs:build:   ]
[14:21:41.026] docs:build: }
[14:21:41.061] docs:build:  ELIFECYCLE  Command failed with exit code 1.
[14:21:41.076] docs:build: ERROR: command finished with error: command (/vercel/path0/docs) pnpm run build exited (1)
[14:21:41.077] command (/vercel/path0/docs) pnpm run build exited (1)
[14:21:41.077] 
[14:21:41.077]   Tasks:    0 successful, 1 total
[14:21:41.077]  Cached:    0 cached, 1 total
[14:21:41.077]    Time:    14.301s 
[14:21:41.077] Summary:    /vercel/path0/.turbo/runs/2PcQ37IR7uGBm6Xx18ZdWpmvDiO.json
[14:21:41.077] 
[14:21:41.077]  ERROR  run failed: command  exited (1)
[14:21:41.091] Error: Command "turbo run build" exited with 1
[14:21:41.381] Deployment completed
[14:21:41.334] BUILD_UTILS_SPAWN_1: Command "turbo run build" exited with 1

[Bug]: UploadDropzone does not clear files after completed uplad

What happened?

After uploading files via the UploadDropzone component, it keeps the Upload button on screen and the files in the component state.

What did you expect to happen?

The button should disappear & clear file state

Version

4.1.0

Reproduction Steps

Any use of uploadDropzone will show this bug. Id give a full example, but I'm just making this issue so my PR for the fix has something to attach to for documentation.

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Is importing react-dropzone really required ?

I am probably asking a stupid beginner question , we have react-dropzone in our dependencies in the package folder right so why do we need to install it if we are not using it client side anyway ? won't it automatically import it internally ?

Is there supposed to be a loading state during upload for dropzone?

Great work on this @t3dotgg , I have been itching to use this since you released it and just got to implement it today in a client's project and it was utterly effortless. I am just wondering if there is any way to get a loading state when using the dropzone component for react? It seems like there is one for the button but none for the drop zone.

Great work and thanks again!

is this only for next js?

Hey there! I'm curious to know if this tool is exclusive to Next.js or if it can be used with vanilla JavaScript in the backend with Node.js and Express. I'm currently in the learning phase and I want to strengthen my JavaScript fundamentals. I'm not yet familiar with frameworks and libraries, so I'm focusing on building a strong foundation first. Sorry if my question seems basic, but I'm still a beginner and I'm just trying to learn. Thank you!

( also great project and thank you for your effort )

`Named export 'useDropzone' not found`

Experiencing this error after following documentation.

error - file:///Users/kastanday/code/githubs/vercel_t3_app/learning-t3/node_modules/@uploadthing/react/dist/index.mjs:119
import { useDropzone } from "react-dropzone";
         ^^^^^^^^^^^
SyntaxError: Named export 'useDropzone' not found. The requested module 'react-dropzone' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dropzone';
const { useDropzone } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5) {
  digest: undefined
}

Might be related to this: react-dropzone/react-dropzone#1259
Apologies, I'm new to react and couldn't determine the proper fix from this thread.

Not really a bug but can I use the library without typescript?

If yes then can I get someone to help me understand what is done here please and how that would look like without ts

<UploadDropzone<OurFileRouter>

Cheers friends

CSS from library affects whole app

Since library's CSS is being applied to global elements, it interferes with other styles. I've been using shadcn/ui with uploadthing and importing uploadthing's CSS removed background from button

Bug or feature? Am I missing something?

Fetch the url of the uploaded file.

how to get the url of the uploaded file in the code ?

[Feat] Darkmode for dashboard

S3 API compatibility

I want to choose another S3 vendor and set my own key, secret, region, bucket name and endpoint url.

Add links to docs for easier navigation back to main site

For the docs site, it might be helpful to add a link back to the regular site.
Currently there is no way back to uploadthing without spamming to go back through page history.

I went ahead and made a PR #24 adding the links to the markdown. I couldn't figure out a way to make the links not target="_blank" so that might be a decent future idea.

Feature request - CLI like ix.io

ix.io is like pastebin used through CLI.
The CLI for ix.io lets you upload contents with just one command and spits out a public link.

I think it'd be great if UploadThing allows uploading files via CLI too, for example:

upth index.js

Output:

https://uploadthing.com/.../index.js

Here's a YT short on the ix.io CLI
https://youtu.be/7S46krsF1KI

docs: broken discord link

the discord link on the navbar at docs.uploadthing.com is broken

`pnpm dev` fails the first time you run it

ONLY WHEN WORKING ON THIS REPO TO BE CLEAR

This bug is because @uploadthing/react depends on uploadthing, but you can't block in dev or it will block forever. I tried hacking this with a prebuild step before but it was buggy as hell. Surprised there's no recommendations here

generateReactHelpers is not exported from '@uploadthing/react'

I just updated from 2.0.5 to 3.0.1 and now I'm getting this error.

It seems to be there in the uploadthing code, but somehow it's not exported correctly? I don't quite know what's the issue

[Bug]: Cannot import {UploadButton} from "@uploadthing/react"

What happened?

Cannot find module '@uploadthing/react' or its corresponding type declarations.

Version: 3.0.4

What did you expect to happen?

I should have been able to import the UploadButton component as per official docs.

Version

3.0.4

Reproduction Steps

No response

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Can't find a way to access uploaded file url

The uploaded file url logs on the console but I cant find a way to access it.

[Bug]: v4.1.0 'use' is not exported from 'react'

What happened?

Building with Next pages/ directory with uploadthing v4.1.0 throws this:

Attempted import error: 'use' is not exported from 'react' (imported as 'use').

Import trace for requested module:
./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@uploadthing/react/dist/index.mjs
./src/components/form.tsx

This is fine with v4.0.0

What did you expect to happen?

Not error

Version

4.1.0

Reproduction Steps

No response

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[improvement]: Delete Files

What happened?

Is there a feasible method to erase a file utilizing an API? If so, could you please provide guidance or instructions on how this might be accomplished?

What did you expect to happen?

The function "generateReactHelpers" may potentially return both "deleteFiles" and "uploadFiles" as its output.

Version

4.0.0

Reproduction Steps

No response

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Bug]: Docs SolidStart guide broken url

What happened?

On the Getting started page, the SolidStart guide url is not redirecting to the correct page:

Continue setting up with the [SolidStart guide](/solidstart/server)

should be:

Continue setting up with the [SolidStart guide](/solid)

What did you expect to happen?

Redirect to the correct page :)

Version

latest

Reproduction Steps

No response

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Some sort of UI bug in Next JS Pages

When I upload a file it show me this :

[Bug]: Delete selected files

What happened?

Hi, I know that it's not the repo where the dashboard is deployed, but I found a strange bug.

When I select multiple files, it doesn’t let me delete them (just works if I delete them separately).

Also after I delete them separately, the button has some bug...

What did you expect to happen?

Let me delete multiple files at once

Version

3.0.5

Reproduction Steps

1. have more than 1 file.
2. select multiple files and press the "Delete selected" button.

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Uploading files in to folders

Is it possible to upload files in to folders/directories?

image route to /img
video router to /videos

Add support for "multiple: false" option when uploading files

Hey, currently, I don't see a way to limit the number of files that can be uploaded using UploadThing. Am I missing something or is there a different way to do this?

Thanks!

Packages sometimes fail to install on NPM

People reported this during stream, haven't had a chance to repro

Feat: Add onUploadBegin prop to UploadButton

It would be better if we could add a new prop to UpoadButton that takes a function which runs when uploadthing begins the uploading in the background.

Use case of this feature would be when I want to show some visual feedback when the upload begins.

CORS Error

What happened?

I was checking the network requests and found that one of endpoint is throwing cross origin error when you are not logged in.

normal usage:

using CORS EXT:

What did you expect to happen?

As earlier, I reported one issue and now that one fixed so hoping to fix it with same energy.

Version

BETA

Reproduction Steps

We'll check the root cause and the expected solution and add that in the project. I thing we have to the check headers and the allowed origin at server.

Reproduction Repository

right now, No!

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Bug]: Module '"@uploadthing/react"' has no exported member 'generateReactHelpers'.

What happened?

This

import { generateReactHelpers } from "@uploadthing/react";

fails with

Module '"@uploadthing/react"' has no exported member 'generateReactHelpers'.

even after restarting typescript.

What did you expect to happen?

import success

Version

"uploadthing": "^4.0.0",
"@uploadthing/react": "^4.0.0",

Reproduction Steps

import { generateReactHelpers } from "@uploadthing/react"; on 4.0.0 versions of uploadthing

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Usage of CUSTOM_INFRA_URL for self hosted solution

I found CUSTOM_INFRA_URL and managed to reverse engineer a compatible backend that works with core uploadthing client code. Would there be any issues with using CUSTOM_INFRA_URL point to my backend while still using upload thing client library?

Make it open source

wait no it already is

[Bug]: Can't cancel file deletion when using uploadthing.com dashboard

What happened?

I click delete and cancel but it still deletes the files.

uploadthing_issue.mp4

What did you expect to happen?

I expect file deletion to be cancelled.

Version

Web UI? idk
Local uploadthing 4.1.0 (Doesn't matter tho)

Reproduction Steps

No response

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Strip dev deps from packages during build

Obnoxious but so is yarn

Auth Feature

after going to docs, then coming back it always ask me to login

Multiple file upload with uploadButton

Apparently , it's not possible to add multiple files while using uploadButton.

[DocBug]: Improve DX by sharing "why" some resctrictions are required

What happened?

First off all, thanks for uploadthing - love the work! The following is written out of love and with gratitude.

There a few instances in docs where restrictions are placed on developers. It's good to be upfront about those, and it would be better to share reasoning for those limits as well as any potencial side effects [if any].

Developers have different levels of expertise in the stack so doing the above helps with transparency, inclusion and ensuring principle of least surprise for better DX - particularly for people not as deeply familiar with the relevant stacks. Adding some lightweight explanation OR hyperlinking to deeper reasoning could be offered, and if side effects are relevant, disclose those would resolve this.

Examples:
[from https://docs.uploadthing.com/nextjs/appdir]

Note: This is the ONLY FILE WHERE THE PATH MATTERS. You need to serve this API from /api/uploadthing on your application.

Fair to ask for path to be frozen because reasons. What are the key drivers for this ? - something like

We need this so that <a href={url_to_longer_read_if_available}>{concise_reasons}</a>.

would help. [I'm guessing it's related to needing an easily discoverable webhook endpoint to call from your infra - but I'm just guessing].

[from https://docs.uploadthing.com/nextjs/pagedir]

If you're using the pages/ directory in Next still, you HAVE TO DISABLE THE esmExternals FLAG:

Also fair to require this change. What are the key drivers for it ? Does that have side effects for developers that they might need to read about elsewhere and understand ? Is this foreseen to remain this way until Pages are deprecated Next ?

Note: This is the ONLY FILE WHERE THE PATH MATTERS. You need to serve this API from pages/api/uploadthing on your application.

Same note as for appdir above.

[from https://docs.uploadthing.com/solid]

Note: This is the ONLY FILE WHERE THE PATH MATTERS. You need to serve this API from /api/uploadthing on your application.

Same note as for appdir above.

Hope this helps, and thanks again for such a neat solution to annoying uploads.

What did you expect to happen?

Nitpick: More clarity around drivers for limitations

Version

Last updated on May 15, 2023

Reproduction Steps

Open the doc pages listed above

Reproduction Repository

https://docs.uploadthing.com/

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

satisfies keyword not working in server/uploadthing.ts

i get the following error:

',' expected

[Bug]: ambigious indirect export error when importing @uploadthing/solid

What happened?

I'm getting an error when importing @uploadthing/solid.

Uncaught (in promise) SyntaxError: ambiguous indirect export: default 2 [dev.jsx:5:7](http://127.0.0.1:3000/@fs/home/rencedm112/Repositories/Mono/@taskgrove/node_modules/.pnpm/[email protected][email protected]/node_modules/solidjs-dropzone/dist/dev.jsx?v=745a3ea6)

Here's the code

import { center } from "./styles.css";
import "@uploadthing/solid/styles.css";
import { useUploadThing } from "@uploadthing/solid";

export default function FilesPage() {
  const uploadthing = useUploadThing({
    url: "http://localhost:3000",
    endpoint: "imageUploader",
  });
  return (
    <div class={center}>
      <label>
        Upload file
        <input
          type="file"
          name="uploadedFile"
          onChange={async (e) => {
            console.log("Upload");
            if (!e.currentTarget.files) return;
            uploadthing.startUpload(e.currentTarget.files);
          }}
        />
      </label>
    </div>
  );
}

What did you expect to happen?

Importing the package should not produce an error

Version

Node v20.2.0
Pnpm v8.6.0
@uploadthing/solid 3.0.5
uploadthing 4.0.0:

Reproduction Steps

Import @uploadthing/solid into a page route
Use any import in it in the code
Navigate to that page

Reproduction Repository

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[chore] Update `@uploadthing/solid` to 4.0.0

Was not able to get this in before the 4.0.0 release. cc @OrJDev

[Bug]: Homepage issue

What happened?

Hey @t3dotgg, I mentioned this issue at uploadthing channel over discord but their is no progress till now. Should I do a PR by myself? Check the image.

check this or close this issue.

What did you expect to happen?

As I know, @t3dotgg will call me for a PR to resolve this, simple.

Version

BETA

Reproduction Steps

By fixing the css

Reproduction Repository

rn, a big no!

I've removed some media queries which are causing this issue.

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[feat] upload progress

I can't find anything in the docs about getting the upload progress. I want to show upload progress on my website so the user can see it working properly

Issue with the file delete button in dashboard

I went to delete an image I uploaded using the button on the right, but nothing happened on click even after refreshing the page.

If I select the checkbox and delete using the Delete Selected everything still seems to work however.

Here's a screen shot of the console error, my network tab didn't show a request when I clicked either. I'm using Firefox if that's helpful.

Styling the Button

How to styling the button? (e.g: when user click his user avatar, then it trigger the UploadButton)

Thanks.

Docs callouts regarding Vercel URL

VERCEL_URL env variable is hardcoded in the library right now. Until this is addressed, we should add a mention in the FAQ for people trying to use uploadthing on things other than Vercel

https://discord.com/channels/966627436387266600/1109774435407376404/1109992619519520829

[Feat] Better loading state when buttons fetch data from server

Right now the text pops in awkwardly on the button components. Ideally they'd have a better default loading state and "fill in" elegantly

[Feat] Prefetch upload component permissions in RSC environments

Should be doable with use but not sure

Enable `"plugin:@typescript-eslint/recommended-requiring-type-checking"`

I tried doing this pre-oss and a few things had to be changed. Was too lazy to fix it