Class upload no longer works

[jvilk]

Class upload through the file API appears to be broken. It also looks really terrible in Chrome for some reason.

We should fix this for V2.

[jvilk]

There are two problems:

• We aren't appending the current directory to the filename. I've fixed this locally.
• More importantly, the onload event is not firing. I'm guessing the API has changed?

Looking into it currently.

EDIT: Three problems if you consider it looking terrible to be a problem. :)

[jvilk]

HA. Figured it out... indentation issue. Someone indented the line that actually tells the FileReader object to start reading.

I fixed it here:
07628f2

However, before closing this, I'm going to try to make it look a bit better in Chrome...

[perimosocordiae]

Ah, good news, it was your commit that mis-indented: 6a382e6 😁

I wouldn't mind a UI update.

[jvilk]

> <<

[jvilk]

http://www.quirksmode.org/dom/inputfile.html

Ugh, why are browsers so terrible at this.

I've done this trick:
http://css-tricks.com/snippets/css/force-file-upload-input-button-to-right-side-in-webkit/

...but the text that WebKit uses to display what file is being uploaded goes under the bottom.

There's still more fiddling to do. When I'm done, I'll also switch on multiple file upload....

[jvilk]

http://swatelier.info/at/forms/file.htm

More documentation on this why-the-hell-isn't-this-properly-standardized input field. I have it looking good in all non-WebKit browsers (excluding IE, which we don't support atm). WebKit, why?!?! :(

[jvilk]

I want you guys to understand where I'm at right now, so here are some screenshots. Note that I'm going to look into whether or not I can customize the text on the button before the end of this battle.

Opera: Pretty!

Firefox: Decent!

Safari: Tolerable.

Chrome: HURRRRRR

To fully illustrate my frustration, I want to explain some things. Chrome is currently doing the following:

• It is not centering the text of the upload button. It's offset to the right by some constant. (This is why our current revision of the page looks so terrible; the text goes off the button. This is what initially inspired me to "fix" this.) So if I make it wide, this is what it looks like:
  • 
• Explicitly adding text-align center does not fix this, so it must be trying its hardest to center it. What happens when I text-align: right?
  • DURRRRRRRR
  • Safari can do it properly:
• I've used the Inspect Element tool in Chrome to see if we have any weird CSS rules that are causing this. Nope; the only things affecting this button are those I've explicitly set on it.

I don't know why this is happening. It does not happen on the other demo pages I've linked to. There must be something on our webpage that's causing Chrome to forget how to center text, so I'll have to go hunting for that...

[jvilk]

Found a better solution:
http://viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery

This gets rid of the text that specifies the chosen file, but we print stuff in the console anyway. I'll get to work on getting it working smoothly. :)

[jvilk]

Huzzah! We have multifile upload and a snazzy button. This can be closed.

[perimosocordiae]

One small nitpick: the snazzy button doesn't fade like the rest of the site does during the untarring phase.