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>
);
}