input type="file" javascript click simulation

Hey Alex Ivasyuv,

Read your problem and took a look at the page you have pointed.

You have directed click event of the button to the click event of right? As I think that's not quite possible everywhere. The file input type handles the popups and uploads itself..

And seems you cannot trigger the popup file upload window of just by calling click() event. At least it's not possible in the browsers like Firefox, opera, chrome etc. But it's possible in IE right? (IE always behave strangely anyway..!)

I found some articles that may help to figure this out. check them. You'll solve the problem...!

01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e

02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

Regards, ADynaMic

I was Googling this recently and decided to come up with my own solution.

For those of you looking for a solution please see my repo - Fancy Upload jQuery Plugin

This is a small plugin for jQuery but you are welcome to snip it up or use it as your code base - whatever! It just styles up your standard upload button and gives you a lot more room for customisation.

The code for this plugin can be seen below. It can be called on any file upload element using $('INPUT[type=file]').fancyUpload();

$.fn.fancyUpload = function(data) {

    // generate unique ID for upload box and determine default text to use
    var uploadBox = $(this);
    var uniqID = Math.floor( Math.random() * 999999 );
    var defText = (data == "" || data == undefined || data.defaultText == "" || data.defaultText == undefined) ? 'Click here to add an Attachment' : data.defaultText;

    // hide the original upload box and replace with fancyUpload
    uploadBox.hide();
    uploadBox.before('<input class="fancyUpload" type="text" value="' + defText + '" id="uploadID'+uniqID+'" />').wrap('<div />');

    var newUploadBox = $('INPUT[type=text]#uploadID'+uniqID);

    // handle clicks on new upload box
    newUploadBox.click(function (e) {
        var _this = $(this);

        // blur the text box because we dont want to focus on it and emulate click on file upload
        _this.blur().siblings('div:first').children('INPUT[type=file]').click().bind('change', function (e) {
            // determine resulting file name by getting last element in full file path
            var filename = $(this).val().split("\\");
            filename = filename[filename.length-1];

            // set file name on emulated text box
            _this.attr({ 'value' : (filename == "" || filename == undefined) ? defText : 'Attachment: ' + filename }).addClass('fileOn');

            // handle form field resets (reset to defText)
            _this.parents('FORM:first').find('INPUT[type=reset]').click(function () {
                _this.attr({ 'value' : defText }).removeClass('fileOn');
            });
        });
    });
};

On Android (for security reasons) the click handler that originally received the user's click must be the same logic that sends a click to a file input element. Thus the file input element can be hidden (for example, if you want to trigger an upload from a menu selection). For example, following code (contained in JsFiddle:):

jQuery(function($) {
  $('#capture').on('click', function(e) {
    $('#file')[0].click();
  });
});