Leaf File Upload Link

Overview

Leaf's File Upload Link is a widget that allows your customers to upload different machine file formats. These files will then get converted into a consistent output using the Leaf API.

File upload widget

Beta

This is a beta feature.

How it works

The user can add files using the file picker from the Browse button or drop files in the Drag & drop zone. Your files must be in a zip file.

During the upload, the users can see the progress of the upload and they are able to cancel the upload process for the pending files.

Requirements

In addition to being authenticated, you must have at least one Leaf user created. Learn more here.

Get started

1. Sign in with a Leaf account

You will need a Leaf account. If you don't have one yet, you can create it here.

2. Get an access token

To use the widget you will need a Leaf token. Use our authentication guide to know how it works.

Tutorial

React

To add this Leaf widget in a React application, you can use the @withleaf/leaf-link-react library, which is a JavaScript library that provides all Leaf UI Widgets. Here are the general steps to get started:

  1. Install the @withleaf.io/leaf-link-react package using npm:
npm i @withleaf/leaf-link-react
  1. Import the component in your *.tsx file:
import { FileUpload } from '@withleaf/leaf-link-react'
  1. Add the component to the HTML in your *.tsx file. Make sure you already created the Leaf user API key (apiKey), you need to inform it and the Leaf user ID (leafUser) in the required properties in the HTML component. Just add it to the container div. You can also customize it adding your company name (companyName) and company logo (companyLogoUrl). Check all the properties available on the reference here.
function App() {
return (
<div class="container">
<FileUpload
isDarkMode={true}
title={'my custom widget'}
filesTimeRange={30}
companyName={'Company Name'}
companyLogo={ 'url' }
apiKey={ 'apikey' }
leafUser={'leafuserid'}
/>
</div>
);
}

Angular

ANGULAR VERSION

This is an early release for Angular with some limitations. The full version will be released soon. Stay tuned!

File upload widget for Angular

To add this Leaf widget in an Angular application, you can use the @withleaf.io/angular-ui-kit library, which is a JavaScript library that provides all Leaf UI Widgets. Here are the general steps to get started:

  1. Install the @withleaf.io/angular-ui-kit package using npm:
npm i @withleaf.io/angular-ui-kit
  1. Import the library in your component or module file:
import { LeafFileUploadModule } from '@withleaf.io/angular-ui-kit';
  1. Add the component to the HTML. Make sure you already created the Leaf user API key (apiKey), you need to inform it and the Leaf user ID (leafUser) in the required properties in the HTML component. Just add it to the container div.
<div class="container">
<leaf-file-upload apiKey="{apiKey}" leafUser="{yourLeafUserId}">
</leaf-file-upload>
</div>
tip

Here you can run a live use case demo!

Reference

It is valid only for the React version.

Property Overview

NameTypeSummary
apiKeyStringThe authentication API Key
companyLogoUrlStringCustomization: a link to the company logo
companyNameStringCustomization: the name of the company
filesTimeRangeNumberTime to get the historical of uploaded files
isDarkModeBooleanEnables/disables the dark mode
leafUserStringThe Leaf User ID
titleStringCustomization: a link to the company logo

Property Details

apiKey

The apiKey is the authentication key that will allow the use of the widget. It can be created and managed here.

companyLogoUrl

The URL to the company logo. It will be displayed in the landing screen. It can be a PNG, JPEG or SVG.

companyName

The company name. It will be displayed in the landing screen and in each reference about the customer.

filesTimeRange

It sets the interval in days to display files already processed in the past. For example, if set to 30, it will display the list of files sent and processed in the last 30 days.

isDarkMode

If set to true, it will enable the widget dark mode.

Dark mode

leafUser

The Leaf User ID. Check this page for more info about the Leaf User.

title

The text to display on the top of the widget.

Edit this page