# 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

```html

<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.

```html

<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 <file-uploader /> as part of a React component, you can import the component directly via:

```tsx
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

```ts
schemas: [CUSTOM_ELEMENTS_SCHEMA]
```
Import to main.ts file
```ts 
import '@jaak.ai/file-uploader';
```
```html
  <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:

```html
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