The React Native blob or file seems to be encountering trouble in reaching the server

Question

The React Native blob or file seems to be encountering trouble in reaching the server

I'm in a tough spot here. I can't figure out what's going wrong. My goal is to send a file using the expo-image-picker component to the server. The form gets sent, but the image doesn't. When I use the fetch command, I immediately get a "Network request failed" error. The server receives the request, but without the image attached.

Additional details:

I've tried creating a form-data object and appending the blob to it. I also attempted using
```
FormData.append("image", {uri, name: 'filename', type: 'image/filetype'})
```
as suggested in many articles, ignoring the TypeScript error, but it failed too.
I'm not utilizing AWS or Firebase, so I'm not using those libraries. I don't see a significant difference in how they handle it compared to my approach.
I haven't defined any specific permissions for this process. I came across some discussions about permissions for uploads, but the information seemed outdated, referencing times before Android 5.0.

Below are the functions I'm using for the submission, with pathToImage being 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");

    // Rest of the upload function goes here

You can access the complete code in my GitHub repository.

typescript react-native expo fetch-api

Answer 1

Answer №1

I want to extend my gratitude to Brandonjgs for guiding me in the right direction. Thanks to his help, I was able to successfully tackle the issue at hand.

Below is the updated upload function.

const upload = async () => {
    console.log("\n***** Upload Image *****");
    setMessage("");
    setErrMessage("");
    setLoading(true);

    if (pathToImage) {
        console.log("***** get other fields section *****");
        const dataToSend: Record<string, string> = {};
        dataToSend["action"] = "Image Upload";

        console.log("***** Options section *****");
        const options: FileSystemUploadOptions = {
            headers: {
                "Content-Type": "multipart/form-data",
                Accept: "image/jpeg, image/png",
            },
            httpMethod: "POST",
            uploadType: FileSystemUploadType.MULTIPART,
            fieldName: "image",
            parameters: dataToSend,
        };

        console.log("***** 'Fetch' section *****");
        try {
            const response = await FileSystem.uploadAsync(
                URL,
                pathToImage,
                options
            );

            setLoading(false);

            if (response.status >= 200 && response.status < 300) {
                const body = JSON.parse(response.body);
                setMessage(body.msg);
            } else {
                setErrMessage(`${response.status} Error: ${response.body}`);
            }
        } catch (err: any) {
            console.error(err);
            setErrMessage(err.message);
        }
    }
};

Make sure to refer to the FileSystem.uploadAsync documentation for more insights. It does not return a standard http response; instead, it formats its own and returns:

status: the error code
header: the http header sent by the server
body: the data returned by the server - in my case, it's JSON. It's worth noting that if the server is unresponsive or the URL is incorrect, it returns an HTML error page rather than a standard error message string (which can be unconventional since this is a react native environment and not necessarily a web page redirection scenario).

Answer 2

I want to extend my gratitude to Brandonjgs for guiding me in the right direction. Thanks to his help, I was able to successfully tackle the issue at hand.

Below is the updated upload function.

const upload = async () => {
    console.log("\n***** Upload Image *****");
    setMessage("");
    setErrMessage("");
    setLoading(true);

    if (pathToImage) {
        console.log("***** get other fields section *****");
        const dataToSend: Record<string, string> = {};
        dataToSend["action"] = "Image Upload";

        console.log("***** Options section *****");
        const options: FileSystemUploadOptions = {
            headers: {
                "Content-Type": "multipart/form-data",
                Accept: "image/jpeg, image/png",
            },
            httpMethod: "POST",
            uploadType: FileSystemUploadType.MULTIPART,
            fieldName: "image",
            parameters: dataToSend,
        };

        console.log("***** 'Fetch' section *****");
        try {
            const response = await FileSystem.uploadAsync(
                URL,
                pathToImage,
                options
            );

            setLoading(false);

            if (response.status >= 200 && response.status < 300) {
                const body = JSON.parse(response.body);
                setMessage(body.msg);
            } else {
                setErrMessage(`${response.status} Error: ${response.body}`);
            }
        } catch (err: any) {
            console.error(err);
            setErrMessage(err.message);
        }
    }
};

Make sure to refer to the FileSystem.uploadAsync documentation for more insights. It does not return a standard http response; instead, it formats its own and returns:

status: the error code
header: the http header sent by the server
body: the data returned by the server - in my case, it's JSON. It's worth noting that if the server is unresponsive or the URL is incorrect, it returns an HTML error page rather than a standard error message string (which can be unconventional since this is a react native environment and not necessarily a web page redirection scenario).

The React Native blob or file seems to be encountering trouble in reaching the server

Answer №1

Similar questions

Saving large amounts of data in bulk to PostgreSQL using TypeORM

NestJs encountering issues with reading environment variables

Is there a way to establish a "transient" category within a category to maintain code efficiency?

Utilizing Typescript with tfjs-node to effectively integrate the node-gpu version with regular node functionalities

Encountering issues while attempting to import Realm in my project. Error message says: "Missing Realm constructor. Have you executed 'pod install'? (Working on a Windows machine)"

Typescript - The Power of Dynamic Typing

Utilizing React MUI Autocomplete to Save Selected Items

The StreamingTextResponse feature is malfunctioning in the live environment

The error message "TypeError: 'results.length' is not an object" occurred within the Search Component during evaluation

Achieving dynamic key assignment when updating with mongoose in NodeJS and Express

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

Tips for making use of incomplete types

Tips for typing a narrow JSX.Element

Accessing JSON files within React Native applications

Expo background fetch initialized but not activated

Searching for TypeScript type definitions for the @Angular libraries within Angular 2

Unable to fulfill the pledge

ng-select search functionality failing to display any matches

What is the best way to implement an onClick event listener in a TypeScript React application?

Angular2: Ways to update components with resolver dependencies?