admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-750 Resolve overwriting images on iOS Upload

Browse Source
This commit is contained in:
Patrick Fic
2021-03-09 15:36:35 -08:00
parent 5ef9903a6d
commit b45ed8ad17
6 changed files with 143 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
components/screen-media-browser/screen-media-browser.component.jsx
View File

@@ -6,7 +6,6 @@ import { H3 } from "native-base";
import React, { useCallback, useState } from "react"; import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from "react-native"; import { StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -21,6 +20,9 @@ import { handleUpload } from "../../util/document-upload.utility";
import CameraSelectJob from "../camera-select-job/camera-select-job.component"; import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component"; import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from "../upload-progress/upload-progress.component"; import UploadProgress from "../upload-progress/upload-progress.component";
import plimit from "p-limit";
const limit = plimit(2);
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
@@ -38,6 +40,7 @@ export function ImageBrowserScreen({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [uploads, setUploads] = useState({}); const [uploads, setUploads] = useState({});
function handleOnProgress(uri, percent) { function handleOnProgress(uri, percent) {
setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } })); setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
} }
@@ -47,13 +50,15 @@ export function ImageBrowserScreen({
setTick((tick) => tick + 1); setTick((tick) => tick + 1);
}, []); }, []);
async function handleOnSuccess(uri, id) { async function handleOnSuccess(uri, id) {
console.log("onSucces!", uri); console.log("Succesful upload!", uri);
if (deleteAfterUpload) { if (deleteAfterUpload) {
const result = await MediaLibrary.deleteAssetsAsync([id]); try {
console.log("result :>> ", result); const result = await MediaLibrary.deleteAssetsAsync([id]);
console.log("Delete result :>> ", result);
} catch (error) {
console.log("Unable to delete picture.", error);
}
} }
console.log("Omitting", uri);
setUploads((prevUploads) => _.omit(prevUploads, uri)); setUploads((prevUploads) => _.omit(prevUploads, uri));
} }
@@ -61,21 +66,32 @@ export function ImageBrowserScreen({
console.log("Assets :>> ", data); console.log("Assets :>> ", data);
const actions = []; const actions = [];
data.forEach(function (p) { data.forEach(function (p) {
const uri = p.uri.split("/").pop(); let filename;
//Appears to work for android.
//iOS provides the filename, android doe snot.
filename = p.filename || p.uri.split("/").pop();
//File name for ios
actions.push( actions.push(
handleUpload( limit(
{ handleUpload(
uri: p.uri, {
onError: handleOnError, //iOS provides the file name. Android does not.
onProgress: ({ percent }) => handleOnProgress(uri, percent), uri: p.uri,
onSuccess: () => handleOnSuccess(uri, p.id), filename,
}, onError: handleOnError,
{ onProgress: ({ percent }) => handleOnProgress(filename, percent),
bodyshop: bodyshop, onSuccess: () => handleOnSuccess(filename, p.id),
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null, },
uploaded_by: currentUser.email, {
photo: p, bodyshop: bodyshop,
} jobId:
selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email,
photo: p,
}
)
) )
); );
}); });
@@ -85,93 +101,91 @@ export function ImageBrowserScreen({
}; };
return ( return (
<SafeAreaView style={[styles.flex, styles.container]}> <View style={[styles.flex, styles.container]}>
<View style={[styles.flex, styles.container]}> <CameraSelectJob />
<CameraSelectJob /> <UploadDeleteSwitch />
<UploadDeleteSwitch /> {!selectedCameraJobId && (
{!selectedCameraJobId && ( <View
<View style={{
style={{ flex: 1,
flex: 1, justifyContent: "center",
justifyContent: "center", alignItems: "center",
alignItems: "center", }}
}} >
> <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
<H3>{t("mediabrowser.labels.selectjobassetselector")}</H3> </View>
</View> )}
)} {selectedCameraJobId && (
{selectedCameraJobId && ( <AssetsSelector
<AssetsSelector style={{ flex: 1 }}
style={{ flex: 1 }} key={tick}
key={tick} options={{
options={{ // manipulate: {
// manipulate: { // //width: 512,
// //width: 512, // compress: 0.7,
// compress: 0.7, // base64: false,
// base64: false, // saveTo: "jpeg",
// saveTo: "jpeg", // },
// }, assetsType: ["photo", "video"],
assetsType: ["photo", "video"], //maxSelections: 5,
//maxSelections: 5, margin: 3,
margin: 3, portraitCols: 4,
portraitCols: 4, landscapeCols: 5,
landscapeCols: 5, widgetWidth: 100,
widgetWidth: 100, widgetBgColor: "white",
widgetBgColor: "white", selectedBgColor: "#adadad",
selectedBgColor: "#adadad", spinnerColor: "#c8c8c8",
spinnerColor: "#c8c8c8", videoIcon: {
videoIcon: { Component: Ionicons,
Component: Ionicons, iconName: "ios-videocam",
iconName: "ios-videocam", color: "white",
color: "white", size: 20,
size: 20, },
}, selectedIcon: {
selectedIcon: { Component: Ionicons,
Component: Ionicons, iconName: "ios-checkmark-circle-outline",
iconName: "ios-checkmark-circle-outline", color: "white",
color: "white", bg: "rgba(35,35,35, 0.75)",
bg: "rgba(35,35,35, 0.75)", size: 32,
size: 32, },
}, defaultTopNavigator: {
defaultTopNavigator: { continueText: t("mediabrowser.actions.upload"),
continueText: t("mediabrowser.actions.upload"), goBackText: t("mediabrowser.actions.refresh"),
goBackText: t("mediabrowser.actions.refresh"), buttonStyle: styles.buttonStyle,
buttonStyle: styles.buttonStyle, textStyle: styles.textStyle,
textStyle: styles.textStyle, backFunction: () => {
backFunction: () => { forceRerender();
forceRerender();
},
doneFunction: onDone,
}, },
doneFunction: onDone,
},
noAssets: { noAssets: {
Component: function NoAsset() { Component: function NoAsset() {
return ( return (
<View <View
style={{ style={{
display: "flex", display: "flex",
flex: 1, flex: 1,
height: 200, height: 200,
marginHorizontal: 20, marginHorizontal: 20,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<Ionicons name="ios-photos" size={72} /> <Ionicons name="ios-photos" size={72} />
<Text style={{ textAlign: "center", marginTop: 10 }}> <Text style={{ textAlign: "center", marginTop: 10 }}>
{t("mediabrowser.labels.nomedia")} {t("mediabrowser.labels.nomedia")}
</Text> </Text>
</View> </View>
); );
},
}, },
}} },
/> }}
)} />
<UploadProgress uploads={uploads} /> )}
</View> <UploadProgress uploads={uploads} setUploads={setUploads} />
</SafeAreaView> </View>
); );
} }

3
components/screen-splash/screen-splash.component.jsx
View File

@@ -27,8 +27,5 @@ const localStyles = StyleSheet.create({
middleAlign: { middleAlign: {
alignItems: "center", alignItems: "center",
}, },
content: {
paddingBottom: 150,
},
logo: { width: 100, height: 100, margin: 20 }, logo: { width: 100, height: 100, margin: 20 },
}); });

25
components/upload-progress/upload-progress.component.jsx
View File

@@ -1,9 +1,15 @@
import { Ionicons } from "@expo/vector-icons";
import React from "react"; import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native"; import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import * as Progress from "react-native-progress"; import * as Progress from "react-native-progress";
import _ from "lodash";
export default function UploadProgress({ uploads }) { export default function UploadProgress({ uploads, setUploads }) {
console.log("uploads :>> ", uploads);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
@@ -19,6 +25,13 @@ export default function UploadProgress({ uploads }) {
color={uploads[key].percent === 1 ? "green" : "blue"} color={uploads[key].percent === 1 ? "green" : "blue"}
/> />
</View> </View>
<TouchableOpacity
onPress={() =>
setUploads((prevUploads) => _.omit(prevUploads, key))
}
>
<Ionicons name="ios-close" size={32} />
</TouchableOpacity>
</View> </View>
))} ))}
</ScrollView> </ScrollView>
@@ -35,12 +48,14 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
marginBottom: 12, marginBottom: 12,
marginLeft: 12,
marginRight: 12,
}, },
progressText: { progressText: {
flex: 1, flex: 1,
}, },
progressBarContainer: { progressBarContainer: {
flex: 1, flex: 3,
marginLeft: 12, marginLeft: 12,
marginRight: 12, marginRight: 12,
}, },

