Mientras desarrolla soluciones personalizadas de Salesforce, a veces es posible que necesite cargar archivos desde un componente Lightning. Por lo general, esto es un poco complicado de hacer, ya que debe escribir código JS personalizado para manejar la entrada del archivo y código Apex para crear ContentVersion a partir del blob de archivos. Quien haya experimentado esto probablemente lo haya pasado mal debido a múltiples obstáculos (como la limitación de carga útil máxima de los componentes de 4 MB y la limitación del tamaño del montón de 6 MB).
Desde el lanzamiento de Winter'18, esto ya no es un problema ya que Salesforce introdujo el Carga de archivos relámpago (carga-de-archivos-relámpago) componente básico que proporciona una manera fácil e integrada para que los usuarios carguen múltiples archivos sin programación adicional. Los archivos cargados estarán disponibles en Archivos Inicio bajo la Me pertenece, es mio, yo soy el dueno y en el Lista de archivos relacionados eso está en la página de detalles del registro. Este componente implementa el modelo del Selector de archivos de Salesforce Lightning Design System (SLDS).
uso de la carga-de-archivos-relámpago componente
Puede seleccionar uno o más archivos de su sistema haciendo clic en el botón “Cargar archivos” para abrir el cuadro de diálogo del explorador de archivos del sistema. Sin embargo, hoy en día una forma más cómoda de seleccionar archivos es Arrastrar y soltar. Lightning-file-upload permite arrastrar archivos desde su sistema a la zona de colocación del selector de archivos pequeños. El tamaño máximo de archivo que puede cargar es 2 GB debido a los límites de tamaño de archivos de Salesforce.
Después de seleccionar los archivos para cargar, el modo “Cargar archivos” muestra el progreso.
Después de seleccionar los archivos para cargar o arrastrar los archivos a la zona de colocación, se abrirá el modo “Cargar archivos” y Los archivos comenzarán a cargarse inmediatamente. con el progreso de la carga mostrado. Puede descartar el modal haciendo clic en el icono “x” o en el botón “Listo” (una vez que todos los archivos terminen de cargarse).
En algunos casos de uso, es posible que no desee que la carga comience inmediatamente, sino que comience después de algún evento o acción del usuario, como hacer clic en un botón de enviar. Este es el comportamiento predeterminado para muchos otros cargadores de archivos, pero desafortunadamente no se puede lograr con carga-de-archivos-relámpago.
Echemos un vistazo a los atributos.
▹ record-id: la identificación del registro con el que se debe asociar el archivo cargado. Este atributo no es obligatorio.
El ID de registro El atributo se utiliza para crear un ContenidoDocumentoEnlace para vincular el recién creado ContenidoDocumento al registro. Si el ID de registro no se especifica, el archivo será privado para el usuario que lo carga.
▹ aceptar: lista separada por comas de extensiones de archivos que se pueden cargar en el formato [‘.ext’]como [‘.pdf’, ‘.jpg’, ‘.png’].
El cargador de archivos no se puede utilizar para cargar archivos con las siguientes extensiones de archivo: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg si No permitir cargas HTML como archivos adjuntos o registros de documentos está habilitado bajo Seguridad de carga y descarga de archivos.
▹ nombre: especifica el nombre del elemento de entrada.
▹ clase: se utiliza para agregar una clase personalizada al elemento externo del componente.
▹ etiqueta: la etiqueta de texto descriptivo encima del botón Cargar archivos.
▹ título: atributo de título HTML estándar. La información se muestra como texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.
El atributo de etiqueta no afecta la etiqueta del botón. La etiqueta del botón es “Cargar archivos” de forma predeterminada y no se puede cambiar.
▹ deshabilitado: especifica si este componente debe mostrarse en un estado deshabilitado. No se puede hacer clic en los componentes deshabilitados. El valor predeterminado es falso.
▹ múltiple: especifica que el usuario puede seleccionar más de un archivo. Para seleccionar varios archivos, mantenga presionada la tecla CTRL o MAYÚS mientras selecciona.
De forma predeterminada, puede cargar hasta 10 archivos simultáneamente a menos que su administrador de Salesforce haya cambiado ese límite. El límite máximo es 25, pero es necesario presentar un caso ante Salesforce para solicitar este límite. No hay archivos max atributo para especificar manualmente cuántos archivos se pueden cargar.
Atributos deshabilitados, de etiqueta y de título
Comprender los eventos personalizados (es solo uno)
▹ uploadfinished: el único evento utilizado con la carga de archivos relámpago. Se activa cuando finaliza la carga para devolver una lista de los archivos cargados. Este evento se activa después de hacer clic en el botón “Listo” en el modo “Cargar archivos”.
No hay archivo agregado evento disparado con carga-de-archivos-relámpagoni la entrada estándar cambiar evento. La carga del archivo comienza inmediatamente después de seleccionar los archivos y subirterminado El evento se dispara al final.
Puede utilizar event.detail.files en el controlador de eventos para acceder a una lista de archivos cargados con los siguientes atributos:
– contentVersionId: el ID de ContentVersion en el formato 068XXXXXXXXXXXX.
– documentId: el ID de ContentDocument en el formato 069XXXXXXXXXXXX.
– contentBodyId: el ID de ContentBody en el formato 05TXXXXXXXXXXXX.
– nombre: el nombre del archivo en el formato nombre de archivo.extensión.
– mimeType: el tipo de medio del archivo.
Para obtener más información sobre el modelo de objetos de Salesforce Files, consulte Objetos de contenido.
No hay tamaño atributo presente. Para obtener el tamaño del archivo debe consultar el Tamaño del contenido desde el ContenidoDocumento en el controlador Apex.
Como no se muestra ninguna notificación del sistema predeterminada después de la carga, podemos enviar un ShowToastEvent en el controlador de eventos handleFileUploadFinished para indicar que los archivos se cargaron correctamente.
¿Algún posible error?
Si se detecta un error en el lado del cliente, se muestra un mensaje de error informativo debajo del botón “Cargar archivos”. Por ejemplo, el mensaje le informa si intenta cargar un archivo que no está en la lista aceptada o si intenta seleccionar demasiados archivos a la vez. En estos casos no se mostrará el modal “Subir Archivos” y no se subirán los archivos.
Los errores del lado del cliente se muestran debajo del botón “Cargar archivos”
Si hay un error en el lado del servidor, verá un error genérico “No se puede cargar el archivo” visible en el modo “Cargar archivos” junto a la barra de progreso del archivo.
Los errores del lado del servidor se muestran en el modo “Cargar archivos”
Se recomienda agregar uno o más tipos de registros al ContenidoVersión objeto. Cuando hay tipos de registros presentes, el componente de carga de archivos puede mostrar cualquier mensaje de error del servidor. Para saber más ver Componente web Lightning: carga de archivos.
Aumentemos el tamaño de la zona de lanzamiento.
Por conveniencia, es un buen patrón UI/UX hacer que la zona de colocación del selector de archivos sea más grande. Si echamos un vistazo a la plantilla del componente SLDS File Selector, podemos ver que hay un modelo para una variante multilínea más grande. Desafortunadamente, el componente básico de carga de archivos Lightning no ofrece la posibilidad de utilizar la variante más grande lista para usar. ¡CSS al rescate!
CSS personalizado para ampliar el área de la zona de caída
Para aumentar el tamaño estándar de la zona de descarga de carga de archivos Lightning, es necesario anular las clases CSS base. Esto lo podemos lograr a través de un CSS subido como recurso estático y luego cargado en el componente LWC.
Usando el método loadStyle de platformResourceLoader podemos cargar el recurso estático CSS. Para garantizar que el CSS se cargue antes de que el componente se procese, invoque el método loadStyle en connectCallback en lugar de renderedCallback. Para obtener más información sobre la carga de estilos y secuencias de comandos en LWC, consulte Cargador de recursos de plataforma.
🧑🏻💻 Consejo para desarrolladores: Shadow DOM
Todos los componentes básicos de LWC como carga-de-archivos-relámpago usar una DOM en la sombra. Shadow DOM convierte el componente base en una “caja negra”, restringiendo el estilo de las etiquetas anidadas con el archivo CSS local. El archivo CSS local solo puede afectar al componente base externo. Esta es la razón por la que el estilo se carga desde un recurso estático.. Esto solo se aplica a LWC, ya que en los componentes de Aura puedes afectar las etiquetas Shadow DOM con el CSS local.
Límites y consideraciones
⚠️ No se puede especificar manualmente la cantidad máxima de archivos que se cargarán.
⚠️ Cargue hasta solo 10 archivos simultáneamente de forma predeterminada.
⚠️ El tamaño máximo de archivo que puedes cargar es de 2 GB.
⚠️ No se puede evitar el comportamiento de carga automática.
⚠️ No hay más eventos que la carga finalizada.
⚠️ No puedo ver el tamaño de los archivos cargados desde event.detail.files
⚠️ Área de caída pequeña de forma predeterminada (se puede ampliar con CSS)
⚠️ Error genérico “No se puede cargar el archivo” (se puede solucionar con Tipos de registro)
Pruébalo tú mismo 🚀
En este ejemplo simple, empaquetamos el componente de carga de archivos Lightning con la zona de caída ampliada y el brindis personalizado en un contenedor Lightning:card. El @api El decorador se utiliza para crear una propiedad recordId pública que se establecerá automáticamente en la ID del registro actual. Este componente permite cargar múltiples archivos PDF y PNG. Agregue el componente de ejemplo a la página de detalles del registro para asociar todos los archivos cargados al registro actual.
archivoSubirEjemplo componente en la página de detalles de la cuenta