I am working on a react-native social app and trying to upload a post image from react-native using react-native-image-picker and typescript. I am able to get Image uri but have to create file/blob to send it to node js backend
const choosePhotoFromLibrary = async () => { await launchImageLibrary({ mediaType: "photo", selectionLimit: 1, includeBase64: true }) .then(({assets}: any) => { setImage(assets[0].uri); }) .catch((err) => { console.log(err); }); };
This is my react-native-image-picker function to select image from gallery. I have tried to convert uri to blob and then to file like
const blobuploadImage = async (imageUri) => { const response = await fetch(imageUri); const blob = await response.blob(); console.log(blob) return blob; };
const uploadImage = async () => { const formData = new FormData(); const blob = await blobuploadImage(base.uri); var file = new File([blob], `Image.${base.type.split("/")[1]}`, { type: base.type, }); formData.append("file", file); return await dispatch(uploadFile({ token, formData })) };
Image file is empty or corrupted that stored on backend but I have tested backend Api with postman uploading Image. Its working fine then
Tried to convert uri to blob and then to file and sending it to backend but image is empty or corrupted