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