search

ivpusic / react-native-image-crop-picker

iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping
MIT License
6.09k stars 1.55k forks source link

Different sizes during uploading an image from iOS #1231

Open PacanvaZelenaya opened 4 years ago

PacanvaZelenaya commented 4 years ago

Version

Platform

Actual behaviour

I have found one strange thing when upload an image to a server from iOS application: value of "size" parameter of an image object (returned by ImagePicker.openPicker function) is not equal to size of this file that comes to server. I have prepared a simple client and API to reproduce described, you can find them here - https://bitbucket.org/YuriiPrime/. ('client' and 'api' branches respectively) API prints out an incoming request like:

{ fields: { size: '44984' } } { files: { file: File { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, size: 80921, path: '/var/folders/fr/x6r9rgcn7plbs1yxz1b9w33r0000gn/T/upload_72b2acbd754cd83996d750cdc38238b3', name: 'BF4A74F1-E1A6-451C-A2F3-4F063B2170E9.jpg', type: 'image/jpeg', hash: null, lastModifiedDate: 2020-02-13T08:28:14.476Z, _writeStream: [WriteStream] } } }

You can see different sizes - size: '44984' that was given from an image object, and size: 80921 of a binary data. If to upload an image from Android application those parameters has the same value. Why so?

WillVill commented 4 years ago

+1

praveenmobdev commented 4 years ago

@PacanvaZelenaya / @WillVill I'm also facing the same issue on iOS. Any update on this? Have you guys fixed this issue?

PacanvaZelenaya commented 4 years ago

@PacanvaZelenaya / @WillVill I'm also facing the same issue on iOS. Any update on this? Have you guys fixed this issue?

Yes, I prepare a request with an image in little different way:

`import ImageResizer from 'react-native-image-resizer';

export const getFormDataWithImage = async (img) => { console.log({ img });

const format = img.mime === 'image/png' ? 'PNG' : 'JPEG'; const qualityInPercents = 50; let compressedImage; try { compressedImage = await ImageResizer.createResizedImage(img.path, img.width, img.height, format, qualityInPercents); } catch { console.log('Cannot resize image'); }

const formData = new FormData(); const imgPath = Platform.OS === 'android' ? compressedImage.uri : compressedImage.path; try { const res = await fetch(imgPath); const blob = await res.blob(); const imageFile = new File([blob], compressedImage.name); formData.append('file', { uri: imgPath, name: compressedImage.name, type: img.mime }); formData.append('size', imageFile.data.size); } catch { console.log('Cannot handle a blob'); } return formData; };`

Dont pay attention to react-native-image-resizer, you can rewrite the code without it.

praveenmobdev commented 4 years ago

Thanks @PacanvaZelenaya , I had did a quick workaround of updating the quality level in node_modules. I didn't faced any issue with that change. If i faced any issue, i will try you above code.

gomesbreno commented 3 years ago

Hi @PacanvaZelenaya, this is because you are using the size of the original file, but using the path from the temp image. Use this method the get correct data from the original file:

import RNFetchBlob from 'rn-fetch-blob';

ImagePicker.openPicker({ }).then(file => { const { sourceURL } = file; filePath = sourceURL.replace('file://', ''); const dataFromOriginalFile = await RNFetchBlob.fs.stat(filePath) }); });

ozanbatuhankurucu commented 3 years ago

+1

NoatToan commented 1 year ago

This is because you are using the size of the original file, but using the path from the temp image.

@gomesbreno Do you have any evidence/ refer link to make sure your conviction is right?