Node.js, at least v16.0.0.
npm i @jaak.ai/file-uploader --saveThere are two strategies using the component.
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';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]| 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. |
| Name | Type | Description |
|---|---|---|
onResult |
EventEmitter<string> |
Return base64 of selected file. |
onComponentError |
EventEmitter<WebComponentError> |
Errors during uploading of files |