I've tried multiple ways to upload photo from expo-image-picker
, but still don't figure it out. The server is classic nestjs with multer
@Post() @UseInterceptors(FileInterceptor('file')) public addTimelineEventWithSingleImage( @Headers('x-token') token: string, @UploadedFile() file: Express.Multer.File, @Body() body: IAddEventBody ): Promise<void> { console.log('file', file); console.log('body', body); }
the logs are:
Mar 5 04:13:00 PM file undefinedMar 5 04:13:00 PM body {Mar 5 04:13:00 PM _parts: [Mar 5 04:13:00 PM [ 'file', [Object] ],Mar 5 04:13:00 PM [ 'description', '' ],Mar 5 04:13:00 PM [ 'eventType', 'COMMENT' ]Mar 5 04:13:00 PM ]Mar 5 04:13:00 PM }
I'm creating the formData in various ways
- from this article as blob
const formData = new FormData(); formData.append('file', blob); formData.append('description', timelineEvent.description); formData.append('eventType', timelineEvent.eventType);
- with uri, name and type
formData.append('file', { name: image.uri.split('/').pop(), type: 'image/jpg', uri: Platform.OS === 'android' ? image.uri : image.uri.replace('file://', ''),});
- buffer from base64
const formData = new FormData(); formData.append('file', Buffer.from(image, 'base64')); formData.append('description', timelineEvent.description); formData.append('eventType', timelineEvent.eventType);
I've checked the endpoint with the postman and it works.Source of the uri is result.assets[0]:
let result = await ImagePicker.launchCameraAsync({ mediaTypes: MediaTypeOptions.Images, selectionLimit: 1, allowsEditing: true, quality: 0.8, base64: true, aspect: [1, 1], presentationStyle: UIImagePickerPresentationStyle.POPOVER });
It seems to be simple to upload a photo taken by user, but is not, can anybody help?