Web Developer
Hello, I’m facing an issue when trying to upload images to Appwrite using React Native, and I need it to work both on web and mobile.
On mobile, I am able to load and send images to Appwrite successfully. However, when trying to send the image via web, I get the error "AppwriteException: Empty file passed to the endpoint."
The process I am using is as follows:
When the user selects an image, I process it as a ProcessedImage object. If the platform is web, the uri is a Base64 string (e.g., data:image/png;base64,...), whereas on mobile the uri is a local file path.
I am using the createFile method from Appwrite to upload the file, but since the uri value is Base64 on the web, I’m unsure how to make Appwrite interpret it correctly.
What I’ve tried:
I’ve tried converting the Base64 string into a Blob, but I still receive the error on web.
I’ve verified that the platform is being correctly identified using Platform.OS, and the upload code is the same for both web and mobile.
Question: How can I upload the image to Appwrite, ensuring that it works correctly on both mobile and web, where on web the uri is a Base64 string? Is there a way to convert or process the Base64 so that Appwrite accepts it properly?
Code snippets:
export async function uploadFile(file, type) {
if (!file) return;
// Extract MIME type and keep other file properties
const { mimeType, ...rest } = file;
const asset = { type: mimeType, ...rest }; // Create asset object with type and other properties
try {
// Upload file to Appwrite storage
const uploadedFile = await storage.createFile(
appwriteConfig.storageId,
ID.unique(),
asset
);
const fileUrl = await getFilePreview(uploadedFile.$id, type);
return fileUrl;
} catch (error) {
throw new Error(error);
}
}