[Draft] Fixes image failing on reupload issue (#128)
* Fixes image failing on reupload issue * Use tmp folder instead of documents * lint
This commit is contained in:
@@ -65,6 +65,7 @@
|
|||||||
"react-native-svg": "^12.4.0",
|
"react-native-svg": "^12.4.0",
|
||||||
"react-native-tab-view": "^3.3.0",
|
"react-native-tab-view": "^3.3.0",
|
||||||
"react-native-url-polyfill": "^1.3.0",
|
"react-native-url-polyfill": "^1.3.0",
|
||||||
|
"react-native-uuid": "^2.0.1",
|
||||||
"react-native-version-number": "^0.3.6",
|
"react-native-version-number": "^0.3.6",
|
||||||
"react-native-web": "^0.17.7",
|
"react-native-web": "^0.17.7",
|
||||||
"rn-fetch-blob": "^0.12.0",
|
"rn-fetch-blob": "^0.12.0",
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
import React, {useCallback} from 'react'
|
import React, {useCallback} from 'react'
|
||||||
import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
|
import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||||
|
import uuid from 'react-native-uuid'
|
||||||
import {
|
import {
|
||||||
openPicker,
|
openPicker,
|
||||||
openCamera,
|
openCamera,
|
||||||
openCropper,
|
openCropper,
|
||||||
} from 'react-native-image-crop-picker'
|
} from 'react-native-image-crop-picker'
|
||||||
|
import RNFS from 'react-native-fs'
|
||||||
import {
|
import {
|
||||||
UserLocalPhotosModel,
|
UserLocalPhotosModel,
|
||||||
PhotoIdentifier,
|
PhotoIdentifier,
|
||||||
@@ -26,6 +28,18 @@ const IMAGE_PARAMS = {
|
|||||||
compressImageQuality: 1.0,
|
compressImageQuality: 1.0,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const moveToPremanantPath = async (path: string) => {
|
||||||
|
/*
|
||||||
|
Since this package stores images in a temp directory, we need to move the file to a permanent location.
|
||||||
|
Relevant: IOS bug when trying to open a second time:
|
||||||
|
https://github.com/ivpusic/react-native-image-crop-picker/issues/1199
|
||||||
|
*/
|
||||||
|
const filename = uuid.v4()
|
||||||
|
const destinationPath = `${RNFS.TemporaryDirectoryPath}/${filename}`
|
||||||
|
RNFS.moveFile(path, destinationPath)
|
||||||
|
return destinationPath
|
||||||
|
}
|
||||||
|
|
||||||
export async function cropPhoto(
|
export async function cropPhoto(
|
||||||
path: string,
|
path: string,
|
||||||
imgWidth = MAX_WIDTH,
|
imgWidth = MAX_WIDTH,
|
||||||
@@ -44,8 +58,10 @@ export async function cropPhoto(
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
})
|
})
|
||||||
|
|
||||||
const img = await compressIfNeeded(cropperRes, MAX_SIZE)
|
const img = await compressIfNeeded(cropperRes, MAX_SIZE)
|
||||||
return img.path
|
const permanentPath = await moveToPremanantPath(img.path)
|
||||||
|
return permanentPath
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PhotoCarouselPicker = ({
|
export const PhotoCarouselPicker = ({
|
||||||
@@ -114,7 +130,8 @@ export const PhotoCarouselPicker = ({
|
|||||||
height,
|
height,
|
||||||
})
|
})
|
||||||
const finalImg = await compressIfNeeded(cropperRes, MAX_SIZE)
|
const finalImg = await compressIfNeeded(cropperRes, MAX_SIZE)
|
||||||
result.push(finalImg.path)
|
const permanentPath = await moveToPremanantPath(finalImg.path)
|
||||||
|
result.push(permanentPath)
|
||||||
}
|
}
|
||||||
onSelectPhotos([...selectedPhotos, ...result])
|
onSelectPhotos([...selectedPhotos, ...result])
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user