Add Url

examples/react-native-expo/react-native/file-picker/index.js

@@ -24,6 +24,7 @@ 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' }
       ],
@@ -37,6 +38,11 @@ export default class UppyReactNativeFilePicker extends React.Component {
 
   componentDidMount () {
     this.uppy = this.props.uppy
+
+    this.uppy.on('info-visible', () => {
+      const info = this.uppy.getState().info
+      console.log('uppy-info', info)
+    })
   }
 
   takePicture () {
@@ -112,7 +118,7 @@ export default class UppyReactNativeFilePicker extends React.Component {
         <TouchableOpacity
           style={{
             alignItems: 'center',
-            backgroundColor: '#DDDDDD',
+            backgroundColor: '#c6e1f3',
             marginBottom: 10,
             padding: 10
           }}
@@ -124,7 +130,7 @@ export default class UppyReactNativeFilePicker extends React.Component {
             <TouchableOpacity
               style={{
                 alignItems: 'center',
-                backgroundColor: '#DDDDDD',
+                backgroundColor: '#c6e1f3',
                 marginBottom: 10,
                 padding: 10
               }}
@@ -149,7 +155,10 @@ export default class UppyReactNativeFilePicker extends React.Component {
           Expo.Alert.alert('Modal has been closed.')
           this.props.onRequestClose()
         }}>
-        {this.state.openProvider ? <Provider id={this.state.openProvider} uppy={this.uppy} /> : this.renderSourceList()}
+        {this.state.openProvider
+          ? <Provider id={this.state.openProvider} uppy={this.uppy} />
+          : this.renderSourceList()
+        }
       </Modal>
     )
   }

examples/react-native-expo/react-native/file-picker/url.js

@@ -0,0 +1,93 @@
+import React from 'react'
+
+import {
+  // StyleSheet,
+  TouchableOpacity,
+  Text,
+  TextInput,
+  View } from 'react-native'
+import Url from '@uppy/url'
+
+export default class UppyRNUrl extends React.Component {
+  constructor () {
+    super()
+
+    this.state = {
+      url: null
+    }
+
+    this.onPressImport = this.onPressImport.bind(this)
+  }
+
+  componentDidMount () {
+    this.uppy = this.props.uppy
+    this.uppy.use(Url, {
+      id: 'uppyRN:Url',
+      serverUrl: 'http://localhost:3020'
+    })
+    this.plugin = this.uppy.getPlugin('uppyRN:Url')
+  }
+
+  componentWillUnmount () {
+    this.uppy.removePlugin(this.plugin)
+  }
+
+  onPressImport () {
+    this.plugin.addFile(this.state.url)
+      .then(() => {
+        console.log('success')
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+
+  render () {
+    return (
+      <View style={{
+        flex: '1',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        <TextInput
+          style={{
+            width: '90%',
+            height: 40,
+            borderColor: '#7f8a93',
+            borderWidth: 1,
+            padding: 5,
+            marginBottom: 15
+          }}
+          onChangeText={(text) => this.setState({
+            url: text
+          })}
+          placeholder="Enter URL to import a file"
+        />
+        <TouchableOpacity
+          style={{
+            alignItems: 'center',
+            backgroundColor: '#2275d7',
+            paddingHorizontal: 15,
+            paddingVertical: 8
+          }}
+          onPress={this.onPressImport}>
+          <Text style={{ color: '#fff' }}>Import</Text>
+        </TouchableOpacity>
+        <Text>{this.state.text}</Text>
+      </View>
+    )
+  }
+}
+
+// const styles = StyleSheet.create({
+//   container: {
+//     justifyContent: 'center',
+//     flex: 1,
+//     paddingTop: 30
+//   },
+//   item: {
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     height: 100
+//   }
+// })