README.md

File upload code sample for React Native for ConnectyCube platform

This README introduces a code sample for ConnectyCube platform on how to upload files from React Native to ConnectyCube Storage cloud.

Project contains the following features implemented:

• User login to ConnectyCube platform
• Possibility to make photo via device camera
• Possibility to pick images from device gallery
• Upload the chosen image file to ConnectyCube Storage cloud

Quick review

Install Expo Client application from App Store or Google Play and follow by link to project published at Expo - RNUploadFiles

Quick start and develop

Quick start React Native app: install npm install -g expo-cli and run npm start from the root of this folder.

How to build iOS/Android project

Install npm install -g expo-cli if did not it before and run npm eject from the root of this folder.

Read more about Expo and about React Native getting started guide.

Upload file to ConnectyCube storage without using Expo SDK

Possible to use React Native Image Crop Picker or React Native Image Picker

import React from 'react'
import ConnectyCube from 'connectycube-reactnative'
import { View, Button, Image } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';

const auth = { appId: 0, authKey: '...', authSecret: '...', }
const conf = { debug: { mode: 1 } }
const user = { email: '...', password: '...' }

export default class App extends React.Component {
  state = { imageUri: null }

  componentWillMount() {
    ConnectyCube.init(auth, conf)

    ConnectyCube.createSession(user, (error, session) => {
      if (session) {
        console.log(error);
      } else {
        console.log(failSession)
      }
    })
  }

  pickImageAndUpload()
    // or ImagePicker.openPicker()
    ImagePicker.openCamera({
      cropping: true,
    }).then(image => {
      const data = {
        uri: image.path,
        size: image.size,
        name: image.path.split('/').pop(),
        type: image.mime
      }

      ConnectyCube.storage.createAndUpload({
        file: data,
        size: data.size,
        name: data.name,
        type: data.type,
        public: false
      }, (error, result) => {
        if (result) {
          const imageURL = ConnectyCube.storage.privateUrl(result.uid)
          // const imageURL = ConnectyCube.storage.publicUrl(result.uid) - if public = true

          this.setState({ imageUri: imageURL })
        } else {
          console.log(error)
        }
      })
    });
  }

  render() {
    const { imageUri } = this.state

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <View style={{ marginBottom: 20 }}>
          <Button
            title="Pick from Camera and upload"
            onPress={() => this.pickImageAndUpload()}
          />
        </View>
        { imageUri &&
          <Image
            source={{ uri: imageUri }}
            style={{ width: 300, height: 300 }}
          />
        }
      </View>
    )
  }
}

Can't build yourself?

Got troubles with building Cordova code sample? Just create an issue at Issues page - we will create the sample for you. For FREE!