bug(`@uploadthing/expo`): uploading `File` objects results in 0 bytes uploaded

mandrillxx commented 1 day ago

Provide environment information

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 36.18 GB / 63.75 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.2 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.30 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    typescript: ^5.3.3 => 5.3.3

Describe the bug

manually uploading a file by getting the media path, reading it as base64 and converting to a file to use with uploadthing will produce an image with the size NaNundefined

Link to reproduction

N/A

To reproduce

// upload.ts
import type { OurFileRouter } from "@garange/upload/core";
import { generateReactNativeHelpers } from "@uploadthing/expo";

export const { useImageUploader, createUpload, uploadFiles, useUploadThing } =
  generateReactNativeHelpers<OurFileRouter>({
    url: `${process.env.EXPO_PUBLIC_API_URL}/api/upload`,
  });

// app/vision.tsx
import * as FileSystem from "expo-file-system";

export default function CameraVision() {
  const { startUpload } = useUploadThing("resellerUploader", {
    onClientUploadComplete: (res) =>
      Alert.alert("Uploaded", JSON.stringify(res)),
    onUploadError: (error) => Alert.alert("Error", error.message),
  });

  async function onMediaCaptured(media: PhotoFile) {
    const fileData = await FileSystem.readAsStringAsync(media.path, {
      encoding: FileSystem.EncodingType.Base64,
    });
    const file = new File([fileData], "image.jpg", { type: "image/jpeg" });
    const upload = await startUpload([file]);
  }
}

Additional information

The above code will upload, and by doing a conosle.log of the fileData object it shows this, which looks correct: { "_data": { "blobId": "3f07ab59-e857-4e53-a8ea-cfb7b356b31e", "offset": 0, "size": 346348, "type": "image/jpeg", "__collector": {}, "name": "image.jpg" } }

also, the alert inside onClientUploadComplete does show the size as 346348, however the image shows up like this https://utfs.io/f/L1LEbSwZ6Eu7mwXSfb15iPMagyczdEQsHt9nKIZGR6m7AhFo with a size of NaNundefined

👨‍👧‍👦 Contributing

[ ] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

[X] I agree to follow this project's Code of Conduct

juliusmarminge commented 1 day ago

we have to do some weird workarounds to get RN blobs to behave. See here for example: https://github.com/pingdotgg/uploadthing/blob/main/packages/expo/src/image-picker.ts#L98-L113

We should "overload" the useUploadThing hook that's returned from generateReactNativeHelpers since currently that's forwarded straight from @uploadthing/react web package

mandrillxx commented 1 day ago

we have to do some weird workarounds to get RN blobs to behave. See here for example: https://github.com/pingdotgg/uploadthing/blob/main/packages/expo/src/image-picker.ts#L98-L113

We should "overload" the useUploadThing hook that's returned from generateReactNativeHelpers since currently that's forwarded straight from @uploadthing/react web package

this fixed it, thanks

pingdotgg / uploadthing