Implémentation d’un composant de téléchargement d’image

Cet exemple de composant s’affiche comme un bouton Upload pour télécharger l’image et une image par défaut lorsque le composant se charge pour la première fois. Lorsque vous cliquez sur Upload, l’explorateur de fichiers s’ouvre dans une fenêtre contextuelle pour choisir une image.

L’image sélectionnée s’affiche dans le composant. Entre-temps, le bouton Remove s’affiche si nous devons réinitialiser. Lorsque vous cliquez sur le bouton Remove, l’image par défaut apparaît.

Disponible pour

Applications pilotées par modèle

Code

Vous pouvez télécharger l’exemple de composant complet ici.

Cet exemple explique comment créer un sélecteur d’image et présente l’API d’appareil et l’API de ressources pour charger l’image définie dans le manifeste. Le contenu de l’image est stocké dans le codage en base64 et peut être enregistré et revisité.

La méthode resources.getResource prend l’entrée comme nom de ressource Web défini dans le manifeste du composant et charge cette ressource Web. Le composant affiche un bouton Upload et l’image par défaut du rendu d’origine. Les images sont définies dans le nœud de ressource du manifeste.

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

Le successCallback est déclenché et le contenu de la ressource s’injecte dans successCallback. Puis vous utilisez l’élément d’image « src » indiquant le contenu et l’image par défaut se charge.

La méthode device.pickFile ouvre une boîte de dialogue pour sélectionner les fichiers à télécharger. Pour le bureau, elle ouvre l’explorateur de fichiers, pour le client mobile, elle ouvre la bibliothèque de photos. Lorsque vous cliquez sur le bouton  upload, le  pickFile d’API d’appareil se déclenche et l’utilisateur choisir le fichier. Une fois le fichier prélevé avec succès, le nom du fichier, son contenu sont injectés dans successCallback.

Notes

Si le même formulaire ou table est utilisé sur le client web hérité, le champ affiche un composant de texte prêt à l’emploi sur le client web hérité, où il peut y avoir des problèmes UX.  Pour le masquer dans le client web hérité, il est possible de désactiver la case à cocher Visibilité et activer la case à cocher Masquer le contrôle par défaut ensemble.

Rubriques connexes

Télécharger des exemples de composants
Comment utiliser les exemples de composants
Composant d’API d’appareil
API d’appareil
Référence des API Power Apps component framework
Référence du schéma de manifeste Power Apps component framework

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).