Send images using formData and axios

Hello.

Following this tutorial: https://github.com/ionic-team/tutorial-photo-gallery-react

I take a photo with the camera and show it on the screen, then I want to send that photo but I am having problems sending it with axios using the post method.

The picture is shown as below:

<IonImg id=“foto” onClick={() => onClickPhotoData(photo) } src={photo.webviewPath} />

where you can see that the address where the image is located is:

src={photo.webviewPath}

So to send it by axios. post I need a formData

        var formData = new FormData();
        formData.append("img", await fetch(`${filepath}`).then((e) => {
            return e.blob()
            })
            .then((blob) => {
                let b: any = blob
                b.lastModifiedDate = new Date()
                b.name = 'imagen'
                return b as File
            }), 
         );

Is the formData done correctly?

I get the file path with the function:

    const onClickPhotoData=(photo:any)=>{
        setPhotoToDelete(photo) 
        setFilepath(photo.filepath)
    }

But it does return undefined value!

const CompletarInformacion =  () => {
    const { deletePhoto, photos, takePhoto } = usePhotoGallery();
    const [photoToDelete, setPhotoToDelete] = useState<Photo>();

    const [filepath,setFilepath] = useState();

    const [clientType,setClientType]=useState(0);
    
    const onClickPhotoData=(photo:any)=>{
        setPhotoToDelete(photo) 
        setFilepath(photo.webviewPath)
    } 
  
    
    const sentInfo =async ()=>{
        
        console.log(filepath)

        var formData = new FormData();
        formData.append("img", await fetch(`${filepath}`).then((e) => {
            return e.blob()
            })
            .then((blob) => {
                let b: any = blob
                b.lastModifiedDate = new Date()
                b.name = 'imagen'
                return b as File
            }), 
         );

        const axios = require('axios');
        axios({
            url:url,
            method:'POST',
            headers: {
                "content-type": "multipart/form-data"
              },
            data:formData
        }).then(function(res: any){
            console.log(res)
        
        }).catch((error: any) =>{
            console.log(error)
           //Network error comes in
        });

       
    }
    
    if(clientType==1){
        return (
            <div className="contenedor_central">
               <IonGrid>
                    <IonRow>
                        <IonCol>                   
                            <IonItem>
                                <IonLabel position="floating">Nombre</IonLabel>
                                <IonInput></IonInput>
                            </IonItem>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol>
                            <IonItem>
                                <IonLabel position="floating">Apellido</IonLabel>
                                <IonInput></IonInput>
                            </IonItem>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol > 
                            <strong>Seleccionar o Tomar fotografia</strong> 
                        </IonCol>
                        <IonCol>
                            <IonFabButton onClick={() => takePhoto()}>
                                <IonIcon icon={camera}></IonIcon>
                            </IonFabButton>
                        </IonCol>
                       
                    </IonRow>
                    <IonRow>
                        <IonCol>
                            {photos.map((photo, index) => (
                            <IonCol size="6" key={index}>
                                <IonImg id="foto" onClick={() => onClickPhotoData(photo) } src={photo.webviewPath} />
                            </IonCol>
                            ))}
                        </IonCol>
                    </IonRow>
                    <IonRow>
                    <IonButton onClick={sentInfo}>ENVIAR INFORMACIÓN</IonButton>
                    </IonRow>

                </IonGrid>
    
                <IonActionSheet
                isOpen={!!photoToDelete}
                buttons={[{
                    text: 'Eliminar',
                    role: 'destructive',
                    icon: trash,
                    handler: () => {
                    if (photoToDelete) {
                        deletePhoto(photoToDelete);
                        setPhotoToDelete(undefined);
                    }
                    }
                }, {
                    text: 'Cancelar',
                    icon: close,
                    role: 'cancel'
                }]}
                onDidDismiss={() => setPhotoToDelete(undefined)}
                />
            </div>
          );
    }

what is your API expecting? we only see what you are doing…

Thanks for the reply.

The API is expecting an image. But I dont know if the dataForm is correct.

photo.webviewPath

which is what the photo.webviewPath variable gives. The direction of the image or the image itself?

I think photo.webviewPath returns the image in base64 to me. Is it possible to send the image by axios like this?