A file uploader with image and video preview using Stencil.js
| 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 |
-
componentError: Fired when an error occurs in the component.
-
selectFileHandler(): Open dialog for selection file. -
onRemovedSelected(): Remove selected file.
<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>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>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;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>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