1
package.json
View File

@@ -38,6 +38,7 @@
"lodash": "^4.17.20", "lodash": "^4.17.20",
"luxon": "^1.25.0", "luxon": "^1.25.0",
"native-base": "^2.13.15", "native-base": "^2.13.15",
"p-limit": "^3.1.0",
"react": "16.13.1", "react": "16.13.1",
"react-dom": "16.13.1", "react-dom": "16.13.1",
"react-i18next": "^11.8.2", "react-i18next": "^11.8.2",

8
util/document-upload.utility.js
View File

@@ -10,13 +10,13 @@ var cleanAxios = axios.create();
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId); cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
export const handleUpload = async (ev, context) => { export const handleUpload = async (ev, context) => {
const { onError, onSuccess, onProgress } = ev; const { uri, filename, onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context; const { bodyshop, jobId } = context;
const newFile = await (await fetch(ev.uri)).blob(); const newFile = await (await fetch(uri)).blob();
let extension = ev.uri.split(".").pop(); let extension = ev.uri.split(".").pop();
let key = `${bodyshop.id}/${jobId}/${newFile.data.name.replace( let key = `${bodyshop.id}/${jobId}/${(filename || newFile.data.name).replace(
/\.[^/.]+$/, /\.[^/.]+$/,
"" ""
)}`; )}`;
@@ -123,7 +123,7 @@ export const uploadToCloudinary = async (
); );
// console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data); // console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data);
} catch (error) { } catch (error) {
console.log("CLOUDINARY error", error, cloudinaryUploadResponse); console.log("CLOUDINARY error", error.response, cloudinaryUploadResponse);
return { success: false, error: error }; return { success: false, error: error };
} }

2
yarn.lock
View File

@@ -6918,7 +6918,7 @@ p-limit@^2.0.0, p-limit@^2.2.0:
dependencies: dependencies:
p-try "^2.0.0" p-try "^2.0.0"
p-limit@^3.0.2: p-limit@^3.0.2, p-limit@^3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ== integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==