upload image from react native app to symfony backend via axios

Question

I want to upload an image from react native app to backend in symfony via axios.

here is the code of the front end :

    const [pickedImage, setPickedImage] = useState("");
    const submitPhoto = async () => {
    try {
    const result = await ImagePicker.launchImageLibraryAsync();
    setPickedImage(result);
          
    let formData = new FormData();
          formData.append("uploaded_image", {
            uri:
              Platform.OS === "android"
                ? pickedImage.uri
                : pickedImage.uri.replace("file://", ""),
            name: "tata.jpeg",
            type: "image/jpeg",
          });
          const response = await axios({
            method: "post",
            url: "http://192.168.1.3:8000/upload",
            data: formData,
          });
        } catch (error) {
          console.log(error)
        }
      };

here is the code of the backend in Symfony :

public function postImage(Request $request)
{
//... some code
$content = $request->files->get("uploaded_image");
// ... handle the image in content
}

As I can see, $content is NULL. And to confirm it, I attached a screenshot of the profiler of symfony.

I tried to add "Content-type": "multipart/form-data" in the axios call, but i get : "Missing boundary in multipart/form-data POST data"

Does anyone know how I can properly upload the image from react native to Symfony ?

Thanks in advance.

EDIT 1 : When using POSTMAN, the backend works as you can see in the two following images :

POSTMAN REQUEST :

PROFILER SYMFONY :

Answer 1

As I said, when i use Axios with the right header (multipart/form-data), I get a message error :

Missing boundary in multipart/form-data POST data

.

I tried to use fetch, and it works now ! I dont know why :

let response = await fetch(
        "http://192.168.1.3:8000/upload",
         {
           method: "post",
           body: formData,
           headers : {
             'Content-Type' : 'multipart/form-data;'
           }
         }
      )

It is weird, but I dont know why it works now.

Answer 2

I think that you get a base64 in your back-end side, then you have to convert it with something like :

    $data = base64_decode($content);
    file_put_contents($filePath, $data);