@frontify/frontify-uploader NPM

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.