# UXP panel: Create file select dialog, select jpeg files and place them within a canvas

**URL:** https://forums.creativeclouddeveloper.com/t/uxp-panel-create-file-select-dialog-select-jpeg-files-and-place-them-within-a-canvas/6877
**Category:** UXP Plugin API
**Tags:** uxp, javascript
**Created:** [September 27, 2023, 7:19am UTC](https://forums.creativeclouddeveloper.com/t/uxp-panel-create-file-select-dialog-select-jpeg-files-and-place-them-within-a-canvas/6877 "2023-09-27T07:19:17Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![nirmalya](https://avatars.discourse-cdn.com/v4/letter/n/d07c76/32.png) [@nirmalya](https://forums.creativeclouddeveloper.com/u/nirmalya)
#### Post date: [September 27, 2023, 7:19am UTC](https://forums.creativeclouddeveloper.com/t/uxp-panel-create-file-select-dialog-select-jpeg-files-and-place-them-within-a-canvas/6877/1 "2023-09-27T07:19:17Z")

</div>

Hi, I am planning to design one Photoshop UXP Panel. It will have one file open dialog button within it. I will select some jpg files and click the Start button.  
The selected jpg files will be placed sequentially in the below canvas as small thumbnail images. If I double click the jpg files, then they will open in photoshop for editing purpose.  
Please look at the attached picture for clarity.

 ![Untitled-1](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/5/544f2b40c064b6a7129edf88ea2bf59ca9c90847.jpeg)

Is it possible to achieve?  
Can you please pass some sample codes or tutorials I can follow?

**Edited:**  
I have already found the code for creating the canvas. The javascript is also painting a triangle within the canvas. But how the images will be automatically placed within the canvas? If canvas is not required, I am fine. But the images should be placed on the panel itself. And for this there should be a container. Any container should be fine.

Many thanks in advance.  
~Nirmalya

---

<div class="post-metadata">

### Author: ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)
#### Post date: [September 27, 2023, 12:49pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-panel-create-file-select-dialog-select-jpeg-files-and-place-them-within-a-canvas/6877/2 "2023-09-27T12:49:22Z")

</div>

You’re asking a lot of questions in one post here, too many to really address.  
Everything you want to do is completely achievable in UXP, but you’ve got a number of tasks to complete.  
I would break it down like so:  
• create a plugin using the starter template  
• build a file picker to select the folder and get the files - [File system docs](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-js/Modules/uxp/Persistent%20File%20Storage/FileSystemProvider/)  
• render thumbnails as clickable buttons in your panel - this is just vanilla HTML and JS  
• use clickable buttons to open file - this gets more complicated as there are two approaches - as the file picker used in step 2 grants permissions for the files in the folder it’s probably best to go via the route of generating a session token - see linked docs above for more info

---

<div class="post-metadata">

### Author: ![nirmalya](https://avatars.discourse-cdn.com/v4/letter/n/d07c76/32.png) [@nirmalya](https://forums.creativeclouddeveloper.com/u/nirmalya)
#### Post date: [September 29, 2023, 6:11am UTC](https://forums.creativeclouddeveloper.com/t/uxp-panel-create-file-select-dialog-select-jpeg-files-and-place-them-within-a-canvas/6877/3 "2023-09-29T06:11:35Z")

</div>

Thanks a lot @Timothy_Bennett for your pointers. Much helpful!  
I have also sent you one personal message. Please check.  
Thanks