I am extremely stuck here. I don't know what I'm doing wrong. I'm trying to send a file from the an expo-image-picker component to the server. The form is sent, but the image is not. The fetch command immediately gives the "Network request failed" error. The server DOES receive the request, but no image is attached.
More information:
I am creating the form-data object and append the blob to it. I've also tried doing it with
FormData.append("image", {uri, name: 'filename', type: 'image/filetype'}), the way most articles suggest, ignoring the TS error but it fails as well.I'm not submitting to AWS or Firebase, so I'm not using those libraries, I don't see what they are doing any different from me in any case.
I haven't set any specific permissions for this. I did see some articles talking about permissions for uploading, but they were over 5 years old and talking about before android 5.0.
Here are the functions I'm using to do the submit. pathToImage is returned from the ImagePicker.
const fetchImageFromUri = async (uri: string) => { try { const response = await fetch(uri); const blob = await response.blob(); return blob; } catch (error) { console.log("fetchImageFromUri error:", error); throw new Error("fetchImageFromUri"); }};const upload = async () => { setMessage(""); setErrMessage(""); if (pathToImage != null) { const fileToUpload = await fetchImageFromUri(pathToImage); const formData = new FormData(); formData.append("action", "Image Upload"); formData.append("image", fileToUpload, "filename"); // from: https://stackoverflow.com/questions/71198201/react-native-unable-to-upload-file-to-server-network-request-failed // most articles say this is the way to upload the file... Typescript gives an error // because it only wants type 'string | Blob' // let uriParts = pathToImage.split("."); // let fileType = uriParts[uriParts.length - 1]; // formData.append("image", { // uri: pathToImage, // name: `photo.${fileType}`, // type: `image/${fileType}`, // }); // create the header options const options: RequestInit = { method: "POST", body: formData, headers: {"Content-Type": "multipart/form-data", Accept: "image/jpeg, image/png", }, }; try { const res = await fetch(URL, options); console.log("fetch returned"); // this line is never reached if (!res.ok) { throw new Error("Something went wrong"); } const body = (await res.json()) as any; if (body.code > 200) { setErrMessage(body.msg); } else { setMessage(body.msg); } } catch (err: any) { setErrMessage("There was an error in upload"); console.log("upload catch error:", err.message); } }};The full code can be found in my GitHub repository.