Some File Input Fun

Tips
1

While putting together a quick demo for a new product I placed the FileUploader element down and labeled it, To many times this thing has looked at me as if its had a rather hard life & I have left the poor thing looking like a square with no pants.

image

So I had a little play around, and come up with this,

image

Now this may look like the same, simple, pants-less upload element except for one little difference.

pdf
pdf.gif1013×753 537 KB

Give him a PDF & he will wear it!

Here is how:

Give your upload element an ID, in this case its pdf so if you want to use your own ID just swap it in the following code.

All that is needed here is the ‘file uploader value has changed’ event needs to run some js using ‘Toolbox’ or ‘Connective Cloud’ plugins.

image

Here is the code:

var id = "pdf"; //change this if you dont name your element pdf
var url = "DYNAMICE UPLOADERS VALUE!"; //Your uploaders url value
$('#' + id).prepend($('<embed src="' + url + '" style="height:100%;width:100%;outline:none;"></embed>'));      
$('#' + id).click(function(){
   if($('#' + id).find('embed')[0]){
            $('#' + id).find('embed')[0].remove();
        $('#' + id).find('input')[0].click();
        }
});

Now you can see changing <embed> elements we could use a video in there, perhaps a .gif .onClick() right away with a cool filling glass effect, then swap it for an image after the upload is complete.

Its about here that you start going way off track with it, adding way too much, like the old doll inside a doll inside a doll inside bubble so i stop now.

enjoy!

6 Likes