Image selection, listing, previews, and deletion

[adulbrich]

As a user, I want to upload a set of LDR images and preview them, with the option to remove the ones that are wrong, so that I can use then to generate an HDR image.

Background

This is a subset of #7

This is the first step in the process: the user selects a set of LDR images (in the future it could be a directory or a set of directories), can preview the images to make sure they are correct, and remove images if they were wrongly selected.

Requirements

• The app will have one page, and at the top of the page, there will be a section for selecting LDR images.
• The user can click on a button that will trigger an OS pop-up to select images
• Images will be stored in an array by using React states
• Images can be added to that array or individually deleted
• Loop on the array to list and display previews (unsure whether we should use next/image to display these images instead of the barebone tag)

Crude proof-of-concept using Svelte instead of Next (for inspiration): https://github.com/adulbrich/ldr-image-viewer

We need to support .jpg and .jpeg images for the refactoring.

User Interfaces

Figma Prototype

The current prototype (02/11) does not have the listing and previews of images. Can be added for clarity.

Dependencies

The following tasks need to be completed:

• 18

• 14

The following task needs is required in order to execute the hdrgen pipeline step:

• Response function

Subtasks

Create and detail issues for the following tasks:

None

Open Questions

• We need to figure out how to pass an object to the Rust pipeline. Could we have an object in our state that includes all the settings, incl. image paths? We might need to first define that structure in Rust. We can work without that answer for now. 

  Estimation

Will be the sum of subtasks.

Acceptance Criteria

1. The user opens the app
2. The user clicks the "Select Images..." button
3. OS window opens, user can navigate directories and select multiple .jpeg or .jpg images in one directory
4. The user validates the selection in the OS window
5. The list of images are displayed as a table
6. The images have a small preview under the table
7. The user can click one image to delete it (in the table or on the preview)
8. The user clicks the "Select Images..." button again
9. OS window opens, user can navigate directories and select multiple .jpeg or .jpg images in one directory
10. The user validates the selection in the OS window
11. The new images are appended to the table and the table is sorted by alphabetical order
12. The new images are appended to the previews, preview images are sorted the same way as the table

Stretch goals:

• Support drag-and-drop of images in the application

[adulbrich]

Found another Tauri app for inspiration: https://github.com/btpf/Alexandria