@frontify/frontify-uploader

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.