diff --git a/with-formdata-image-upload/README.md b/with-formdata-image-upload/README.md new file mode 100644 index 0000000..2e2294e --- /dev/null +++ b/with-formdata-image-upload/README.md @@ -0,0 +1,18 @@ +# Image Upload Example + +Try it at https://expo.io/@community/image-upload-example + +## How to use + +### Running the app + +- `cd` into the `app` directory and run `yarn` or `npm install` +- Open `app` with `exp` or XDE, try it out. + +### Running the server + +- By default, the app will use a server that is already deployed in order to upload the image to S3. If you want to deploy your own, follow the steps in the [backend directory](https://github.com/expo/examples/tree/master/with-formdata-image-upload/backend). + +## The idea behind the example + +A common requirement for apps is to be able to upload an image to a server. This example shows how you can use `ImagePicker` to snap a photo or grab it from your camera roll, then use `FormData` with `fetch` to upload it to a server. The `/backend` demsontrates a simple Node app that uploads an image to S3. The `/app` directory contains the Expo app that sends the image to that backend. \ No newline at end of file diff --git a/with-formdata-image-upload/app/.babelrc b/with-formdata-image-upload/app/.babelrc new file mode 100644 index 0000000..2bcd546 --- /dev/null +++ b/with-formdata-image-upload/app/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": ["babel-preset-expo"], + "env": { + "development": { + "plugins": ["transform-react-jsx-source"] + } + } +} diff --git a/with-formdata-image-upload/app/.gitignore b/with-formdata-image-upload/app/.gitignore new file mode 100644 index 0000000..9f9e17e --- /dev/null +++ b/with-formdata-image-upload/app/.gitignore @@ -0,0 +1,3 @@ +node_modules/**/* +.expo/* +npm-debug.* diff --git a/with-formdata-image-upload/app/App.js b/with-formdata-image-upload/app/App.js new file mode 100644 index 0000000..a213b59 --- /dev/null +++ b/with-formdata-image-upload/app/App.js @@ -0,0 +1,192 @@ +import React from 'react'; +import { + ActivityIndicator, + Button, + Clipboard, + Image, + Share, + StatusBar, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import Exponent, { Constants, ImagePicker, registerRootComponent } from 'expo'; + +export default class App extends React.Component { + state = { + image: null, + uploading: false, + }; + + render() { + let { image } = this.state; + + return ( + + + Example: Upload ImagePicker result + + +