Widgets > File upload

Beta

This is a beta feature.

This widget allows the user to upload different machine files formats for conversion using the Leaf API.

File upload widget

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.

Add it to your application

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 and a Leaf user ID 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