deform2: fix up file_upload.pt

[dairiki]

This makes the FileUploadWidget look a bit nicer (and more legible).

More work is probably in order on this front. I believe javscript is necessary to make the file upload control
match the other form controls. A quick search has found two projects which might be useful, though neither
looks necessarily ideal:

• Jasny’s fork of bootstrap 2. Code here, demo here.
• Also found this http://gregpike.net/demos/bootstrap-file-input/demo.html
• And this http://markusslima.github.io/bootstrap-filestyle/

Are there better choices?

[dairiki]

I've just pushed what I think is a nicer solution for the file upload widget. (5c7b5dd)

I pretty much ripped this off from this blog post:
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/

I haven't yet tested it on many browsers, but the author of the blog post claims “This method was tested to work in IE8–IE10 and fairly recent versions of Chrome, Safari, Firefox, and Opera.”

[stevepiercy]

I like this one but it may be too much for deform2, and it does not use bootstrap:
http://blueimp.github.io/jQuery-File-Upload/

[dairiki]

@stevepiercy Thanks, Steve. I did find that too, and it does look nice… but it does seem pretty heavy. My guess is that it belongs in its own widget; probably in a separate extension package, rather than in deform itself.

(TIL: I didn't realize it was possible to get the upload progress information completely client-side — I always thought that some back-channel communication with the server was required. The jQuery File Uploader seems to do it though.)

[mcdonc]

This is an inappropriate place to put this comment but I just wanted to say thanks for all the pull requests! I'm participating in "WSGI War" this weekend so I likely won't get a chance to review them, but hopefully next week.

[dairiki]

@mcdonc (more inappropriately located comments) WSGI war sounds like a blast!

Since I'm currently working on a bootstrap 3 based project, I was happy to see deform2 gathering momentum. I'm working on switching the project from deform 0.x + deform_bootstrap + a pile of custom templates to deform2. (Expect more pull requests as that progresses.)

[mcdonc]

This does look much better!

Currently it looks fine in Chrome but the button text looks strange in Firefox. Images attached.

Also, this breaks the deformdemo tests involving file upload widgets on the deform2 branch of the deformdemo package.

[dairiki]

I will look into that further (and figure out — again — how to run selenium...)

(I'll probably get to it this weekend.)

[dairiki]

Rebased onto current tip. I haven't yet looked into the firefox rendering issues or selenium.

[dairiki]

Just tested this with Firefox 24.0 (linux) and it looks fine. What Firefox were you using?

[dairiki]

Seems to work fine (with the latest commit) in IE9.

Almost works in IE8. It looks fine and is usable, but when you select a file, javascript errors prevent the display
of the selected file name. (I suspect it would work with jquery 1.x instead of jquery 2, though I didn't try that)

Illegible in IE7 (but usable, barely if you can guess how to use it.)

[dairiki]

I’ve now converted this to a jquery plugin. This simplifies file_upload.pt, and makes it so that browsers without js (or that are unsupported by jquery 2) degrade gracefully.

If you want to dink with the plugin, you can demo it at http://jsbin.com/OxOQoDa/latest

@mcdonc I still haven’t been able to reproduce the ff manglings you screenshotted. Firefox 24.0 works fine for me. (Iceweasel 3.5.16 works, too, if jquery 1.X is used.)

[tisdall]

sorry, guys.. I submitted an issue about the deform2 branch being dead and confusing so @tseaver deleted it. Can you resubmit this on the master branch?

[dairiki]

This has been rebased and resubmitted as PR #280.