The goal of this PCF is to allow an external user through Power Pages to upload documents by drag and drop with the option to preview the document before uploading it so that the user can be sure of the document being uploaded.

This PCF also works for Model Driven Apps so internal users can do the same.

The document repository for this PCF is Azure blob storage so first you will have to configure this service if you want to use this PCF.

1. Configure Azure blob storage:

Create a storage account: Create a Container Configure CORS Settings under the Storage account

Create a Shared access signature

Click in Generate SAS and connection string and copy the SAS token

2. Create a text environment variable in your solution, then copy and paste the created SAS token
3. Import the managed or unmanaged solution in your environment
4. Create a text column

For Model Driven App

5. Add the PCF to the new column and configure it as the following image, for Height set it as 400 for width set it as 100%, the rest parameters you will have to set your own values:

That’s it now you can use the PCF in a Model Driven App.

If you want to use it also in Power Pages, do these additional steps: 6) Beside configuring the PCF in the form you will have to add a code component metadata to the form:

7. Don’t forget to turn on the Webapi for the following tables:

8. Create the table permission records for Contact, Environment Variable Definition and Environment Variable Value tables:

9. Clear the site cache and you are free to go