filamentgroup/jquery-custom-file-input

CSS-Friendly File Input

⚠️ This project is archived and the repository is no longer maintained.

Code Examples from the book Designing with Progressive Enhancement

This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit).

All examples use the jQuery JavaScript library.

These code examples use the EnhanceJS framework for applying progressive enhancement based on browser capabilities testing.

jquery-custom-file-input's Issues

problem with Chrome

Hi , please help, have a trouble with this one, when I click Cancel button on the upload popup, I mean I select a file, then I click again on link and upload popup appear, but if I select Cancel the precedent file which was selected disappear, and this happened only in Chrome , Can I get some info about this ?

Nuget package and optimisations

Hi - I bought your book years ago and it's been my go-to reference for progressive enhancement. I'm working on a project at the moment and use this custom file input. I also use bootstrap, and have reworked some code in my local project that skins your input control with the bootstrap controls.

So... here's my question. I'd like to create a nuget package which contains your file input script, but with some modifications to support bootstrap styling. It's largely unchanged, though. Also, the nuget package would have a slightly different folder structure than your current project.

If I were to create a nuget package as described, with you retaining ownership, would you be ok with this? If not, then what might be acceptable to you? I certainly don't want to cause any issues, that's for sure. So thought best to check in, first.

Changes for Firefox

Hi,

I post here my version of your widget, where we manage somes specific case for Firefox (label, initialization ...).

Regards

$.fn.customFileInput = function(){
//apply events and styles for file input element
var fileInput = $(this)
.addClass('customfile-input') //add class for CSS
.css("top", "0px") // In Firefox, if we click on the associated label without having a hover on the input file, the display can be broken in some cases
.css("left", "0px")
.mouseover(function(){ upload.addClass('customfile-hover'); })
.mouseout(function(){ upload.removeClass('customfile-hover'); })
.focus(function(){
upload.addClass('customfile-focus');
fileInput.data('val', fileInput.val());
})
.blur(function(){
upload.removeClass('customfile-focus');
$(this).trigger('checkChange');
})
.bind('disable',function(){
fileInput.attr('disabled',true);
upload.addClass('customfile-disabled');
})
.bind('enable',function(){
fileInput.removeAttr('disabled');
upload.removeClass('customfile-disabled');
})
.bind('checkChange', function(){
if(fileInput.val() && fileInput.val() != fileInput.data('val')){
fileInput.trigger('change');
}
})
.bind('change',function(){
if($(this).val()){
//get file name
var fileName = $(this).val().split(//).pop();
//get file extension
var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
//update the feedback
uploadFeedback
.text(fileName) //set feedback text to filename
.removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
.addClass(fileExt) //add file extension class
.data('fileExt', fileExt) //store file extension for class removal on next change
.addClass('customfile-feedback-populated'); //add class to show populated state
//change text of button
uploadButton.text('Change');

        } else {
            // For the reset form case
            uploadFeedback
                .text("No file selected...")
                .attr("class", "customfile-feedback");
            uploadButton.text('Browse');
        }

    })
    .click(function(event){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
        fileInput.data('val', fileInput.val());
        setTimeout(function(){
            fileInput.trigger('checkChange');
        },100);
    });

if(fileInput.attr("id")){
    // Manage properly the click on the associated label (in Firefox, we can have some problems)
    $("label[for='" + fileInput.attr("id") + "']").live("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();
        fileInput.trigger('click');
    });
}

//create custom control container
var upload = $('<div class="customfile"></div>');
//create custom control button
var uploadButton = $('<span class="customfile-button" aria-hidden="true">Browse</span>').appendTo(upload);
//create custom control feedback
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">No file selected...</span>').appendTo(upload);

//match disabled state
if(fileInput.is('[disabled]')){
    fileInput.trigger('disable');
}


//on mousemove, keep file input under the cursor to steal click
upload
    .mousemove(function(e){

// fileInput.css({
// 'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
// 'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
// });

        fileInput.css({
            'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
            'top': e.pageY - upload.offset().top - 20
        }); 
    })
    .insertAfter(fileInput); //insert after the input

fileInput.appendTo(upload);

//return jQuery
return $(this);

};

Any reason to trigger a change event on the fileInput?

I noticed that you manually triggering a change event on the file input, and wondering why?

https://github.com/filamentgroup/jQuery-Custom-File-Input/blob/master/js/jQuery.fileinput.js#L33

For my app, I have another functioned bound to the change event which is getting called twice. I've commented out that line and things still seem to work fine, but wanted to make sure I wasn't missing something....

Multiple Inputs

Hi,

Can anyone help me. I have an issue with implementing multiple file inputs and styling them with custom file input. It seams that all inputs are positioned over each other at the place of the first one. CSS changes are on their places, but inputs in the html are moved on the place of the first one?

Does anyone have solution for this issue?

Thanks in advance.

How can i call the customFileInput method after content is loaded with .load() ?

Hello,

Nice plugin !

It's not really an issue :
How can i call the customFileInput method after content is loaded with .load() ?

The input element is in a page loaded (/myFile.php) with .load() :

$maDiv.load("ajax/myFile.php");

So , i can't use $(document).ready because the input element doesn't exist in the main file.

Thanx.

Tab Key - File Input Focus

When custom file input gained focus after hitting the tab key, text label and the button of the input shifts upwards and disappear. I also come across this issue at demonstration page of the file input on filament group's website. I had a chance to check it out with both Firefox and Chrome. Both generated the same result.