· 4 years ago · Feb 24, 2021, 04:16 PM
1/**
2 * Sample React Native App
3 * https://github.com/facebook/react-native
4 *
5 * @format
6 * @flow strict-local
7 */
8
9import React from 'react';
10import {
11 SafeAreaView,
12 StyleSheet,
13 ScrollView,
14 View,
15 Text,
16 StatusBar,
17 TouchableOpacity,
18} from 'react-native';
19import ImagePicker from 'react-native-image-crop-picker';
20import {
21 Header,
22 LearnMoreLinks,
23 Colors,
24 DebugInstructions,
25 ReloadInstructions,
26} from 'react-native/Libraries/NewAppScreen';
27import {RNS3} from 'react-native-aws3';
28import AWS from 'aws-sdk';
29
30const App: () => React$Node = () => {
31 const [photo, setPhoto] = React.useState({});
32 const open = () => {
33 ImagePicker.openCamera({
34 width: 300,
35 height: 400,
36 cropping: true,
37 }).then(async (image) => {
38 const response = await fetch(image.path);
39 const blob = await response.blob();
40 setPhoto(blob);
41 });
42 };
43
44 const file = {
45 // `uri` can also be a file system path (i.e. file://)
46 uri: photo,
47 name: 'image.png',
48 type: 'image/png',
49 };
50
51 console.log(file);
52
53 const options = {
54 // keyPrefix: "uploads/",
55 bucket: 'phoenix-storage',
56 region: 'nyc3',
57 accessKey: 'DQNN3LFXAVWCFGBR7XFB',
58 secretKey: 'w4NLAbIvIhk32gqp4q0uck9J5QlmDCyEj27QhWsBtYY',
59 endpoint: 'nyc3.digitaloceanspaces.com',
60 successActionStatus: 201,
61 };
62 // const handleImageChange = () => {
63 // RNS3.put(file, options)
64 // .then((response) => {
65 // console.log(response);
66 // /**
67 // * {
68 // * postResponse: {
69 // * bucket: "your-bucket",
70 // * etag : "9f620878e06d28774406017480a59fd4",
71 // * key: "uploads/image.png",
72 // * location: "https://your-bucket.s3.amazonaws.com/uploads%2Fimage.png"
73 // * }
74 // * }
75 // */
76 // })
77 // .catch((e) => console.log(e));
78 // };
79
80 console.log('sss', photo.data);
81 const handleImageChange = (e) => {
82 const s3bucket = new AWS.S3({
83 endpoint: 'nyc3.digitaloceanspaces.com',
84 accessKeyId: 'DQNN3LFXAVWCFGBR7XFB',
85 secretAccessKey: 'w4NLAbIvIhk32gqp4q0uck9J5QlmDCyEj27QhWsBtYY',
86 });
87
88 const params = {
89 Body: photo,
90 Bucket: 'phoenix-storage',
91 Key: photo.data.name,
92 };
93 s3bucket
94 .putObject(params)
95 .on('build', (request) => {
96 request.httpRequest.headers.Host = `https://phoenix-storage.nyc3.digitaloceanspaces.com`;
97 // Note: I am assigning the size to the file Stream manually
98 request.httpRequest.headers['Content-Length'] = photo.data.size;
99 request.httpRequest.headers['Content-Type'] = photo.data.type;
100 request.httpRequest.headers['Access-Control-Allow-Origin'] = '*'; // optional
101 request.httpRequest.headers['x-amz-acl'] = 'public-read';
102 })
103 .send((err, data) => {
104 if (err) {
105 console.log(err, err.stack);
106 } else {
107 const imageUrl = `https://phoenix-storage.nyc3.cdn.digitaloceanspaces.com/${photo.data.name}`;
108 // console.log(imageUrl, 'ini respon url image')
109 console.log('urlImage: ', imageUrl);
110 }
111 });
112 };
113
114 return (
115 <View>
116 <TouchableOpacity onPress={open}>
117 <Text>OPEN</Text>
118 </TouchableOpacity>
119 <TouchableOpacity onPress={handleImageChange}>
120 <Text>UPLOAD</Text>
121 </TouchableOpacity>
122 </View>
123 );
124};
125
126const styles = StyleSheet.create({
127 scrollView: {
128 backgroundColor: Colors.lighter,
129 },
130 engine: {
131 position: 'absolute',
132 right: 0,
133 },
134 body: {
135 backgroundColor: Colors.white,
136 },
137 sectionContainer: {
138 marginTop: 32,
139 paddingHorizontal: 24,
140 },
141 sectionTitle: {
142 fontSize: 24,
143 fontWeight: '600',
144 color: Colors.black,
145 },
146 sectionDescription: {
147 marginTop: 8,
148 fontSize: 18,
149 fontWeight: '400',
150 color: Colors.dark,
151 },
152 highlight: {
153 fontWeight: '700',
154 },
155 footer: {
156 color: Colors.dark,
157 fontSize: 12,
158 fontWeight: '600',
159 padding: 4,
160 paddingRight: 12,
161 textAlign: 'right',
162 },
163});
164
165export default App;
166