diff --git a/examples/react-native-expo/App.js b/examples/react-native-expo/App.js
index ea62191c7..f8c9875a4 100644
--- a/examples/react-native-expo/App.js
+++ b/examples/react-native-expo/App.js
@@ -2,16 +2,17 @@
import React from 'react'
import {
Text,
- View,
- AsyncStorage,
- // TouchableOpacity,
- TouchableHighlight
- // Image,
+ View
+ // AsyncStorage
// Linking
} from 'react-native'
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import UppyFilePicker from './react-native/file-picker'
+import FileList from './FileList'
+import PauseResumeButton from './PauseResumeButton'
+import ProgressBar from './ProgressBar'
+import SelectFiles from './SelectFilesButton'
function hashCode (str) {
// from https://stackoverflow.com/a/8831937/151666
@@ -28,15 +29,11 @@ function hashCode (str) {
}
function customFingerprint (file, options) {
- console.log('_____________________')
- console.log('FILE:')
- console.log(file)
- console.log('_____________________')
let exifHash = 'noexif'
if (file.exif) {
exifHash = hashCode(JSON.stringify(file.exif))
}
- console.log(exifHash)
+ // console.log(exifHash)
const fingerprint = ['tus', file.name || 'noname', file.size || 'nosize', exifHash].join('/')
console.log(fingerprint)
return fingerprint
@@ -61,8 +58,6 @@ export default class App extends React.Component {
typeof navigator.product === 'string' &&
navigator.product.toLowerCase() === 'reactnative')
- this.startUpload = this.startUpload.bind(this)
- // this.selectPhotoTapped = this.selectPhotoTapped.bind(this)
this.showFilePicker = this.showFilePicker.bind(this)
this.hideFilePicker = this.hideFilePicker.bind(this)
this.togglePauseResume = this.togglePauseResume.bind(this)
@@ -71,7 +66,7 @@ export default class App extends React.Component {
this.uppy = Uppy({ autoProceed: true, debug: true })
this.uppy.use(Tus, {
endpoint: 'https://master.tus.io/files/',
- urlStorage: AsyncStorage,
+ // urlStorage: AsyncStorage,
fingerprint: customFingerprint
})
this.uppy.on('upload-progress', (file, progress) => {
@@ -96,36 +91,6 @@ export default class App extends React.Component {
})
}
- // selectPhotoTapped () {
- // console.log('Selecting photo...')
-
- // Expo.Permissions.askAsync(Expo.Permissions.CAMERA_ROLL).then((isAllowed) => {
- // if (!isAllowed) return
-
- // Expo.ImagePicker.launchImageLibraryAsync({
- // mediaTypes: 'All'
- // })
- // .then((result) => {
- // console.log(result)
- // if (!result.cancelled) {
- // this.setState({ file: result })
- // this.uppy.addFile({
- // source: 'React Native',
- // name: 'photo.jpg',
- // type: result.type,
- // data: result
- // })
- // }
- // })
- // })
- // }
-
- startUpload () {
- this.setState({
- status: 'Uploading...'
- })
- }
-
showFilePicker () {
this.setState({
isFilePickerVisible: true,
@@ -154,151 +119,39 @@ export default class App extends React.Component {
}
}
- resumeAll () {
- this.uppy.resumeAll()
- this.setState({
- isPaused: false
- })
- }
-
render () {
return (
-
+ Uppy in React Native
+
+
+
+
+
+
+
+ {this.state.status ? 'Status: ' + this.state.status : null}
+ {this.state.progress} of {this.state.total}
)
}
}
-
-function ProgressBar (props) {
- const progress = props.progress || 0
- const total = props.total || 0
- const percentage = Math.round(progress / total * 100)
-
- const colorGreen = '#0b8600'
- const colorBlue = '#006bb7'
-
- return (
-
-
-
-
- {percentage ? percentage + '%' : null}
-
- )
-}
-
-function PauseResumeButton (props) {
- if (!props.uploadStarted || props.uploadComplete) {
- return null
- }
-
- // return (
- //
- // )
-
- return (
-
- {props.isPaused ? 'Resume' : 'Pause'}
-
- )
-}
-
-function SelectFiles (props) {
- return (
-
- Select files
-
- )
-}
-
-function SelectAndUploadFileWithUppy (props) {
- return (
-
- Uppy in React Native
- {/*
- { props.state.file === null
- ? Select a Photo
- :
- }
- { props.state.uploadURL !== null &&
- */}
-
-
-
- {props.state.status ? 'Status: ' + props.state.status : null}
- {props.state.progress} of {props.state.total}
-
- )
-}
diff --git a/examples/react-native-expo/FileList.js b/examples/react-native-expo/FileList.js
new file mode 100644
index 000000000..74889deab
--- /dev/null
+++ b/examples/react-native-expo/FileList.js
@@ -0,0 +1,43 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import { StyleSheet, View, Text, Image } from 'react-native'
+
+export default function FileList (props) {
+ const uppyFiles = props.uppy.state.files
+
+ return (
+
+ {Object.keys(uppyFiles).map((id, index) => {
+ return
+
+ {uppyFiles[id].name}
+ {uppyFiles[id].type}
+
+ })}
+
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ marginTop: 20,
+ marginBottom: 20
+ },
+ item: {
+ width: 150,
+ height: 150,
+ marginTop: 5,
+ marginBottom: 5
+ },
+ itemName: {
+ fontSize: 14,
+ color: '#2c3e50',
+ fontWeight: '600'
+ },
+ itemType: {
+ fontWeight: '600',
+ fontSize: 12,
+ color: '#95a5a6'
+ }
+})
diff --git a/examples/react-native-expo/PauseResumeButton.js b/examples/react-native-expo/PauseResumeButton.js
new file mode 100644
index 000000000..1dff51d62
--- /dev/null
+++ b/examples/react-native-expo/PauseResumeButton.js
@@ -0,0 +1,29 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import { StyleSheet, Text, TouchableHighlight } from 'react-native'
+
+export default function PauseResumeButton (props) {
+ if (!props.uploadStarted || props.uploadComplete) {
+ return null
+ }
+
+ return (
+
+ {props.isPaused ? 'Resume' : 'Pause'}
+
+ )
+}
+
+const styles = StyleSheet.create({
+ button: {
+ backgroundColor: '#006bb7',
+ padding: 10
+ },
+ text: {
+ color: '#fff',
+ textAlign: 'center',
+ fontSize: 17
+ }
+})
diff --git a/examples/react-native-expo/ProgressBar.js b/examples/react-native-expo/ProgressBar.js
new file mode 100644
index 000000000..c42676f61
--- /dev/null
+++ b/examples/react-native-expo/ProgressBar.js
@@ -0,0 +1,32 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import { View, Text } from 'react-native'
+
+export default function ProgressBar (props) {
+ const progress = props.progress || 0
+ const total = props.total || 0
+ const percentage = Math.round(progress / total * 100)
+
+ const colorGreen = '#0b8600'
+ const colorBlue = '#006bb7'
+
+ return (
+
+
+
+
+ {percentage ? percentage + '%' : null}
+
+ )
+}
diff --git a/examples/react-native-expo/SelectFilesButton.js b/examples/react-native-expo/SelectFilesButton.js
new file mode 100644
index 000000000..65b7df7a7
--- /dev/null
+++ b/examples/react-native-expo/SelectFilesButton.js
@@ -0,0 +1,20 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import { Text, TouchableHighlight } from 'react-native'
+
+export default function SelectFiles (props) {
+ return (
+
+ Select files
+
+ )
+}
diff --git a/examples/react-native-expo/react-native/file-picker/index.js b/examples/react-native-expo/react-native/file-picker/index.js
index 329d09870..72dc3936f 100644
--- a/examples/react-native-expo/react-native/file-picker/index.js
+++ b/examples/react-native-expo/react-native/file-picker/index.js
@@ -24,9 +24,9 @@ export default class UppyReactNativeFilePicker extends React.Component {
{ id: 'LocalImages', title: 'Pick Local Images/Videos' },
{ id: 'LocalDocuments', title: 'Pick Documents' },
{ id: 'LocalCamera', title: 'Take a Picture' },
- { id: 'Url', title: 'Url' },
- { id: 'GoogleDrive', title: 'Google Drive' },
- { id: 'Instagram', title: 'Instagram' }
+ { id: 'Url', title: 'Url' }
+ // { id: 'GoogleDrive', title: 'Google Drive' },
+ // { id: 'Instagram', title: 'Instagram' }
],
openProvider: null
}