@rpldy/uploady
Installation
- npm
- Yarn
- pnpm
npm install @rpldy/uploady
yarn add @rpldy/uploady
pnpm add @rpldy/uploady
Details
This is the main UI package. Its role is to initialize and expose the uploader functionality. It also contains and initializes the Context Provider that all other UI packages rely on.
Uploady provides multiple hooks that enable more advanced features and exposes data for client apps.
Typically, only once instance of Uploady should be enough for an application.
Rendering Uploady does three main things:
-
Create an instance of the uploader object, which manages the actual upload data and passes it to the configured sender.
-
Create a UploadyContext (Reactjs context) instance.
-
Render a (hidden) file input element will to the page. This element will be used to show the file chooser prompt to the user.
In order to use one of the components provided by react-uploady, or one of the hooks, you need to wrap them with <Uploady>. Internally, this will give them access to the UploadyContext.
The different upload initiators (ex: upload-button, upload-drop-zone, etc)
Example
import Uploady from "@rpldy/uploady";
const App = () => (
<Uploady
multiple
grouped
maxGroupSize={2}
method="PUT"
destination={{ url: "https://my-server", headers: { "x-custom": "123" } }}>
<RestOfMyApp/>
</Uploady>
)
Exports
- Uploady
- useFileInput
- useBatchAddListener
- useBatchStartListener
- useBatchProgressListener
- useBatchFinishListener
- useBatchCancelledListener
- useBatchAbortListener
- useBatchErrorListener
- useBatchFinalizeListener
- useItemStartListener
- useItemFinishListener
- useItemProgressListener
- useItemCancelListener
- useItemErrorListener
- useItemAbortListener
- useItemFinalizeListener
- useUploadOptions
- useAbortItem
- useAbortBatch
- useAbortAll
- useUploader
- BATCH_STATES
- FILE_STATES