After upgrade Expo SDK version from 41.0.0 to 43.0.0 I got a problem with uploading images to server. Error description: No suitable URL request handler found for ph-upload://A354049E-57C1-4478-B5C0-1DF56886F1AD. What I have noticed is that in error description I see ph-upload:// but if I log my photo it contains this: "uri":"ph://A354049E-57C1-4478-B5C0-1DF56886F1AD","name":"IMG_3702.JPG","type":"photo". The difference is ph-upload:// and ph://.
This is my code:
const onSubmitPress = async () => {
await setLoadingIndicator(true);
let formData = new FormData();
formData.append('title', textTitle);
formData.append('description', textDescription);
formData.append('latitude', latitude);
formData.append('longitude', longitude);
formData.append('photoAuthor', photoAuthor);
formData.append('textAuthor', textAuthor);
formData.append('landscapeType', landscapeType);
formData.append('region', region);
route.params?.data?.map((image, index) =>
formData.append(`photo[]`, {
uri: image.uri,
name: image.filename,
type: image.mediaType,
}));
route.params.data = undefined;
const jwtToken = await SecureStore.getItemAsync('JWT');
let responseTypes = await fetch('https://beautiful-places.ru/api/upload_place', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data;',
'API-Access-Key': '******',
'Authorization': 'Bearer ' + jwtToken
},
body: formData
})
}
Before upgrade everything worked as expected.
Advertisement
Answer
In my case I provided incorrect type of image, it somehow worked with expo ver. 41, but in ver. 43 it doesn’t work. This code works fine:
import mime from "mime"; //mime library helps to check type of image.
let formData = new FormData();
formData.append('title', textTitle);
formData.append('description', textDescription);
formData.append('latitude', latitude);
formData.append('longitude', longitude);
formData.append('photoAuthor', photoAuthor);
formData.append('textAuthor', textAuthor);
formData.append('landscapeType', landscapeType);
formData.append('region', region);
photos?.map((image, index) =>
formData.append(`photo[]`, {
uri: image.uri,
name: image.uri.substring(image.uri.lastIndexOf('/') + 1, image.uri.length),
type: mime.getType(image.uri), // after this change problem has gone
})
);
const jwtToken = await SecureStore.getItemAsync('JWT');
let responseTypes = await fetch('https://some-url/api/upload_place', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
'API-Access-Key': 'SomeKey',
'Authorization': 'Bearer ' + jwtToken
},
body: formData
})