1

I’m a usually a backend developer, but now im working in a private web project and i need some guideline for image’s CRUD.

I’m building a website that the user can upload a few photos (max. 8) in the registration's page. After that, he can o delete or include new images. In the registration page, i put a input file with multiple attribute, to upload all images at once. But my problem is when the user needs to update or delete images.

What i thought that will be a good UX to delete or update, is to maintain the input file with multiple attribute to let the user select new images and create a table with the thumbnail of the image and a delete button, so he can choose wich image he wants to keep or not.

Any guideline or tip is appreciated.

Thx, Alexandre.

Improve this question
2
  • This is a very old-school design (multi-select file input). It works, and for a private application, I'd go with simplicity. However, a real system would leverage HTML5, drag-and-drop and file API, with graceful fallback with older browsers.
    – phyrfox
    Commented Jun 17, 2015 at 23:40
  • @phyrfox Which API would you recommend ? I'm already using this link
    – alexrocco
    Commented Jun 18, 2015 at 23:23

1 Answer 1

Reset to default
3

Here is a link to a simple demo

It sounds like you have the right idea and here are a couple things to keep in mind.

Context is important

Place your action buttons in line with the images that will receive them. It is easier to scan and delete an image when the button is close by.

action buttons

Tell the user why an action isn't available

Let the user know why the Add button is disabled once they hit the hard limit of 8 images. Otherwise there is no need to say anything since most users may never hit the limit.

communicate disabled buttons

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.