Back
Storage file not uploading - React native
Heyo.
Using expo-imagepicker (https://docs.expo.dev/versions/latest/sdk/imagepicker/), I am trying to upload a file to appwrite, however it seems that it keeps saying "undefined" on the console.log(storageData). What am I missing?
It also does not upload the image.
Picking the image:
TypeScript
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
})
if (!result.canceled) {
const image = result.assets[0]
const maxResolution = 5000 * 5000
const maxFileSize = 8 * 1024 * 1024 // 4MB in bytes
if (image.width * image.height > maxResolution) {
toast('Image resolution is too large')
}
if (image.fileSize > maxFileSize) {
toast('Image file size is too large')
}
if (
image.width * image.height <= maxResolution &&
image.fileSize <= maxFileSize
) {
setImage(image.uri)
setPage(2)
}
}
}
Here's the function:
TypeScript
async function uploadImageAsync() {
if (!image) {
toast('Please select an image to upload')
return
}
if (!title || title.length <= 3) {
toast('Please provide a valid title.')
return
}
try {
//setUploading(true)
const storageData = await storage.createFile(
'gallery',
ID.unique(),
image,
[],
(event) => setProgress(event.progress)
)
console.log(storageData)
await database.createDocument(
'hp_db',
'gallery-images',
storageData.$id,
{
name: title,
longText: description,
nsfw: nsfw,
userId: current.userId,
}
)
} catch (error) {
setUploading(false)
console.error(error)
}
}
TL;DR
Developers are facing issues uploading a file using expo-imagepicker in a React Native app. The console shows "undefined" on storageData and the image doesn't upload.
Potential solutions:
- Check if the image is being properly selected and handled in the pickImage function.
- Ensure that the necessary parameters are correctly passed to createFile function in the uploadImageAsync function.
- Debug any potential errors in the code logic that might be causing the upload failure.
Good luck debugging! Storage file not uploading - React native
