Jeffrey Thompson bio photo

Jeffrey Thompson

I'm a Software Engineer from many places, currently working in Sydney.

Email Twitter Facebook Google+ LinkedIn Github Stackoverflow Steam
@jokeyrhyme was showing me some of the exciting stuff he's been doing with Drag and Drop in AngularJS and I didn't run screaming after seeing the code behind so I decided to download the sources and start prototyping on a simple front-end for an HTML5 based image uploader.

Once I'd put together a fairly simple prototype, which only took a few hours, I was ready to start polishing it up and making the light well function the way I expect it to. One of these expectations is the ability to edit the name of the images I'm uploading in place, without having to jump out to awkward modals or separate forms and break my current workflow. There were a few of approaches I considered taking with this:

Details Pane

I'd already implemented selection, so I thought about adding a details pane but realised that this was probably going to be overkill and to be honest the only detail I have about the image that the user can change right now is its name. Not much point dedicating a whole pane to that. Once I add more client-side resizing and editing options I'll worry about a details pain.

Edit Button

This was the second approach I considered; adding a little "Edit" button next to the file name to make it clear that the file name was editable. I actually implemented this as a directive following closely along with a writeup on this very topic by Tim Riley but modifying the click to edit template slightly. I generally prefer this approach in terms of usability because the fact that the field is editable is made clear to users with the Edit button or link. 

This is quite a complicated solution to the problem, maintaining a separate state for whether the content is currently being edited, and supporting save and revert, which actually is going a little bit too far for this case.

Also, I don't really have space in my image preview for an edit button on a specific field and anyone who's used an image editing program before (which will be the majority of our target audience) I fully expect will already anticipate that in order to change the name of an image they have to click on the name of the image. So I went with a simpler option.

In Place

The final approach I implemented was actually the easiest; because I am really only targeting two browsers (Chrome and Safari) I went with the trivial approach of just using an input field as the label for the image and styling it so that it looked like text when it wasn't in focus. It's just a couple of lines of CSS and we have Click-To-Edit without any craziness and we can take advantage AngularJS's newly added focus bindings to get it work exactly as we want.

A selected image...
If you click on the filename you can edit it right there!
It's fun trying to juggle discoverability with user expectation, especially when you are space constrained.

Here's what the HTML side of the In Place style looks like:
<input ng-click="$event.stopPropagation();" ng-model="file.customName" />

The stopPropagation(); call on click is to prevent the fall-through select toggle on the image itself.