[ux] UI improvements around issue image uploads

[karlcow]

Now that we deployed the new feature #24 for uploading images, we can now improve the User experience.

I just tested with https://webcompat.com/issues/1576

I see two issues, here the description of the UX. (other issue at #682 )

1. Once you have selected an image to upload, it's not possible to know if we successfully added the image to the form.
2. Also maybe the name of the image should be there with a chance to rename it.

[miketaylr]

Maybe the name of the image should be there with a chance to rename it.

Agreed we could do more here. Possibly show a clientside preview. What's the purpose of renaming the image? Right now we obfuscate the filename on upload (that can change of course).

[karlcow]

What's the purpose of renaming the image? Right now we obfuscate the filename on upload (that can change of course).

1. obfuscate the image filename 👍
2. rename the image for the alt tag not for the filename. (sorry for not being clear) ^_^

[calexity]

I can't figure out how to add an image. Is it in production?

Here's a shot at this without being able to test the existing functionality. Let me know if we support both drag & drop and click. The loading indicator is dots lighting up as the image loads. They could load a couple a time if it was loading fast or one at a time if slow.

Renaming an image would happen in the brackets with the [ImageNameHere]. Is that too subtle @karlcow? Should we make a clear place to rename as you upload?

Would be nearly the same on Desktop, slightly bigger.

Icon is fa-plus-circle

Colors are same placeholder color, or we could introduce a medium gray, if we haven't already #555555.

[miketaylr]

I can't figure out how to add an image. Is it in production?

Yeah, but for right now it's just for new bug reports (there's a little cloud upload thingy if you look at the bottom of the form at webcompat.com/?open=1). I'm in the middle of getting it to work for issue comments in #687.

[calexity]

Ah ok. That makes sense.

On Tue, Sep 1, 2015, 6:43 AM Mike Taylor [email protected] wrote:

I can't figure out how to add an image. Is it in production?

Yeah, but for right now it's just for new bug reports (there's a little
cloud upload thingy if you look at the bottom of the form at
webcompat.com/?open=1. I'm in the middle of getting it to work for issue
comments in #687 #687.

—
Reply to this email directly or view it on GitHub
#681 (comment)
.

[miketaylr]

These designs look good, @calexity. Two things to think about:

• we'll need to account for is somewhere to stick a validation error (if someone tries to upload a word document or something). Here's what it looks like on my branch now (just re-using components from the homepage):

• in addition to drag + drop we should do something like GitHub and make it possible to click somewhere to open a file picker. It could be as simple as what they do.

[miketaylr]

Renaming an image would happen in the brackets with the [ImageNameHere]. Is that too subtle?

That's how I've currently implemented the issue image upload -- (just like GitHub) -- when you upload an image, it sends an AJAX POST to the server w/ the file and returns the URL. On success we append something like ![Screenshot of the site issue](https...blahblahblah.png) to the comment textarea. People can edit the text before making their comment.

[miketaylr]

I think this can be closed now that #867 is fixed. See #879 (comment) for a gif of what this looks like now -- there is a preview of the image you're about to upload.