Leaf Link > File upload widget

Overview

This widget allows the user to upload different machine files formats for conversion 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

This widget is only available for Angular.

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. You need your Leaf token (leafToken) and a Leaf user ID (leafUser) to set the required properties in the HTML component. Just add it to the container div.
<div class="container">
<leaf-file-upload leafToken="{yourLeafToken}" leafUser="{yourLeafUserId}">
</leaf-file-upload>
</div>
tip

Here you can run a live use case demo!

Edit this page