Refactor and add file previews

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 (
       <View style={{
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center'
+        paddingTop: 100,
+        paddingLeft: 50,
+        paddingRight: 50
       }}>
-        <SelectAndUploadFileWithUppy
-          state={this.state}
-          selectPhotoTapped={this.selectPhotoTapped}
-          showFilePicker={this.showFilePicker}
-          togglePauseResume={this.togglePauseResume} />
+        <Text style={{
+          fontSize: 25,
+          marginBottom: 20
+        }}>Uppy in React Native</Text>
+        <SelectFiles showFilePicker={this.showFilePicker} />
+        <ProgressBar
+          progress={this.state.progress}
+          total={this.state.total}
+        />
+        <PauseResumeButton
+          isPaused={this.state.isPaused}
+          onPress={this.togglePauseResume}
+          uploadStarted={this.state.uploadStarted}
+          uploadComplete={this.state.uploadComplete} />
+
         <UppyFilePicker
           show={this.state.isFilePickerVisible}
           uppy={this.uppy}
           onRequestClose={this.hideFilePicker}
           serverUrl="http://localhost:3020" />
-      </View>
-    )
-  }
-}
 
-function ProgressBar (props) {
-  const progress = props.progress || 0
-  const total = props.total || 0
-  const percentage = Math.round(progress / total * 100)
+        <FileList uppy={this.uppy} />
 
-  const colorGreen = '#0b8600'
-  const colorBlue = '#006bb7'
-
-  return (
-    <View style={{
-      marginTop: 15,
-      marginBottom: 15
-    }}>
-      <View
-        style={{
-          height: 5,
-          overflow: 'hidden',
-          backgroundColor: '#dee1e3'
-        }}>
-        <View style={{
-          height: 5,
-          backgroundColor: percentage === 100 ? colorGreen : colorBlue,
-          width: percentage + '%'
-        }} />
+        <Text>{this.state.status ? 'Status: ' + this.state.status : null}</Text>
+        <Text>{this.state.progress} of {this.state.total}</Text>
       </View>
-      <Text>{percentage ? percentage + '%' : null}</Text>
-    </View>
-  )
-}
-
-function PauseResumeButton (props) {
-  if (!props.uploadStarted || props.uploadComplete) {
-    return null
+    )
   }
-
-  // return (
-  //   <Button
-  //     onPress={props.onPress}
-  //     color="#bb00cc"
-  //     title={props.isPaused ? 'Resume' : 'Pause'}
-  //     accessibilityLabel={props.isPaused ? 'Resume' : 'Pause'}
-  //   />
-  // )
-
-  return (
-    <TouchableHighlight
-      onPress={props.onPress}
-      style={{
-        backgroundColor: '#006bb7',
-        padding: 10
-      }}>
-      <Text
-        style={{
-          color: '#fff',
-          textAlign: 'center',
-          fontSize: 17
-        }}>{props.isPaused ? 'Resume' : 'Pause'}</Text>
-    </TouchableHighlight>
-  )
-}
-
-function SelectFiles (props) {
-  return (
-    <TouchableHighlight
-      onPress={props.showFilePicker}
-      style={{
-        backgroundColor: '#006bb7',
-        padding: 15
-      }}>
-      <Text
-        style={{
-          color: '#fff',
-          textAlign: 'center',
-          fontSize: 17
-        }}>Select files</Text>
-    </TouchableHighlight>
-  )
-}
-
-function SelectAndUploadFileWithUppy (props) {
-  return (
-    <View>
-      <Text style={{
-        fontSize: 25,
-        marginBottom: 20
-      }}>Uppy in React Native</Text>
-      {/* <TouchableOpacity onPress={props.selectPhotoTapped}>
-        { props.state.file === null
-          ? <Text>Select a Photo</Text>
-          : <Image
-            style={{ width: 200, height: 200 }}
-            source={{ uri: props.state.file.uri }} />
-        }
-        { props.state.uploadURL !== null &&
-          <Button
-            onPress={(ev) => {
-              Linking.openURL(props.state.uploadURL)
-            }}
-            title="Show Uploaded File"
-            accessibilityLabel="Open uploaded file"
-          />
-        }
-      </TouchableOpacity> */}
-      <SelectFiles showFilePicker={props.showFilePicker} />
-      <ProgressBar
-        progress={props.state.progress}
-        total={props.state.total}
-      />
-      <PauseResumeButton
-        isPaused={props.state.isPaused}
-        onPress={props.togglePauseResume}
-        uploadStarted={props.state.uploadStarted}
-        uploadComplete={props.state.uploadComplete} />
-      <Text>{props.state.status ? 'Status: ' + props.state.status : null}</Text>
-      <Text>{props.state.progress} of {props.state.total}</Text>
-    </View>
-  )
 }

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 (
+    <View style={styles.container}>
+      {Object.keys(uppyFiles).map((id, index) => {
+        return <View style={styles.item} key={index}>
+          <Image
+            style={{ width: 100, height: 100, borderRadius: 5, marginBottom: 5 }}
+            source={{ uri: uppyFiles[id].data.uri }} />
+          <Text style={styles.itemName}>{uppyFiles[id].name}</Text>
+          <Text style={styles.itemType}>{uppyFiles[id].type}</Text>
+        </View>
+      })}
+    </View>
+  )
+}
+
+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'
+  }
+})

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 (
+    <TouchableHighlight
+      onPress={props.onPress}
+      style={styles.button}>
+      <Text
+        style={styles.text}>{props.isPaused ? 'Resume' : 'Pause'}</Text>
+    </TouchableHighlight>
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#006bb7',
+    padding: 10
+  },
+  text: {
+    color: '#fff',
+    textAlign: 'center',
+    fontSize: 17
+  }
+})

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 (
+    <View style={{
+      marginTop: 15,
+      marginBottom: 15
+    }}>
+      <View
+        style={{
+          height: 5,
+          overflow: 'hidden',
+          backgroundColor: '#dee1e3'
+        }}>
+        <View style={{
+          height: 5,
+          backgroundColor: percentage === 100 ? colorGreen : colorBlue,
+          width: percentage + '%'
+        }} />
+      </View>
+      <Text>{percentage ? percentage + '%' : null}</Text>
+    </View>
+  )
+}

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 (
+    <TouchableHighlight
+      onPress={props.showFilePicker}
+      style={{
+        backgroundColor: '#006bb7',
+        padding: 15
+      }}>
+      <Text
+        style={{
+          color: '#fff',
+          textAlign: 'center',
+          fontSize: 17
+        }}>Select files</Text>
+    </TouchableHighlight>
+  )
+}

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
     }