Frontify Uploader
The Frontify Uploader is a tool that allows users to upload assets from everywhere to Frontify. It focuses on ease of integration and should be simple to use.
Using the Frontify Uploader allows users to upload assets directly to their Frontify Instance. It handels authorization and the UI - just choose the destination of your assets.
- Simple way to upload assets to Frontify from other applications
- The uploader UI is maintained by Frontify
- Integrated Authentication
This package uses Frontify Authenticator package (@frontify/frontify-authenticator) as an internal dependency.
Installation
Installing the uploader via NPM
npm i @frontify/frontify-uploader
Usage
Import the FrontifyUploader and the style.css into the react project.
import { FrontifyUploader } from "@frontify/frontify-uploader";
import "@frontify/frontify-uploader/dist/style.css";
<FrontifyUploader
clientId={"some client Id"}
domain={"*.frontify.com"}
images={[{
url: "https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoic3VwZXJoZXJvZXNcL2FjY291bnRzXC82OVwvNDAwMTAxMFwvcHJvamVjdHNcLzUzMlwvYXNzZXRzXC8yY1wvMjM0NjFcL2RlOThjY2UwYjNhOWRhNWZlYWMyY2RmZWEwMjRkNTJjLTE2NDYyNDYwMjkuanBnIn0:superheroes:-XI_9LrIho_FyjFQM6TcabsVEgTk_PsZfDeciY41Jto?width={width}",
file: "test-image.jpg",
}]}
/>
Arguments
Argument Name | Type | Required | Defaut | Description |
---|---|---|---|---|
clientId | string | Required | - | Your oAuth2 client id. See OAuth2 Client on how to generate your clientId |
domain | string | Optional | - | Optionally pass a specific domain to which the Finder will be limited too. If not specified, the user will be prompted to enter the domain. |
images | Asset[] |
Required | - | The Assets that should be downloaded. Asset = {file: string; url: string;}
|
enableImageGallery | boolean | Optional | - | Shows a ImageGallery where a subset of the assets can be chosen. |
autoClose | boolean | Optional | true | If the App directly closes after finishing. |
Method callback
Method Name | Argument | Required | Defaut | Description |
---|---|---|---|---|
onCancel | () => void |
Optional | - | Hook that gets called when user cancels. |
onError | (error: Error) => void |
Optional | - | Hook that gets called when an Error occurs. |
onSuccess | (assetIds: string[]) => void |
Optional | - | Hook that gets called on success with the AssetIds. |
Release
To create a new Release and publish it to NPM.
Merge main into next branch. Semantic-release generates the new version and uploads to npm.