Customize File Uploading button in all browser

It is  a great challenge to customize file uploading button in browsers. So that it will look same in all browser.


First thing is some how  you have to replace the file uploading button with some image. for that you just need some css and javascript and few image. So with out wasting a  min lets start . :)

Step 1. first Include the javascript file in the page or application or application where ever you want.
Step 2 . Include the required css file.

Now the big challenge is to customize the js and css file.
Basically For mozila its a great challenge. because it takes the file field size depending upon the font size.

 for that in the .js file just do one thing. in the below metioned function change in  the .js.

 .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
});
})
ie - it will be good if You set 'left': 0,
                                            'top': 0
step 4. No need to change anything else . Just create a file field field in html. <input type="file" , id = "file_1">
           and call the javascript. $('#file_1').customFileInput();
step 5: That's it It will work fine. No need to change any thing. the js will do rest of the thing. You Can use it for multiple file uploading. which i will give in my next post ... :)

reference : http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

 JS File Content .........

/**
 * --------------------------------------------------------------------
 * jQuery customfileinput plugin
 * --------------------------------------------------------------------
 */
$.fn.customFileInput = function(){
//apply events and styles for file input element
var fileInput = $(this)
.addClass('customfile-input') //add class for CSS
.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(){
//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');
})
.click(function(){ //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);
});

//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
});
})
.insertAfter(fileInput); //insert after the input

fileInput.appendTo(upload);

//return jQuery
return $(this);
};



................ end ..............


Css file content .............



body { font-size: 62.5%; margin: 50px; }
fieldset { padding: .6em 0;border:0;border-top: 1px dotted #ddd; }
legend { font-size: 1.5em; font-weight: bold; color: #555; padding: .5em 1em .5em 0; background: #fff; }
label { font-size: 1.4em; display: block; margin: .5em 10px .5em 0; }
input#upload { background: #aaa url(../images/bg-btn.png) bottom repeat-x; padding: .4em 1.2em;border: 1px solid #aaa; color: #222; font-size: 1.2em; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; margin: 2em 0; }
input#upload:hover { background: #eee; color: #111; border-color:#777; }


/*custom upload elements*/
.customfile-input { position: absolute; height: 100px; cursor: pointer; background: transparent; border: 0; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index: 999; }

.customfile { width: 400px; background: #666; cursor: pointer; overflow: hidden; padding: 2px; border: 1px solid #444; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; position: relative; }
.customfile-disabled { opacity: .5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); cursor: default; }
.customfile-feedback { display: block; margin: 1px 1px 1px 5px; font-size: 1.2em; color: #fff; font-style: italic; padding: .3em .6em; }
.customfile-feedback-populated { color: #fff; font-style: normal; font-weight: bold; padding-left: 20px; background: url(../images/icon-generic.gif) left 4px no-repeat; }
.customfile-button { border: 1px solid #999; background: #333 url(../images/bg-submit.gif) bottom repeat-x; color: #fff; font-weight: bold; float: right; width: 50px; padding: .3em .6em; text-align: center; text-decoration: none; font-size: 1.2em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.customfile-hover .customfile-button, .customfile-focus .customfile-button { color:#111; background: #aaa url(../images/bg-btn.png) bottom repeat-x; border-color:#aaa; padding: .3em .6em; }
.customfile-focus .customfile-button { outline: 1px dotted #ccc; }

/*file type icons*/
.customfile-ext-jpg, .customfile-ext-gif, .customfile-ext-png, .customfile-ext-jpeg, .customfile-ext-bmp { background-image: url(../images/icon-image.gif);}
.customfile-ext-mp3, .customfile-ext-mp4, .customfile-ext-mov, .customfile-ext-swf, .customfile-ext-wav, .customfile-ext-m4v { background-image: url(../images/icon-media.gif);}
.customfile-ext-zip, .customfile-ext-tar, .customfile-ext-sit { background-image: url(../images/icon-zip.gif);}


/* end */

please Make Sure the css url path in the css file .. and the image. You can choose what ever image you want.
Location: Bhubaneswar, Odisha, India

Comments

Post a Comment

Popular posts from this blog

Insert Bulk data using active record import

Imagine a scenario where you have to create a report and send it to multiple clients, so lets just say you have a report model and you have client and you have report client model. lets first check all the association and model structure. #report model class Report < ActiveRecord::Base   has_many :report_clients   has_many :clients, through: :report_clients end #report_client class ReportClient < ActiveRecord::Base   belongs_to :report   belongs_to :client end #clients class Client < ActiveRecord::Base   has_many :report_clients   has_many :reports, through: :report_clients end No lets say you want to create a report for 30 clients. You can do that by adding nested attributes in rails. so our report model will became  class Report < ActiveRecord::Base   has_many :report_clients   has_many :clients, through: :report_clients   accepts_nested_attributes_for :report_clients, :reject_if => proc { |attributes| att
Read more

Swap primary keys between two records in the same table in Postgres

What if we need to swap two primary keys on the same table? What's the best and efficient way to do the same? let's check Now:- Let's assume we have a user table which has 3 columns among all the rows I have taken two sample rows which are the target rows for us. Id Name Email 101 Sabyasachi XX@gmail.com 105 Saghosh xxx@gmail.com We need to swap the primary keys (which are unique by nature) between those two records so our desired result will be something like   Id Name Email 105 Sabyasachi XX@gmail.com 101 Saghosh xxx@gmail.com Now lets buield a query using CTE(common table expression) to solve the problem:- with source_user as (   select     id   from     users   where     id = 101 ), destination_user as (   select     id   from     users   where     id
Read more

How to add a bootstrap table with fixed header and scrollable body

I am pretty sure that everyone is familiar with bootstrap CSS, if not please take a look(bootstrap). Now Bootstrap has lots of different components and table styling is one of them and they have plenty of different styling options. Now sometimes if we have to display a large amount of data inside a table, the user will have to scroll till the end of the table and after few scroll, they can not see the table header. There is a way to fix this. Please follow the below steps. Step1: Create a bootstrap table first <table class="table table-fixed">   <colgroup></colgroup>   <colgroup class=""></colgroup>   <thead>   <tr>     <th>       <label>         ##       </label>     </th>     <th>       <label class="">         ###       </label>     </th>   </tr>   </thead>   <tbody id="fixed-height">       <tr>         &
Read more