Search code examples
react-nativesymfonypostaxiosmultipartform-data

upload image from react native app to symfony backend via axios


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.

enter image description here

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 : enter image description here

PROFILER SYMFONY : enter image description here


Solution

  • 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.