File uploader

A file uploader with image and video preview using Stencil.js

Requirements

Node.js, at least v16.0.0.

Installation

npm i @jaak.ai/file-uploader --save

Using this component

There are two strategies using the component.

Lazy Loading

You can import a small bootstrap script to lazy load the component.

<script type="module" src="https://unpkg.com/@jaak.ai/file-uploader"></script>

<file-uploader
  placeholder="Selecciona un documento"
  button-text="Subir un documento"
  accept="image/*"
  description="Selecciona un archivo para continuar con el proceso"
  size="5000"
></file-uploader>

You can also import the script as part of your node_modules in your applications entry file:

import '@jaak.ai/file-uploader/dist/file-uploader/file-uploader.esm.js';

Standalone

To use as part of a React component, you can import the component directly via:

import '@jaak.ai/file-uploader';

function App() {
  return (
    <>
      <div>
        <file-uploader
          placeholder="Selecciona un documento"
          button-text="Subir un documento"
          accept="image/*"
          description="Selecciona un archivo para continuar con el proceso"
          size="5000"
        ></file-uploader>
      </div>
    </>
  );
}

export default App;

In Angular you additionally have to configure CUSTOM_ELEMENTS_SCHEMA in the module

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Attributes

| Name | Type | Default | Description | |:-------------:|:-----------------------:|:-----------:|----------------------------------------------------| | mode | "default" \| "button" | default | View mode drag and drop with button or only button | | size | number | 5000 | Allowed files size on Bytes. | | accept | string | undefined | Allowed file types example: image/* video/* | | placeholder | string | undefined | Message to show inside drag and drop area. | | description | string | undefined | Message below drag and drop area. | | button-text | string | undefined | Upload button text. |

Event

| Name | Type | Description | |:------------------:|:---------------------------------:|----------------------------------| | onResult | EventEmitter<string> | Return base64 of selected file. | | onComponentError | EventEmitter<WebComponentError> | Errors during uploading of files |