visual feedback on choosing & uploading "the right file"

[hpvd]

It's always nice to have some visual feedback, if one is doing right (choosing right file)

Of course a preview of a file after upload is nice,
but it's more important to have a confirmation for doing right as early as possible in upload process.

This could done by showing

• file name
• file type
• file size (this also helps to have a feeling needed upload time...)

To enhance visualisation of filetye and have a good fitting, nice looking "symbol" for a file during (from very first start) and after successful upload
maybe one can make it easy to use font awesome icons for this.

e.g.

zip, rar,... https://fortawesome.github.io/Font-Awesome/icon/file-archive-o/

mp4,mov,... https://fortawesome.github.io/Font-Awesome/icon/film/

mp3, wav,... https://fortawesome.github.io/Font-Awesome/icon/file-audio-o/

photos, images,... https://fortawesome.github.io/Font-Awesome/icon/file-image-o/

pdf https://fortawesome.github.io/Font-Awesome/icon/file-pdf-o/

txt https://fortawesome.github.io/Font-Awesome/icon/file-text-o/

php, html,... https://fortawesome.github.io/Font-Awesome/icon/file-code-o/

excel https://fortawesome.github.io/Font-Awesome/icon/file-excel-o/
word https://fortawesome.github.io/Font-Awesome/icon/file-word-o/
powerpoint https://fortawesome.github.io/Font-Awesome/icon/file-powerpoint-o/

[kvz]

I like this idea very much, how about you @tim-kos @arturi @hedgerh ?

[arturi]

Yeah, good idea! Icons are great, preview once the file is ready or even while uploading (if it’s an image?), progress for each file.

Have to account for multiple files though, what if we get like 50, should we not show individual icons & progress then, or should we show just a few.

[kvz]

It seems Dropzone advertises:

I wanted a callback for image previews, that don't kill the browser if too many too big images are viewed.

Perhaps we should indeed check out how they evolved to handle this?

[hpvd]

@kvz good to hear :-)

Preview images of each file may have an impact if not build with care for this load.
Icons shouldn't be a performance problem at all

It's simply like a new font character. No matter which size is used/shown.
see this example code
https://fortawesome.github.io/Font-Awesome/examples/
and
have a look on this site (and it's code) regarding load time:
https://fortawesome.github.io/Font-Awesome/cheatsheet/

[hpvd]

regarding progress bar or similar one should be easily be able to find a solution with no performance problems.
For a first aproach one could maybe only show the one with longest expected upload time (which would be similar to total time of all uploads)?

[hpvd]

Since this was only meant to help the user have a fast positive feeling by "confirming having chosen the right file", there are some information summed up regarding feedback on "Uploading Progress" see #62

[kvz]

Icons shouldn't be a performance problem at all. It's simply like a new font character. No matter which size is used/shown.

That's good to know! I think using font icons is the way to fly here then. Let's indeed keep this issue about the 'file selection feedback', and #62 for proposals on 'uploading progress feedback'.

[hpvd]

just forget something because it was clear that it should be this way:
not only showing

• file name
• file type (e.g. in optimized way via icon, as early as possible, as discussed above)
• file size

but also
making file name after upload "active" as a link to re-download the file
-> to check if it is the right file...

This is especially important if one do not have a suitable preview
and one as a user has made "last minute changes" to the file e.g. this way:
start upload, remember something is wrong, stop upload, modify file, save, start upload again
And haven't changed the file name before uploading it again...

=> the question occurs: which file did I have uploaded? Is it the right one?
shall I proceed and order a 100USD print job based on this? (example)
If I could redownload it and see it's the version I wanted - everything is fine

[kvz]

We'll consider this for the preview stage, thank you!

[hpvd]

just some Pro arguments for using icons instead of image previews:

• these could be shown immediately after user has selected a file (nothing has to be uploaded at this point)
• would produce much lower serverload (since this could be easily done on client side and server is not involved) and much lower client load if preview production done on client side
• script sizes could be much smaller if no preview processing ist used
• amount of data to be transfered could be reduced (on server: no transfer of previews or on client: no transfer of script to produce previews needed)
• icons are an universal approach and could be used in same way for every type of file (previews of course could only be generated from special types like images, pdf, movies..)
• one do not have to care about possibly different ways to generate a preview of different types of files
• would give a consistent look, since there could be icons for every type of file (preview is not possible for every type)
• works perfectly in different views and different sizes (list of files, side by side...)

just two additional thoughts:
Maybe using "only icons" could be also an much easier to implement first step
Maybe it's also an idea to replace icons with previews at the point of time the upload has finished...

[hpvd]

just added some more pro arguments in list above...

[hpvd]

some pro arguments using not only "name.ext" but also icon or preview:

• better usability (easier and faster to catch)
• advanced professional look (they care about details...)
• brings some eye-candy ( "normal" users like it of course and also programmers are humans who can't resist some sweets ;-)

btw: ...and for the spread and adoption of this great project:
good looking is pretty important:
if you decide which tools or bib you use, there are many people who use the smarter looking one (even if it's from technical pov not that great)
Some because they prefer it themselves (maybe only subconsciously...), others because their (none technical) customers must like it too...or simply say what they have seen and liked on other places..

[hpvd]

that's the way it already looks today - nice :-)

[hpvd]

maybe a very quick fix optimization for all case where there is no preview/special icon available:
couldn't one simply show file extension in the icon insted of "?" ?

[hpvd]

would be handy to give file list more hight for more files be visible at once without scrolling e.g.flexible growing to total hight of modal box.
This is how it looks at the moment:

[hpvd]

Showing filesize before upload would be helpful...
(maybe at the place where later the progressbar appears?)

[hpvd]

we just use this snippet to visualize file types via font awesome in another project...
maybe it's helpfull/interesting - not only when using font awesome...

case 'zip':
case 'rar':
case 'gz':
case 'bz':
case 'bz2':
return 'file-archive-o';

case 'mpg':
case 'avi':
case 'mp4':
case 'mov':
return 'film';

case 'mp3':
case 'wav':
return 'file-audio-o';

case 'jpg':
case 'gif':
case 'png':
case 'jpeg':
case 'tiff':
case 'bmp':
case 'psd':
return 'file-image-o';

case 'pdf':
return 'file-pdf-o';

case 'txt':
return 'file-text-o';

case 'php':
case 'html':
case 'js':
return 'file-code-o';

case 'xls':
case 'xlsx':
return 'file-excel-o';

case 'doc':
case 'docx':
return 'file-word-o';

case 'ppt':
case 'pptx':
return 'file-powerpoint-o';

default:
return 'file-o';

[arturi]

Thanks, that’s definitely helpful!