file-uploader Component

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

Properties

| Property | Type | Description | |----------------------|--------|-------------------------------------------------------------------| | config | Object | Configuration for the file uploader component. | | config.size | number | Allowed files size on Bytes. | | config.accept | string | Allowed file types example: image/* video/* | | config.description | string | Message below drag and drop area. | | config.buttonText | string | Upload button text. | | config.placeholder | string | Indicates whether error messages should be shown. Default: false. | | config.mode | string | View mode drag and drop with button or only button |

Events

• componentError: Fired when an error occurs in the component.

Methods

• selectFileHandler(): Open dialog for selection file.
• onRemovedSelected(): Remove selected file.

Usage Example

<file-uploader
  config={{
    placeholder: "Selecciona un documento",
    buttonText: "Subir un documento",
    accept: "image/*",
    description: "Selecciona un archivo para continuar con el proceso",
    size: 5000
  }}
onComponentError={(event) => handleComponentError(event.detail)}
></file-uploader>

Usage in JavaScript

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></file-uploader>

<script>
  const fileUploader = document.querySelector('file-uploader');
  fileUploader.config = {
    placeholder: 'Selecciona una imagen',
    accept: 'image/*'
  };
</script>

Usage in React

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
          config={{
            placeholder: "Selecciona un documento",
            buttonText: "Subir un documento",
            accept: "image/*",
            description: "Selecciona un archivo para continuar con el proceso",
            size: 5000
          }}
        ></file-uploader>
      </div>
    </>
  );
}

export default App;

Usage in Angular

In Angular you additionally have to configure CUSTOM_ELEMENTS_SCHEMA in the module

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Import to main.ts file

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

  <file-uploader
    [config]="{
      placeholder: 'Selecciona un documento',
      buttonText: 'Subir un documento',
      accept: 'image/*',
      description: 'Selecciona un archivo para continuar con el proceso',
      size: 5000
    }"
  ></file-uploader>

Error interface

When the component fails, it throws an error with next interface details:

interface webComponentError {
  label: string;
  code?: string;
  details?: any;
}

This component is owned by JAAK and is their intellectual property. Visit more details in https://jaak.ai