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.

  • 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 Jun 17 '15 at 23:40
  • @phyrfox Which API would you recommend ? I'm already using this link – alexrocco Jun 18 '15 at 23:23

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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