Guides
Start typing to search…

File-Uploader

File Uploader es un componente web construido con StencilJs que permite subir imágenes y videos cargando la vista previa del archivo.

Si deseas consultar la documentación de NPM, por favor visita este enlace file-uploader Component.

Objetivo

Proporcionar una herramienta del desarrollo web de carga de imágenes y videos adaptable a diferentes aplicaciones y configuraciones.

Instalación

Antes de comenzar, asegúrese de tener instalado Node.js y npm en su máquina. Estas herramientas son necesarias para instalar y administrar las dependencias del proyecto.

  1. Node.js: Asegúrate de tener Node.js instalado en tu sistema. Puedes descargarlo e instalarlo desde aquí.
node --version
  1. npm: npm (Node Package Manager) generalmente se instala junto con Node.js. Verifica la instalación de npm con el siguiente comando:
npm -v

Una vez confirmado lo anterior, instala el paquete utilizando npm:

npm install @jaak.ai/file-uploader

Código Muestra

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

Configuración

El componente puede ser configurado con múltiples opciones para adaptarse a las necesidades específicas de tu aplicación. Las propiedades incluyen el tamaño máximo del archivo, el tipo de archivos permitidos, el texto y la descripción mostrados en la interfaz, así como el modo de operación, entre otros:

PropiedadTipoDescripción
sizestringTamaño máximo permitido del archivo en kilobytes. Valor por defecto: 5000.
acceptstringTipo de archivos permitidos. Por ejemplo: image/ video/
descriptionbooleanDescripción mostrada cerca de la entrada de archivo.
buttonTextstringTexto mostrado en el botón de carga.
placeholderstringTexto del marcador de posición para la entrada de archivo.
modestringModo operativo, ya sea "drag and drop" o solo "button".

Eventos

El FileUploaderComponent emite varios eventos que pueden ser utilizados para responder a cambios de estado, errores y resultados de archivos. Estos incluyen componentError, y result.

EventoDescripción
componentErrorEmitido cuando ocurre un error en el componente.
fileResultEmitido con el resultado de la operación del archivo.

Interfaces

FileUploaderResult Interface

La interfaz FileResult proporciona información detallada sobre el resultado de una operación de archivo:

PropiedadTipoDescripción
base64stringCadena codificada en Base64 del contenido del archivo.
typestringTipo MIME del archivo (opcional).
filenamestringNombre original del archivo (opcional).
sizenumberTamaño del archivo en bytes (opcional).
sizeDescriptionstringDescripción del tamaño en KB, MB, etc. del archivo seleccionado.
pngBase64stringCadena codificada en Base64 del contenido del archivo, para archivos que no tienen una previsualización nativa en el navegador como tif o tiff.

Error Interface

Cuando el componente falla, genera un error con los siguientes detalles de la interfaz:

PropiedadTipoDescripción
labelstringEtiqueta que describe el error.
codestringCódigo identificador del error.
detailsanyInformación adicional sobre el error.

Métodos

El componente ofrece varios métodos para interactuar con él:

  • selectFileHandler(): Abrir el diálogo para seleccionar un archivo.
  • onRemovedSelected(): Eliminar el archivo seleccionado.

Ejemplos

Revisa las diferentes implementaciones paso a paso y nuestra implementación web de JavaScript en codepen.io.

JS

Ejemplo HTML and JavaScript

Utilizando node, y una vez que el paquete file-uploader se encuentra instalado:

  1. Crea un archivo HTML

Crea un archivo HTML (por ejemplo, index.html). Copia y pega el siguiente código en el archivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Uploader Example</title>
  <script type="module" src="https://unpkg.com/@jaak.ai/file-uploader"></script>
</head>
<body>
    <!-- Incluir el componente File Uploader -->
    <file-uploader id="fileUploader"></file-uploader>
    <script type="module">
        // Seleccionar el componente file-uploader
        const fileUploader= document.getElementById('fileUploader');
        // Configurar el componente con los ajustes iniciales
        fileUploader.config = {
            placeholder: 'Upload your image',
            buttonText: 'Upload File',
            accept: 'image/*',
            description: 'Please upload an image',
            size: 2048, // Tamaño máximo del archivo en kilobytes
        };
        // Manejar errores
        fileUploader.addEventListener('componentError', event => {
            console.error('Error event:', event.detail);
            // Mostrar mensajes de error al usuario
        });
        // Manejar resultados de archivos
        fileUploader.addEventListener('result', event => {
            console.log('File result event:', event.detail);
            // Procesar el resultado del archivo, por ejemplo, mostrar la imagen o video
        });
        // Agregar más lógica de funcionalidad o interacción según sea necesario
    </script>
