About
This component is a convenient wrapper around example of image handling from Expo team.
Installation
npm i react-native-upload-image-expoUsage
See example:
<ImageUploadExpo
method="POST"
endpoint="https://file-upload-example-backend-dkhqoilqqn.now.sh/upload"
payloadKey="photo"
onFailure={(error) => console.warn(error)}
onSuccess={(image, rawResponse) => {
console.log(`Image URL: ${image.location}`);
console.log('headers: ', rawResponse.headers);
}}
onStartUpload={() => console.log('Upload has begun!')}
headers={{
'uid': '...',
'client': '...',
'access-token': '...',
}}
>
{props => (
<TouchableOpacity
onPress={props.askPermission}
>
<ImageUI
loading={props.loading}
error={props.error}
image={props.image}
/>
</TouchableOpacity>
)}
</ImageUploadExpo>Options
| Property | Type | Description | Required |
|---|---|---|---|
| endpoint | string | Your server's endpoint | Yes |
| method | enum: 'POST', 'PUT', 'PATCH' | Query method | Yes |
| payloadKey | string | The key in the payload object to server { "photo": {...} } |
Yes |
| headers | Object | Array of headers for the server request. Useful for authorization. | No |
| onSuccess | Function(image, rawResponse) | A function called after upload succeeds | No |
| onFailure | Function(error) | A function called if upload fails | No |
| onStartUpload | Function | A function called before upload begins | No |
iOS specific options
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| alertMessage | string | A message shown to the user in case if he denies access to photo library | No | This applicaton needs access to your photo library to upload images. Please go to Settings of your device and grant permissions to Photos. |
| alertTitle | string | Title for that message | No | Please Allow Access |
| alertNo | string | Cancel button text for alert | No | Not Now |
| alertYes | string | Text for button which forwards user to the settings page | No | Settings |