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

Photoshop UXP Plugin API
,
1

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
Untitled-11920×1270 175 KB

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

2

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

2 Likes
3

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