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.3Describe 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
Code of Conduct
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.3Describe 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
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
Code of Conduct