Upload screen

[dyner]

After the user uploads photos (drag and drop or selecting):

• [x] Text at the top that says: "While your images upload, please take a moment to add details." (I don't think any details will be required, just optional and recommended)
• [ ] "Complete" button at the bottom.
• [x] Percentage and ETA for file upload.

[andreyvolokitin]

They should be notified if an image is a duplicate. Maybe a warning icon on top of their image?

A duplicate of already uploaded image? This can be decided only after the image uploads, so it's more like a thing happening at the end

(and a way to compare them side by side to see if they still want to upload -- I like Github GUI's image comparison tool)

Is screenshot available? Probably they won't need an actual pixel diff, so it's more like casual "side-by-side" with a slider thing (also not sure if it'll add any benefit of actual comparing)?

The user should be notified if the image appears to be in the same family as another image (such as an 80% match). Ask the user if they want to select a family.

Also post-upload thing. Also not yet sure what exactly a family is, and how UI for family selection should look for this

[dyner]

A duplicate of already uploaded image? This can be decided only after the image uploads, so it's more like a thing happening at the end

@AshrafAkon will handle the detection.

Is screenshot available? Probably they won't need an actual pixel diff, so it's more like casual "side-by-side" with a slider thing (also not sure if it'll add any benefit of actual comparing)?

https://github.blog/2011-03-21-behold-image-view-modes/

Also post-upload thing. Also not yet sure what exactly a family is, and how UI for family selection should look for this

I'm hoping to have that figured out by the end of today with a mockup.

[andreyvolokitin]

So, will side-by-side with a slider be enough (i.e.: https://sneas.github.io/img-comparison-slider/)? Github describing 3 more more modes, including pixel diff

[andreyvolokitin]

I planned to use a modal for this, but looks like it should be more complex. I think it should be similar to modal, but collapsible, to allow keeping interaction with a site while upload is happening. So:

1. Open "modal" with a list of uploading files and described details
2. Allow collapsing so it stays in the corner with just a total progressbar showing
3. The user can close this thing completely, but only if they want to abort the upload totally
4. Each file has a link to compare possible duplicate (if any), which "opens"/renders a new page (opening yet another "modal" at the same page is bad UX, as well as opening a comparison inline), upload is still happening in the "collapsed mode"
5. For selecting family not yet sure

[dyner]

So, will side-by-side with a slider be enough (i.e.: https://sneas.github.io/img-comparison-slider/)? Github describing 3 more more modes, including pixel diff

I think initially, side-by-side slider is the most useful. In a later phase (after release) I would like to add the others if possible because some do work better for different types of pictures.

[dyner]

I planned to use a modal for this, but looks like it should be more complex. I think it should be similar to modal, but collapsible, to allow keeping interaction with a site while upload is happening. So:

1. Open "modal" with a list of uploading files and described details
2. Allow collapsing so it stays in the corner with just a total progressbar showing
3. The user can close this thing completely, but only if they want to abort the upload totally
4. Each file has a link to compare possible duplicate (if any), which "opens"/renders a new page (opening yet another "modal" at the same page is bad UX, as well as opening a comparison inline), upload is still happening in the "collapsed mode"
5. For selecting family not yet sure

This all sounds good.

If the user tries to navigate away from the site while uploading, we should stop them with an alert and ask if that's what they want to do.

[andreyvolokitin]

To keep it simple I used a separate view/page for uploading screen instead of "modal" (similar to family photos), with a back button. "Modal" is almost the same, but trickier with collapsing transition to the "mini-progress" state (and also having minor scroll glitches on mobile). Can proceed with "modal" path if required. Current UI can be seen in fe branch.

Mini-progress is still showing at other pages, and clicking it brings the user to the upload view. The upload progress shown between pages renders means each page needs to be rendered client-side, because the browser page can't unload until the upload is done / cc @AshrafAkon

[AshrafAkon]

Currently, the complete upload button replaces the cancel button on top. What do you think about it @dyner ?

[AshrafAkon]

The feature to check duplicate is moved to its own issue (see issue https://github.com/AllAboutLearningPress/Photo-Storage-and-Gallery/issues/45) and the feature to notify user if a family is found is moved to this issue (see issue https://github.com/AllAboutLearningPress/Photo-Storage-and-Gallery/issues/45). Please feel free to reopen this issue again if we need to move the complete upload button to the bottom.