Compartir a través de

Implementar un componente de carga de imagen

  • Artículo

Este componente de ejemplo se representa como un botón Upload para cargar la imagen y una imagen predeterminada cuando se carga el componente por primera vez. Cuando hace clic en Upload, aparece un explorador de archivos para seleccionar una imagen.

La imagen seleccionada se genera en el componente. Mientras tanto, se muestra el botón Remove si es necesario reinicializar. Al hacer clic en el botón Remove, se muestra la imagen predeterminada.

Componente de carga de imagen

Disponible para

Aplicaciones basadas en modelos

Código

Puede descargar el componente de ejemplo completo aquí.

Este ejemplo muestra cómo crear un selector de imagen y muestra la API de dispositivo y la API de recursos para cargar la imagen definida en manifiesto.El contenido de la imagen se almacena en codificación base64 y se puede guardar y recuperar.

El método resources.getResource toma la entrada como el nombre de recurso web definido en el manifiesto del componente y carga ese recurso web. El componente genera un botón Upload y la imagen predeterminada para la representación inicial. Las imágenes se definen en el nodo recurso del manifiesto.

    <resources>
      <code path="index.ts" order="1" />
       <css path="css/TS_ImageUploadControl.css" order="1" />
      <img path="img/default.png" />
      <resx path="strings/TSImageUploadControl.1033.resx" version="1.0.0" />
    </resources>

La successCallback se desencadenará y el contenido del recurso se inserta en la successCallback. A continuación use el 'src' del elemento de imagen para apuntar al contenido y se carga la imagen predeterminada.

El método device.pickFile abre un cuadro de diálogo para seleccionar archivos para la carga. Para el escritorio, abre el explorador de archivos, para el cliente móvil, abre la biblioteca de la foto. Al hacer clic en el botón  upload, se desencadena el  pickFile de la API de dispositivo y el usuario selecciona el archivo. Una vez seleccionado el archivo correctamente, el nombre del archivo, el contenido del archivo se insertará en la successCallback.

Nota

Si el mismo formulario o tabla se usa en el cliente web heredado, el campo mostrará el componente de texto predefinido en el antiguo cliente web, donde puede haber problemas de UX.  Para hacer que esté oculto en el antiguo cliente web, podríamos desactivar la casilla Visibilidad y activar la casilla Ocultar control predeterminado a la vez.

Descargar componentes de ejemplo
¿Cómo usar los componentes de ejemplo?
Componente API de dispositivo
API de dispositivo
Referencia de la API de Power Apps component framework
Referencia de esquema de manifiesto de Power Apps component framework

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).