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

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.

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

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.

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


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