feat: `@uploadthing/expo`

[juliusmarminge]

TODOs

• [ ] validate upload progress, I don't seem to get any progress indications on native. I've tested uploading the same file from web and it does work so seems related to RNs implementation of XHR?
• [ ] verify it works deployed? I don't have an Apple Developer Account to test this with though...

Demo Example

https://github.com/pingdotgg/uploadthing/assets/51714798/dc449522-a367-4f15-a6b7-425225f77f7f

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-uploadthing	✅ Ready (Inspect)	Visit Preview	✅ 1 resolved	Jun 10, 2024 8:16am

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0690df87f8d15658a6093bb7b533a49dc9d7c089

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@uploadthing/react	Minor
@uploadthing/expo	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[juliusmarminge]

• #583 👈
• #579
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @juliusmarminge and the rest of your teammates on Graphite

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]

[k2on]

Excited about this

[k2on]

I suggest this should work with RN for Web. I can help with supporting that, there are some things that I don't think work like the File response from image picker, does not have a size property, which is required for startUpload

[juliusmarminge]

I suggest this should work with RN for Web. I can help with supporting that, there are some things that I don't think work like the File response from image picker, does not have a size property, which is required for startUpload

What??? I would have imagined web being the place where you could expect them to follow standards the most.... Another evidence RNW is a mess

[younes200]

@juliusmarminge any chance to get this merge, I tested the canary version but it seems that it has a wrong module reference to "@uploadthing/react/native" which doesn't exists :

https://github.com/pingdotgg/uploadthing/blob/f157ee6fdba336c758979f7839ee3380537ddc94/packages/expo/src/index.ts#L3

Tried other @uploading/react/native but it seems none includes the native reference

"@uploadthing/expo": "6.3.3-canary.f4bba90",
"@uploadthing/react": "6.5.5-canary.2f38904",

I will be happy to test :)

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]
pnpm add @uploadthing/[email protected]

[juliusmarminge]

Pushing out another round of canary. You shouldn't have both @uploadthing/react and @uploadthing/expo, just the Expo one. (If you do end up having both make sure it's the same version used by the expo lib)

[younes200]

Thank @juliusmarminge for the update.

I am currently testing the upload functionality on both the web and native platforms. It appears that on web platform, the API endpoint URL it's changed to https://undefined/api/uploadthing event with explicite relative url :

export const { useImageUploader, useDocumentUploader } =
  generateReactNativeHelpers<UploadRouter>({
    url: "/api/uploadthing",
  });

https://github.com/pingdotgg/uploadthing/blob/f157ee6fdba336c758979f7839ee3380537ddc94/packages/expo/src/index.ts#L29

Using the full URL address resolves the issue, but it may not be easily understood by others.

[younes200]

Furthermore, in the event that uploadthing/server is distinct from uploadthing/next, how can the Request object be obtained to execute an authorization check?

https://github.com/pingdotgg/uploadthing/blob/f157ee6fdba336c758979f7839ee3380537ddc94/examples/minimal-expo/app/api/uploadthing%2Bapi.ts#L51

[juliusmarminge]

Same way. Server handler just gives you a Request while next handler gives you a NextRequest

[younes200]

Same way. Server handler just gives you a Request while next handler gives you a NextRequest

Sorry, you are correct that middleware returns a Request object.

[juliusmarminge]

@younes200 I improved the URL resolving a bit to work more ootb on web

[younes200]

@juliusmarminge Yes, it's solve the undefined in url issue 👍🏽

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]
pnpm add @uploadthing/[email protected]

[github-actions[bot]]

A new canary is available for testing. You can install this latest build in your project with:

pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add @uploadthing/[email protected]
pnpm add [email protected]
pnpm add @uploadthing/[email protected]