</body>
</html>
  1. Despliega el archivo HTML

Usa un servidor web estático para servir el archivo HTML. Por ejemplo, puedes usar live-server:

npm install -g live-server
live-server

Navega a la URL proporcionada por live-server para ver tu página en acción.

ReactJS

Ejemplo ReactJS

  1. Configurar un proyecto React

Si no tienes un proyecto React, crea uno nuevo:

npx create-react-app file-uploader-example
cd file-uploader-example
  1. Instalar el paquete @jaak.ai/file-uploader
npm install @jaak.ai/file-uploader
  1. Crear el componente FileUploader

Crea un archivo llamado FileUploader.js dentro de la carpeta src. Copia y pega el siguiente código en FileUploader.js:

import React, { useState, useEffect } from 'react';
import { defineCustomElements } from '@jaak.ai/file-uploader/loader';

const FileUploader = () => {
    const [error, setError] = useState(null);
    const [fileResult, setFileResult] = useState(null);
    useEffect(() => {
			defineCustomElements(window);
		}, []);
    const handleError = (event) => {
        setError(event.detail);
    };
    const handleFileResult = (event) => {
        setFileResult(event.detail);
    };
    return (
        <div>
            <file-uploader
                id="fileUploader"
                onComponentError={handleError}
                onResult={handleFileResult}
                config={JSON.stringify({
                    placeholder: 'Upload your image',
                    buttonText: 'Upload File',
                    accept: 'image/*',
                    description: 'Please upload an image',
                    size: 2048
                })}
            ></file-uploader>
            <div>Error: {error && error.label}</div>
            <div>File Result: {fileResult && fileResult.base64}</div>
        </div>
    );
};
export default FileUploader;
  1. Usa el componente FileUploader

Abre el archivo src/App.js y modifica el contenido para incluir el componente FileUploader:

import React from 'react';
import FileUploader from './FileUploader';
function App() {
  return (
    <div className="App">
      <FileUploader />
    </div>
  );
}
export default App;
  1. Iniciar la aplicación de React
npm run start

Abre tu navegador y navega a http://localhost:3000 para ver tu componente en acción.

Angular

Ejemplo Angular

  1. Configurar un proyecto Angular

Si no tienes un proyecto Angular, crea uno nuevo:

ng new file-uploader-example
cd file-uploader-example
  1. Instalar el paquete @jaak.ai/file-uploader
npm install @jaak.ai/file-uploader
  1. Crear el componente FileUploader

⚠️ IMPORTANTE si está usando en la configuración(tsconfig) JSX con el valor “jsx-react“, tambien se debe declarar los HTML tags desde el index.ts

declare global {  
	namespace JSX {  
		interface IntrinsicElements {  
			'video-camera-recorder': React.DetailedHTMLProps\<  
				React.HTMLAttributes<HTMLElement>,  
				HTMLElement  
			>;  
		}  
	}  
}

Abre el archivo src/app/app.component.ts y modifícalo con el siguiente contenido:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <file-uploader
      (componentError)="handleError($event)"
      (result)="handleFileResult($event)"
      [config]="config">
    </file-uploader>
    <div>Error: {{ error?.details }}</div>
    <div>File Result: {{ fileResult?.base64 }}</div>
  `
})
export class AppComponent implements OnInit {
  status: string;
  error: any;
  fileResult: any;
  config = {
    placeholder: 'Upload your image',
    buttonText: 'Upload File',
    accept: 'image/*',
    description: 'Please upload an image',
    size: 2048
  };
  ngOnInit(): void {
    // Registro de elementos personalizados o cualquier lógica de inicialización
  }
  handleError(event: CustomEvent) {
    this.error = event.detail;
  }
  handleFileResult(event: CustomEvent) {
    this.fileResult = event.detail;
  }
}
  1. Configurar angular.json

Asegúrate de que tu archivo angular.json incluya el script necesario para cargar el componente de Stencil. Agrega lo siguiente bajo la sección de scripts:

"scripts": [
  "node_modules/@jaak.ai/file-uploader/dist/file-uploader/file-uploader.js"
]
  1. Iniciar la aplicación Angular
ng serve

Abre tu navegador y navega a http://localhost:4200 para ver tu componente en acción.

Updated about 2 months ago