Edit

Implementing an image upload component

  • Article

This sample component renders as an Upload button to upload the image and a default image when the component loads for the first time. When you click on the Upload, a file explorer pops up to pick an image.

The selected image renders within the component. Meanwhile, the Remove button is shown if we need to reset. When you click on the Remove button, the default image is displayed.

Image Upload component

Available for

Model-driven apps

Code

You can download the complete sample component from here.

This sample shows how to create an image picker and showcases the device API and resources API to load the image defined in manifest. Image content is stored in base64 encoding and could be saved and revisited.

The resources.getResource method takes the input as the web resource name defined in the component manifest and loads that web resource. The component renders an Upload button and the default image for initial rendering. Images are defined in the manifest's resource node.

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

The successCallback will be triggered and the resource content injects in the successCallback. Then you use the image element 'src' points to the content and the default image loads.

The device.pickFile method opens a dialog box to select files for the upload. For desktop, it opens the file explorer, for the mobile client, it opens the library of the photo. When you click on the upload button, the device API pickFile triggers and the user picks up the file. Once the file is successfully picked, the file's filename, file content will be injected in the successCallback.

Note

If the same form or table is used on the legacy web client, then the field will show out-of-box text component on legacy web client, where there might have UX issues.  To make it hidden on the legacy web client, we could uncheck the Visibility checkbox and check Hide Default Control checkbox together.

Download sample components
How to use the sample components
Device API component
Device API
Power Apps component framework API reference
Power Apps component framework manifest schema reference