CODEWITHSUNDEEP
javascripthtmlfileclicksimulation
Alex Ivasyuv
Alex Ivasyuv

Reputation: 8844

input type="file" javascript click simulation

I'm wondering why this example works this in Chrome 10, but doesn't work in Fx 3.6? IFAIK, exactly input type="file" click doesn't work there...

Could anyone explain, why?

Upvotes: 0

Views: 15215

Answers (4)

SynCap
SynCap

Reputation: 6294

<label><input type="file" name="fuckedfile" id="fuckedfile" style="display:none">
CLICK!</label><br/>

Upvotes: 1

Rick Mortensen
Rick Mortensen

Reputation: 343

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();
  });
});

Upvotes: 0

Chris
Chris

Reputation: 2035

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');
            });
        });
    });
};

Upvotes: 2

Dilhan Maduranga
Dilhan Maduranga

Reputation: 2281

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

Upvotes: 5

Related Questions