native-uploady

Native Uploady

This is the main UI package for React-Native. Its role is to initialize and expose the uploader functionality. It contains the Provider that all other UI packages rely on.

It provides multiple hooks that enable more advanced features and data for client apps.

The difference between this package and the main Uploady is that this one doesn't use react-dom (for obvious reasons) and doesn't create a file input element.

The best place to get started is at our: React-Uploady Documentation Website

Installation

#Yarn: 
   $ yarn add @rpldy/native-uploady

#NPM:
   $ npm i @rpldy/native-uploady

Props

This package is just about identical to the main Uploady package. See Props documentation in the main readme.

All props are identical besides the ones related to file input (ex: multiple, accept, etc.), which cannot be used with the native flavor.

Example

To be able to use one of the UI Components or one of the hooks, you need to wrap them with Uploady. This will give them access to the UploadyContext.

import React, { useCallback } from "react";
import { View, Button } from "react-native";
import DocumentPicker from "react-native-document-picker/index";
import NativeUploady from "@rpldy/native-uploady";

const Upload = () => {

  const pickFile = useCallback(async () => {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.images],
      });

      uploadyContext.upload(res);
  }, [uploadyContext]);

    return <View>
               <Button title="Upload File" onPress={pickFile} />
          </View>;
};

const App = () => (<NativeUploady    
    grouped
    maxGroupSize={2}
    method="PUT"
    destination={{url: "https://my-server", headers: {"x-custom": "123"}}}>
    
    <Upload/>
    <RestOfMyApp/>
</NativeUploady>)

Documentation

See documentation for events/hooks and more in the main Uploady readme