https://github.com/jpcaparas/jquery-custom-file-input

Stylize file input elements with jQuery. Adapted from http://goo.gl/myyz.
https://github.com/jpcaparas/jquery-custom-file-input

Last synced: about 10 hours ago
JSON representation

Stylize file input elements with jQuery. Adapted from http://goo.gl/myyz.

• Host: GitHub
• URL: https://github.com/jpcaparas/jquery-custom-file-input
• Owner: jpcaparas
• License: mit
• Created: 2014-10-02T04:19:58.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-10-04T05:43:05.000Z (over 10 years ago)
• Last Synced: 2023-03-30T03:23:57.195Z (almost 2 years ago)
• Language: JavaScript
• Size: 180 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Custom File Input

## The `SI.Files` (the secondary dependency) for this plugin is wholly credited to [Shaun Inman](http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom)

## Overview 

This jQuery plugin `(jquery.customFile.js)` allows you to overlay an element on top of an existing input field. The input field maintains zero opacity and mimics the dimensions of replacement element sitting on top of it.

* You can pass a jQuery element as (a) the first argument or (b) as a `replacement` object property

* The second argument is an (optional) callback function

## Example Usage

```javascript

(function($) {

    // Create the replacement element to be overlayed on top of the file input button

    var replacementElem = $('
')

        .text("This is a DIV masquerading as a file upload button. Click it.")

        .css({

            background: '#ccc',

            border: '1px solid #000',

            display: 'block',

            width: '200px',

            padding: '3em',

            background: '#f1f1f1',

            cursor: "pointer"

        });

        

    // Call the "customFile" function passing a "replacement" property

    // with the replacement element we've just created above.

    $('#file').customFile(replacementElem);

}(jQuery));

```


## Known issues

* Passing in a `button` element suppresses the functionality of the file input element.