shravanmeena/react-native-upload-image-expo

A react-native component for uploading image with Expo ImagePicker API

About

This component is a convenient wrapper around example of image handling from Expo team.

Installation

npm i react-native-upload-image-expo

Usage

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