Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Picture Uploader

MyCondy

Last edited 101 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

⁠

What does it consist of?

4x Container

1x AddMedia

3x Image

1x Vertical Gallery

4x Label

1x Button

Procedure

Step 1 - create cover container

Add a new Vertical Container PCF object, call it "uploader" with this "Gap" property:

Step 2 - add header content for the main container

Add a new Image object, call it "empty_picture" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='232' height='123' viewBox='0 0 232 123' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M186.5 0H50.5C44.9772 0 40.5 4.47715 40.5 10V112C40.5 117.523 44.9772 122 50.5 122H186.5C192.023 122 196.5 117.523 196.5 112V10C196.5 4.47715 192.023 0 186.5 0Z' fill='#F0F4FF'/> <path d='M144.5 24H16.5C10.9772 24 6.5 28.4772 6.5 34V51C6.5 56.5228 10.9772 61 16.5 61H144.5C150.023 61 154.5 56.5228 154.5 51V34C154.5 28.4772 150.023 24 144.5 24Z' fill='white'/> <path d='M209.5 72H81.5C75.9772 72 71.5 76.4772 71.5 82V99C71.5 104.523 75.9772 109 81.5 109H209.5C215.023 109 219.5 104.523 219.5 99V82C219.5 76.4772 215.023 72 209.5 72Z' fill='white'/> <path d='M104 32H59C55.9624 32 53.5 34.4624 53.5 37.5C53.5 40.5376 55.9624 43 59 43H104C107.038 43 109.5 40.5376 109.5 37.5C109.5 34.4624 107.038 32 104 32Z' fill='#AFCBFF'/> <path d='M140 46H79C75.9624 46 73.5 48.4624 73.5 51.5C73.5 54.5376 75.9624 57 79 57H140C143.038 57 145.5 54.5376 145.5 51.5C145.5 48.4624 143.038 46 140 46Z' fill='#AFCBFF'/> <path d='M170 80H125C121.962 80 119.5 82.4624 119.5 85.5C119.5 88.5376 121.962 91 125 91H170C173.038 91 175.5 88.5376 175.5 85.5C175.5 82.4624 173.038 80 170 80Z' fill='#AFCBFF'/> <path d='M200 94H138C134.962 94 132.5 96.4624 132.5 99.5C132.5 102.538 134.962 105 138 105H200C203.038 105 205.5 102.538 205.5 99.5C205.5 96.4624 203.038 94 200 94Z' fill='#AFCBFF'/> <path d='M35.5 29H16.5C13.7386 29 11.5 31.2386 11.5 34V52C11.5 54.7614 13.7386 57 16.5 57H35.5C38.2614 57 40.5 54.7614 40.5 52V34C40.5 31.2386 38.2614 29 35.5 29Z' fill='#1059EE'/> <path d='M104.5 77H85.5C82.7386 77 80.5 79.2386 80.5 82V100C80.5 102.761 82.7386 105 85.5 105H104.5C107.261 105 109.5 102.761 109.5 100V82C109.5 79.2386 107.261 77 104.5 77Z' fill='#1059EE'/> </svg>")

Add a new Label object, call it "picture_title" with this "text" property:

"Add a new picture file to upload"

Add a new Label object, call it "picture_dscr" with this "text" property:

"Your picture(s) will be private until publish them"

Step 3 - add media component under sub-container

Add a new Vertical Container PCF object, call it "media_frame" with this "Gap" property:

Add a new AddMedia object, call it "add_item" with this "OnChange" property:

ClearCollect(newRecord,{Title:First(Split(add_item.FileName,".")).Value,Suffix:Last(Split(add_item.FileName,".")).Value});

Patch(<Table>,Defaults(<Table>),{Title:First(newRecord).Title,<Table Column>:First(newRecord).Suffix,<Table Image Column>:savedImage.Image});

and "ChangePictureText" property:

"Add file item"

Replace <> by your real table with columns. AddMedia component will get if you put "Add Picture" and take only a button from created group in Power Apps. See example below:

⁠

⁠

Step 4 - add Gallery with data

Add a new Vertical Gallery object, call it "picture_gallery" with this "Data source" property:

<Table>

Replace <Table> by your SharePoint or Dataverse table.

Step 5 - add content for a gallery

Add a new Horizontal Container PCF object, call it "ïtem_frame" with this "DropShadow" property:

DropShadow.Semilight

Add a new Image object under item_frame, call it "picture_image" with this "Image" property:

First(ThisItem.Attachments).Value

Add a new Vertical Container PCF object under item_frame, call it "content_item" with this "Gap" property:

Add a new Label object under content_item, call it "picture_name" with this "text" property:

ThisItem.Title

Add a new Label object under content_item, call it "picture_type" with this "text" property:

ThisItem.<Table Column>

Replace <Table Column> by your real table column for image type.

Add a new Button object under item_frame, call it "remove_button" with this "Text" property:

"REMOVE"

and OnSelect property:

Remove(<Table>,ThisItem)

Replace <Table> by your SharePoint or Dataverse table.

Step 6 - add hidden image for uploaded picture (optional)

If you have some issue with PATCH function, that save a BLANK row in your table, you can use this step.

Add a new Image object, call it "savedImage" with this "Image" property:

add_item.Media

and Visible property:

false

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

8x Frame

10x Vector

6x Text

Procedure

Step 1 - create parent frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_uploader" with these properties:

⁠

⁠

Step 2- create content for a parent frame

Import a new SVG file under a "vercont_uploader" frame, call it "svg_empty_picture" with this XML code:

</svg>

Add a new Text (T command) object under a "vercont_uploader" frame, call it "lbl_picture_title" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_uploader" frame, call it "lbl_picture_dscr" with these properties:

⁠

⁠

Step 3 - add frame for media button

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_media_frame" with these properties:

⁠

⁠

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "addmedia_add_item" with these properties:

⁠

⁠

Add a new Text (T command) object under a "addmedia_add_item" frame, call it "Add File Item" with these properties:

⁠

⁠

Step 4 - add gallery frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object , call it "gall_pictures_gallery" with these properties:

⁠

⁠

Step 5 - add item under gallery frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "gall_pictures_gallery" frame, call it "horcont_item_frame" with these properties:

⁠

⁠

⁠

Import a new SVG file under a "horcont_item_frame" frame, call it "img_picture_image" with this XML code:

</svg>

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object under a "horcont_item_frame" frame, call it "vercont_content_item" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_content_item" frame, call it "lbl_picture_name" with these properties:

⁠

⁠

Add a new Text (T command) object under a "vercont_content_item" frame, call it "lbl_picture_type" with these properties:

⁠

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "horcont_item_frame" frame, call it "btn_remove_button" with these properties:

⁠

⁠

Add a new Text (T command) under a "btn_remove_button" frame, call it "REMOVE" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_uploader, vercont_media_frame, vercont_content_item = Vertical Container

horcont_item_frame = Horizontal Container

gal_picture_gallery = Vertical Gallery

svg_empty_picture, img_picture_image = Image

btn_remove_button = Button

addmedia_add_item = AddMedia

lbl_picture_title, lbl_picture_dscr, lbl_picture_name, lbl_picture_type = Label

YAML Output

⁠

Used Colours

Container Border Colour - #DFDFE1

Title Font Colour - #000000

Dscr Font Colour - #767980

Button Colour - #FE697F

Picture Item Background - #FFFFFF

⁠

← Menu⁠

⁠

Pie Chart →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.