Send images with axios

Ionic Framework Ionic React
#1

Hello.

To send an image by HTTP protocol, using axios. At this line of code:

    var formData = new FormData();
    formData.append('file',filepath );

What I get is:

Argument of type ‘undefined’ is not assignable to parameter of type ‘string | Blob’.

How is it possible to send an image obtained from the camera by axios?

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

    const [filepath,setFilepath] = useState();

    const [clientType,setClientType]=useState(0);
    
    useEffect(() => {
        getItem("ClientType").then(res => {
            if (res!=null){
                setClientType(res);
              }
              else{
                setClientType(0);
              }
            });
     
    }, []);
    
    const onClickPhotoData=(photo:any)=>{
        setPhotoToDelete(photo) 
        setFilepath(photo.filepath)
    }

    const sendInfo =()=>{
        setClientType(30); /*es solo prueba borrar*/
        
        console.log(filepath)

        var formData = new FormData();
        formData.append('file',filepath);

        axios({
            url:'https://someurl/load-image',
            method:'POST',
            data:formData
        }).then(function(response){
        
        }).catch((error) =>{
           //Network error comes in
        });

    }
    
    if(clientType==1){
        return (
            <div className="contenedor_central">
               <IonGrid>
                    <IonRow>
                        <IonCol>                   
                            <IonItem>
                                <IonLabel position="floating">NAME</IonLabel>
                                <IonInput></IonInput>
                            </IonItem>
                        </IonCol>
                    </IonRow>
                    <IonRow>
                        <IonCol>
                            <IonItem>
                                <IonLabel position="floating">LAST NAME</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 onClick={() => onClickPhotoData(photo)} src={photo.webviewPath} />
                            </IonCol>
                            ))}
                        </IonCol>
                    </IonRow>
                    <IonRow>
                    <IonButton onClick={sendInfo}>SEND</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>
          );
    }
    
    /* some other code*/
#2

you can put ! after filepath to assert that it is a non-null variable

        var formData = new FormData();
        formData.append('file',filepath!);
1 Like