Adjusted camera stack and app reducer.
This commit is contained in:
Patrick Fic
@@ -1,247 +1,47 @@
|
||||
// import React, { useEffect } from "react";
|
||||
// import * as FileSystem from "expo-file-system";
|
||||
// import { Button, Image, View, Text } from "react-native";
|
||||
// import * as ImagePicker from "expo-image-picker";
|
||||
// import Constants from "expo-constants";
|
||||
// import * as Permissions from "expo-permissions";
|
||||
|
||||
// export default function ScreenMediaCache() {
|
||||
// FileSystem.readDirectoryAsync(FileSystem.documentDirectory).then((p) => {
|
||||
// console.log(p);
|
||||
// });
|
||||
|
||||
// useEffect(() => {
|
||||
// (async () => {
|
||||
// if (Constants.platform.ios) {
|
||||
// const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
|
||||
// if (status !== "granted") {
|
||||
// alert("Sorry, we need camera roll permissions to make this work!");
|
||||
// }
|
||||
// }
|
||||
// })();
|
||||
// }, []);
|
||||
|
||||
// return (
|
||||
// <View>
|
||||
// <Text>This is the media cache screen.</Text>
|
||||
// <Button title="Pick an Image from Album" />
|
||||
// {image && (
|
||||
// <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
|
||||
// )}
|
||||
// </View>
|
||||
// );
|
||||
// }
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Button,
|
||||
Clipboard,
|
||||
Image,
|
||||
Share,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { Constants } from "expo";
|
||||
import * as Permissions from "expo-permissions";
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
export default class App extends Component {
|
||||
state = {
|
||||
image: null,
|
||||
uploading: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
let { image } = this.state;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="default" />
|
||||
|
||||
<Text style={styles.exampleText}>
|
||||
Example: Upload ImagePicker result
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
onPress={this._pickImage}
|
||||
title="Pick an image from camera roll"
|
||||
/>
|
||||
|
||||
<Button onPress={this._takePhoto} title="Take a photo" />
|
||||
|
||||
{this._maybeRenderImage()}
|
||||
{this._maybeRenderUploadingOverlay()}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_maybeRenderUploadingOverlay = () => {
|
||||
if (this.state.uploading) {
|
||||
return (
|
||||
<View style={[StyleSheet.absoluteFill, styles.maybeRenderUploading]}>
|
||||
<ActivityIndicator color="#fff" size="large" />
|
||||
</View>
|
||||
import * as FileSystem from "expo-file-system";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { SafeAreaView, Text } from "react-native";
|
||||
import { Button, Text as NBText } from "native-base";
|
||||
export default function ScreenMediaCache() {
|
||||
const [images, setImages] = useState([]);
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setImages(
|
||||
(
|
||||
await FileSystem.readDirectoryAsync(
|
||||
FileSystem.documentDirectory + "photos"
|
||||
)
|
||||
).map((f) => {
|
||||
return {
|
||||
uri: FileSystem.documentDirectory + "photos/" + f,
|
||||
dimensions: { width: 2142, height: 4224 },
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
})();
|
||||
}, []);
|
||||
|
||||
_maybeRenderImage = () => {
|
||||
let { image } = this.state;
|
||||
|
||||
if (!image) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.maybeRenderContainer}>
|
||||
<View style={styles.maybeRenderImageContainer}>
|
||||
<Image source={{ uri: image }} style={styles.maybeRenderImage} />
|
||||
</View>
|
||||
|
||||
<Text
|
||||
onPress={this._copyToClipboard}
|
||||
onLongPress={this._share}
|
||||
style={styles.maybeRenderImageText}
|
||||
>
|
||||
{image}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
_share = () => {
|
||||
Share.share({
|
||||
message: this.state.image,
|
||||
title: "Check out this photo",
|
||||
url: this.state.image,
|
||||
});
|
||||
};
|
||||
|
||||
_copyToClipboard = () => {
|
||||
Clipboard.setString(this.state.image);
|
||||
alert("Copied image URL to clipboard");
|
||||
};
|
||||
|
||||
_takePhoto = async () => {
|
||||
const { status: cameraPerm } = await Permissions.askAsync(
|
||||
Permissions.CAMERA
|
||||
);
|
||||
|
||||
const { status: cameraRollPerm } = await Permissions.askAsync(
|
||||
Permissions.CAMERA_ROLL
|
||||
);
|
||||
|
||||
// only if user allows permission to camera AND camera roll
|
||||
if (cameraPerm === "granted" && cameraRollPerm === "granted") {
|
||||
let pickerResult = await ImagePicker.launchCameraAsync({
|
||||
allowsMultipleSelection: true,
|
||||
quality: 0.8,
|
||||
//allowsEditing: true,
|
||||
aspect: [4, 3],
|
||||
});
|
||||
|
||||
if (!pickerResult.cancelled) {
|
||||
this.setState({ image: pickerResult.uri });
|
||||
}
|
||||
|
||||
this.uploadImageAsync(pickerResult.uri);
|
||||
}
|
||||
};
|
||||
|
||||
_pickImage = async () => {
|
||||
const { status: cameraRollPerm } = await Permissions.askAsync(
|
||||
Permissions.CAMERA_ROLL
|
||||
);
|
||||
|
||||
// only if user allows permission to camera roll
|
||||
if (cameraRollPerm === "granted") {
|
||||
let pickerResult = await ImagePicker.launchImageLibraryAsync({
|
||||
allowsEditing: true,
|
||||
base64: true,
|
||||
aspect: [4, 3],
|
||||
});
|
||||
|
||||
if (!pickerResult.cancelled) {
|
||||
this.setState({ image: pickerResult.uri });
|
||||
}
|
||||
|
||||
this.uploadImageAsync(pickerResult.uri);
|
||||
}
|
||||
};
|
||||
|
||||
uploadImageAsync(pictureuri) {
|
||||
let apiUrl = "http://123.123.123.123/ABC";
|
||||
|
||||
var data = new FormData();
|
||||
data.append("file", {
|
||||
uri: pictureuri,
|
||||
name: "file",
|
||||
type: "image/jpg",
|
||||
});
|
||||
|
||||
fetch(apiUrl, {
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
method: "POST",
|
||||
body: data,
|
||||
})
|
||||
.then((response) => {
|
||||
console.log("succ ");
|
||||
console.log(response);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err ");
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<SafeAreaView style={{ display: "flex", flex: 1 }}>
|
||||
<Text>This is the media cache screen.</Text>
|
||||
<Button
|
||||
block
|
||||
onPress={async () => {
|
||||
const fps = (
|
||||
await FileSystem.readDirectoryAsync(
|
||||
FileSystem.documentDirectory + "photos"
|
||||
)
|
||||
).map((f) => {
|
||||
return FileSystem.documentDirectory + "photos/" + f;
|
||||
});
|
||||
const all = [];
|
||||
fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
|
||||
await Promise.all(all);
|
||||
console.log("All photos deleted.");
|
||||
}}
|
||||
>
|
||||
<NBText>Delete all</NBText>
|
||||
</Button>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
alignItems: "center",
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
},
|
||||
exampleText: {
|
||||
fontSize: 20,
|
||||
marginBottom: 20,
|
||||
marginHorizontal: 15,
|
||||
textAlign: "center",
|
||||
},
|
||||
maybeRenderUploading: {
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0,0,0,0.4)",
|
||||
justifyContent: "center",
|
||||
},
|
||||
maybeRenderContainer: {
|
||||
borderRadius: 3,
|
||||
elevation: 2,
|
||||
marginTop: 30,
|
||||
shadowColor: "rgba(0,0,0,1)",
|
||||
shadowOpacity: 0.2,
|
||||
shadowOffset: {
|
||||
height: 4,
|
||||
width: 4,
|
||||
},
|
||||
shadowRadius: 5,
|
||||
width: 250,
|
||||
},
|
||||
maybeRenderImageContainer: {
|
||||
borderTopLeftRadius: 3,
|
||||
borderTopRightRadius: 3,
|
||||
overflow: "hidden",
|
||||
},
|
||||
maybeRenderImage: {
|
||||
height: 250,
|
||||
width: 250,
|
||||
},
|
||||
maybeRenderImageText: {
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user