Basic file uploader improvements

[GoogleCodeExporter]

We could do a few minor improvements for basic file uploader (the one that 
shows up if GSNOUPLOADIFY is turned on):
1. style input file control (there are some CSS only solutions, but using JS is 
recommended for maximum compatibility). Input could be button and after 
selecting file its name will be displayed below.
2. check for existing files and ask to overwrite (like Uploadify does).

Original issue reported on code.google.com by jos...@gmail.com on 16 Mar 2011 at 9:42

[GoogleCodeExporter]

Here's CSS only solution to #1 - http://site-o-matic.net/?viewpost=19#post . 
Not sure if it works on "older" browsers.

Original comment by jos...@gmail.com on 16 Mar 2011 at 9:59

[GoogleCodeExporter]

I agree about the functionality part, but not the styling part. Leave it the 
default input file style. I'm not 100% sure what it looks like now, but let's 
not do any complicated js or CSS stuff. 

Original comment by ccagle8 on 17 Mar 2011 at 1:03

[GoogleCodeExporter]

Here's how current file input controls look like in Chromium, Firefox and Opera 
browsers. We could postpone fix until after 3.0.

Original comment by jos...@gmail.com on 17 Mar 2011 at 9:25

• Added labels: Milestone-Release3.1

Attachments:

• file-input-styling.png

[GoogleCodeExporter]

I think we could do some improvements to the surrounding style, but I don't 
mind leaving the actual file input with it's default look. 

Original comment by ccagle8 on 17 Mar 2011 at 1:33

• Changed state: Accepted

[GoogleCodeExporter]

I styled basic upload button and made a slight modification how it works - now 
it looks like identical to Uploadify button, hover works, and there's no need 
for "Upload" button. We could remove two lines from lang file too. Attached 
diff and screenshot. Should work on all modern browsers.

Original comment by jos...@gmail.com on 17 Mar 2011 at 7:40

Attachments:

• basic-upload-styled.PNG
• style-upload.diff

[GoogleCodeExporter]

interesting... not sure we need to worry about this, but what happens if JS is 
turned off?

Original comment by ccagle8 on 17 Mar 2011 at 7:57

[GoogleCodeExporter]

Currently it doesn't work without JS, but isn't JS required for GetSimple to 
function? So much features depends on JS.

Original comment by jos...@gmail.com on 17 Mar 2011 at 8:07

[GoogleCodeExporter]

Actually 99% of the site works just fine (albeit a much poorer user experience) 
with JS turned off. Only three things that do not work are the File Uploads, 
Theme Edit & Components. Of those 3, file uploading is by far the most 
important.

if anything i think we should atleast offer a fallback form within 
<noscript></noscript> tags

Original comment by ccagle8 on 17 Mar 2011 at 8:36

[GoogleCodeExporter]

Joshas: I was thinking of this scenario (after using facebook and seeing how 
they handle file uploads)

1. Take the upload form out of the <li> element and put it below the </ul>. 
That way it's on the gray background. (I already did this) 
2. Change the one that shows with JS=YES, UPLOADIFY=NO to allow javascript to 
dynamically add new file inputs with a little [+] link.

That way when people don't want to use uploadify, they can still upload 
multiple files at once if they so choose. 

The php within upload.php will have to change though to allow multiple file 
inputs. 

---
Your suggestion is a really cool way to hide the file input - but I just don't 
think it's right for this situation. I think if they don't want to use 
Uploadify they just want a basic file upload. If they don't see the file inputs 
then they may think the script is still using Uploadify and that it's not a 
"basic" / "classic" uploader.

Original comment by ccagle8 on 18 Mar 2011 at 1:19

[GoogleCodeExporter]

Yes, the way you described is more useful. Be aware that some browsers can 
support multiple file selection using file input dialog.
I was just curious to see, how hard it is to style otherwise unstylable file 
input control, and it turned out pretty well.

Original comment by jos...@gmail.com on 18 Mar 2011 at 1:54

[GoogleCodeExporter]

I didn't know that: what browsers? If that is the case, then our PHP inside 
upload.php isn't setup to handle this. I think we need to change it to handle 
multiple $_FILE inputs/files. 

Original comment by ccagle8 on 18 Mar 2011 at 3:52

[GoogleCodeExporter]

<input type="file" multiple> should work on Firefox, Chrome and Safari. Opera 
has implemented it a bit different <input type=”file” min=”1″ 
max=”9999″>. 

Original comment by jos...@gmail.com on 19 Mar 2011 at 12:06

[GoogleCodeExporter]

I like it. That's much cleaner than my [+] idea. So lets use multiple and then 
change upload.php to handle multiple files. If it's easy enough, I say we do it 
for this release instead of waiting. 

Original comment by ccagle8 on 19 Mar 2011 at 4:11

[GoogleCodeExporter]

Upload script now supports multiple files through basic upload form (r412). Not 
sure about file-uploaded hook - should it be executed after each file upload, 
or after uploading all files?
Now that we have different forms for JS and noscript modes, maybe we could 
style the JS one to look like uploadify and remove upload button?
And I think we should move both forms above "Max file size" label and style 
them like it was done before (in dark rounded box).

Original comment by jos...@gmail.com on 20 Mar 2011 at 11:13

[GoogleCodeExporter]

Great job on making it multiple capable! I like the look now, so let's leave it 
as is. As i said before, i think that people turn off uploadify when they just 
want a basic file uploader. And since the form looks best on a light 
background, let's just keep things where they are for now.

Thanks!

Original comment by ccagle8 on 20 Mar 2011 at 12:05

[GoogleCodeExporter]

Im going to close this because I am calling this complete. I like where the 
file inputs are now, and i am not really worried about Opera users only being 
able to select one file (is that browser still being used??)

Thanks for the work on this Joshas!

Original comment by ccagle8 on 21 Mar 2011 at 12:49

• Changed state: Fixed
• Removed labels: Milestone-Release3.1

[GoogleCodeExporter]

Opera is pretty decent browser - I use it daily, not sure why it is so obscure.

Original comment by jos...@gmail.com on 21 Mar 2011 at 2:12

[GoogleCodeExporter]

ha, sorry then. I still think the system works fine as we should always 
discount IE since it lags so far behind with these types of things and Opera 
has such a small following. 

Original comment by ccagle8 on 21 Mar 2011 at 2:22