# 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 from cli

```
npm i @frontify/frontify-uploader
```

---

## Usage

Import the FrontifyUploader and the style.css into the react project.

```javascript
import { FrontifyUploader } from "@frontify/frontify-uploader";
import "@frontify/frontify-uploader/dist/style.css";

```

```javascript
<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](https://developer.frontify.com/d/XFPCrGNrXQQM/authenticator) 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. 
