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.