Added storage upload demo

Author: auser

app/styles/app.js

@@ -19,6 +19,10 @@ export const appStyles = StyleSheet.create({
     right: 0,
     top: 0,
   },
+  description: {
+    paddingHorizontal: 20,
+    paddingVertical: 5
+  },
   center: {
     justifyContent: 'center',
     alignItems: 'center',

app/views/Storage/Demos/Download.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import {
+  View,
+  Text,
+} from 'react-native'
+
+import env from '../../../../config/environment';
+import { Container, Header, Title, Content, Button } from 'native-base';
+import appStyles from '../../../styles/app';
+
+export class DownloadDemo extends React.Component {
+
+  componentWillMount() {
+    const {firestack} = this.props;
+  }
+
+  componentWillUnmount() {
+    const {firestack} = this.props;
+  }
+
+  downloadByUrl() {
+    const {firestack} = this.props;
+    console.log('downloadByUrl called');
+  }
+
+  render() {
+    return (
+      <Container> 
+        <Content>
+          <Button
+            block
+            onPress={this.downloadByUrl.bind(this)}>
+              Download with URL
+          </Button>
+        </Content>
+      </Container>
+    )
+  }
+
+}
+
+export default DownloadDemo

app/views/Storage/Demos/Upload.js

@@ -3,34 +3,108 @@ import React from 'react'
 import {
   View,
   Text,
+  Image
 } from 'react-native'
 
+import { 
+  Container, Header, Title, Content, Button,
+  Card, CardItem, Spinner
+} from 'native-base';
 import appStyles from '../../../styles/app';
+const cat = require('image!cat');
+
+const UploadedImage = ({image}) => {
+  console.log('uploadedImage ->', image);
+  return (
+    <Card>
+      <CardItem>
+          <Text>Uploaded file</Text>
+      </CardItem>
+
+      <CardItem>                        
+          <Image 
+            style={{ resizeMode: 'cover' }} 
+            source={image} /> 
+      </CardItem>
+    </Card>
+  )
+}
 
 export class UploadDemo extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      uploading: false,
+      fileUploaded: null,
+      error: null
+    }
+  }
+
   componentWillMount() {
     const {firestack} = this.props;
+    firestack.storage.setStorageUrl('firestack-example.appspot.com');
   }
 
   componentWillUnmount() {
     const {firestack} = this.props;
   }
 
-  _sendHi() {
+  _uploadFile() {
     const {firestack} = this.props;
+    const storage = firestack.storage;
+    this.setState({
+      fileUploaded: null,
+      uploading: true
+    }, () => {
+      storage.uploadFile(`/assets/images/cat.jpg`, cat.path, {
+        contentType: 'image/jpg'
+      }).then(res => {
+        // And store it
+        const storageRef = firestack.storage.ref(res.fullPath); 
+        storageRef.downloadUrl()
+        .then(filepath => {
+          this.setState({ 
+            fileUploaded: filepath,
+            error: null,
+            uploading: false
+          });
+        });
+      }).catch(err => {
+        console.log('There was an error', err);
+        this.setState({
+          fileUploaded: null,
+          uploading: false,
+          error: err
+        });
+      });
+    });
   }
 
   render() {
+    const { uploading, fileUploaded } = this.state;
     return (
-      <View>
-        <View style={appStyles.row}>
+      <Container>
+        <View style={[appStyles.description, appStyles.center]}>
           <Text>
-            This is a test for dealing with Uploads. 
+            This demo uploads a local resource to the firestack storage
+            and then uses `downloadUrl()` to download and display the image
           </Text>
         </View>
-      </View>
-    )
+
+        <Content>
+          <Button
+            block
+            onPress={this._uploadFile.bind(this)}>
+              Upload file
+          </Button>
+          {fileUploaded && 
+            <UploadedImage image={fileUploaded} />}
+          {uploading && <Spinner />}
+        </Content>
+      </Container>
+   )
   }
 
 }

app/views/Storage/index.js

@@ -12,20 +12,29 @@ import DemoList from '../../components/DemoList';
 
 // Demos
 import Upload from './Demos/Upload';
+import Download from './Demos/Download';
 
 export const Routes = {
   'upload': {
     route: {
       title: 'Upload',
       Component: Upload
     }
+  },
+  'downloads': {
+    route: {
+      title: 'Downloads',
+      Component: Download
+    }
   }
 }
 
 export class Storage extends React.Component {
   render() {
     return (
-      <DemoList routes={Routes} routeKey='storage' />
+      <DemoList {...this.props} 
+      routes={Routes} 
+      routeKey='storage' />
     );
   }
 }

ios/FirestackApp/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/FirestackApp/Images.xcassets/cat.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "cat.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}