markusslima / bootstrap-filestyle Goto Github PK

View Code? Open in Web Editor NEW

719.0 719.0 239.0 959 KB

jQuery customization of input html file for Bootstrap Twitter

Home Page: http://markusslima.github.io/bootstrap-filestyle/

License: MIT License

PHP 2.14% HTML 40.75% CSS 57.11%

bootstrap-filestyle's People

Contributors

Stargazers

Watchers

Forkers

s-zok snatchev timmy85 danielpretin wangwengcn jgable hgcummings mrafael12 juans-zz kendoctor kasin herbyme thaolt rota3rafael myalban bionicpill jodytate taalendigitaal minimedj anmanet stevezl ariault-blanchard onasusweb salvino mourad-zitouni carlopires mickypun lrochadel marceloleiva datonis ameunier ducky007 istvan-antal 42studio joanne21 asmshaon sfarfarini 85lele songtanmay lucas3671 sahat rahulgupta26 rabihs erikkallen shaikhaezaz80 thomassander ericmanlol peredaj souravkjha prashantmore123 wanbin2014 krrrishh wir juanmadhardy funchaljoao ferromariano kalyneramon aminrahimi diegofrsilva davidxi claudiopetrini rouxyang frederox neerajdas davidxchen drmikeh loqman raghucse2010 simran1306 jtsay362 squallcs12 woody2758 andreufaner fabiopiovam andygoo sparkinzy maitret hongsimon evelioamd siriradc huysokhom kaiomarcellus rockyspade funpandacode luiseduardo31 n-brock vaniiiiiiiiii yuuwork tdouce igironv demonshir hernanchodiaz daniluski iluminate sachinuthale swatcall femotizo zeusbaseweb zanetinemanish crecinos

bootstrap-filestyle's Issues

Foundation-Filestyle

Just a note of thanks to Mark for this code.

I've adapted it to work with the Foundation framework, and forked/created a new repo for it: https://github.com/cviebrock/foundation-filestyle

I'll follow any changes to this Bootstrap version and try and incorporate them into my repo.

Thanks again!

Button with side counter doesn't clear the counter on the "clear" event

Hi,

I have a button with only label and counter (no file name).
When I select a file the counter shows "1" which is correct, then after calling $('#newLogo').filestyle('clear'); the file input gets cleared, but the counter keeps showing "1".

Regards,

Eduardo.

Please add component.json for bower install

For more info check: http://twitter.github.io/bower/

button names

is it possible to use the original button names which comes from the Browser?

and so on...

Autoregister when the DOM is fully loaded

I propose to do wrap autoregister $ (finction () {...});

// Data attributes register
$(function(){  // <-- added
    $('.filestyle').each(function () {
    var $this = $(this),
        options = {
            'buttonText': $this.attr('data-buttonText'),
            'input': $this.attr('data-input') === 'false' ? false : true,
            'icon': $this.attr('data-icon') === 'false' ? false : true,
            'classButton': $this.attr('data-classButton'),
            'classInput': $this.attr('data-classInput'),
            'classIcon': $this.attr('data-classIcon')
        };
        $this.filestyle(options);
    });
});  // <-- added

Should not reinitialize file field widget multiple times

Just go to the demo page and run $(':file').filestyle(); a couple of times.

filestyle is not working on ajax loaded content

Hi,

I have a situation where my form itself gets loaded via ajax call, and the filestyle is not working on ajax loaded content, the default style appears but it works fine on independent pages.

Also the button for some reason is not aligned with the input box, attached a screenshot.

Could you please help me out?

Add methods to change options dynamically

Accessibility

Hi,

There is not accessibility support for filestyle. So :

i can access with TAB to hidden input file
i can't access with TAB to new button
and so, i can't show dialog with SPACE or ENTER when i am on button (but i can't access to the button with TAB).
optionnaly, i am not on the button or input when i click on a label associated

I have fix three first at work but not the last.

I can give you how i have fixed it if you want to be more speed.

Thanks.

official release?

Hi! I'm maintaining bootstrap-filestyle integration with rails, and somehow I missed the 1.0.4 and 1.0.5 releases. I'll fix it now for 1.0.4, but you don't seem to have a tag for 1.0.5... is the file from master the stable release?

Also, the readme has an outdated version :)

Display Issue in Internet Explorer 8

Hi,
This component has been an answer to my prayers as a lot of the people I was working for want a pretty file selector and internationalizable too and they do not like it when I tell them that beautifying a file selector is not recommended nor easy.
Unfortunately, there is a display bug in Internet Explorer 8. (See the attached printscreen)
Is there a workaround for this or any attribute I must use to get rid of this ?
Thank you!

doesn't work with IE 7

Tested http://markusslima.github.io/bootstrap-filestyle/ on example file upload buttons and nothing happens, file dialog doesn't open, no errors.

IE version 7.0.5730.13

[Firefox] jquery-fileupload + filestyle = change event not triggered

Hello,

I'm having an issue on firefox (it works fine on other browsers) when using filestyle along with jquery-fileupload. It seems that the 'on change' event is only triggered the first time when selecting a file.

Here is a minimalistic script to reproduce the issue :

<html>
<header>
<title>Test bug fileupload ff</title>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="jQuery.FileUpload/jquery.fileupload.js"></script>
</header>
<body>
<input type="file" id="msg_attachement" />
<script type="text/javascript">
$(function() {
            $("#msg_attachement").filestyle();

            $("#msg_attachement").fileupload({
                add: function (e, data) {
                    alert('add');
                    return e;
                }
            });
});
</script>
</body>
</html>

On firefox, the alert is only triggered once even after several file selection.
Disabling filestyle fixes the issue (at the cost of the styling obviously)

Do you have any idea what the problem could be ?

Best regards,
Julien

Event for visual indication of file selection

If the input text is disabled, it would be great to be able to indicate in the UI if the user has successfully chosen a file. For example, on your demo page, when the input is disabled, choosing a file (clicking the "Choose File" button and selecting a file) shows no change in the UI.

Is there an event that can be exposed, or perhaps another attribute on the element, that can be used to visually indicate the state change so that the user isn't left to wonder if their file selection worked ok?

Cheers

input file validation by type

first i want to say your plugin is awesome :o)

i have a small question. i want to make a file validation with jquery when the users select a file from their computer

this snippet checks if the selected file is an image and removes it if not!

$(":file").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("not an image");
            break;
    }
});

but i can't use it with your bootstrap-filestyle.
do you have any ideas?

edit: yes i know this is not a real validation :) just another feature :D

Events for after a file is chosen

Not sure if this exists yet, but I'd love to be able to style the button after a user has chosen a file.

Right now, the user doesn't visually know if he has chosen a file or not.

Does not work in IE when submitting form with JavaScript

This is not going to work for IE in cases where you submit the form by JavaScript.

Example:

I have a button on my site to load a CSV file. It's contained in a form element that I programmatically submit when I detect a file has been selected. When the form is submitted via JavaScript on IE after a click event was programmatically sent to the file input, it will throw a Security Error.

For a better description, check this stack overflow answer.

As a workaround, you can try changing the button element to a label around lines 37-40 of the plugin. I've tested it myself and it looks like the styles for buttons will still apply even for label elements.

a Small Bug in chrome browser

Hi,

There is one weird issue on chrome. When I click 'browse' button the page will be automatically scroll down to the bottom. The problem will be arise if there is multiple file uploading inputs are there. IE and Firefox render the same perfectly.

For example:
go to the main page-options: http://markusslima.github.io/bootstrap-filestyle/#Options

click on the 'choose file' button, then you will see, the page will get scrolled down.

Thanks

CSS little issue with required input attribute

Hi!

You use .css({'position':'absolute','left':'-9999px'}) to original button hiding. But, when the "required" attribute is set for this input, and user forgot to pick the file, browser show alarm on the leftmost window edge due to -9999.

Better way to avoid this - using .css({'position':'absolute','clip':'rect(0,0,0,0)'})

Regards,
Andrey haritonov aka Aharito

Possibility to receive the multiple selected files

When i add the 'multiple' tag to the file input. I only receive the information of the last selected file in PHP. The possibility to select multiple files is a default function. But this add-on kills this.

Support bootstrap 3

bootstrap-filestyle not support bootsrap 3.

new style method

hi markus...

is it possible to add the name from the selected file next to the button

Submitting ajax form with Filestyle input

When submitting and clearing ajax form, filestyle stops working (when choosing new file it does not change the textbox)

Support HTML 5 data attributes

Thanks for the great plugin!. I think it would be nice to support HTML 5 data attributes as plugin options.

AngularJS

When using angulars ng-view directive the style does not get applied a quick fix is to add:

$('.filestyle').each(function () {
        console.log("found button");
        var $this = $(this),
            options = {
                'buttonText': $this.attr('data-buttonText'),
                'input': $this.attr('data-input') === 'false' ? false : true,
                'icon': $this.attr('data-icon') === 'false' ? false : true,
                'classButton': $this.attr('data-classButton'),
                'classInput': $this.attr('data-classInput'),
                'classIcon': $this.attr('data-classIcon')
            };

        $this.filestyle(options);
    });

to the controller, however this goes against angular policies it should be in a directive.

Submit right after?

Is there any way that the form could be submitted right after upload?

Mixed tabs, spaces and indentation

I know this doesn't affect the functionality of the plugin, but would you accept a PR unifying this?

Button is shifted down (compared to text input) if form does not have any class

In all your examples input is placed into form with form-inline class

Due to this text input gets additional css

margin-bottom: 0;

If form does not have any class we see next stuff

text field displays C:\fakepath\{filename}

the text field shows C:\fakepath{filename}, would be good if this could be an option to just show the file name.

Incorrect syntax on set methods (site documentation)

Examples on set methods have incorrect syntax:

$(":file").filestyle('input', false});

instead of

$(":file").filestyle({'input': false});

clear() method adds a new instance instead of clearing existing file input

On the error response of an AJAX call, my file input seems to stop updating the selected file. Using $(":file").filestyle('clear') only adds a new instance, rather than clearing the existing file input. Thoughts?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of markusslima/bootstrap-filestyle!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library markusslima/bootstrap-filestyle is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "markusslima/bootstrap-filestyle",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

not work in firefox

Click the button on your demo page (http://markusslima.github.io/bootstrap-filestyle/) , no file chosen window be popped.

Browser : firefox 20.0.1

All buttons in form bound to "click" choose file.

Hi,
This snippet here "$this.parent().children(':button').click(function () {$this.click();});" seems to bind to all buttons on the form.

So to use this plugin, you have to remove all <button elements from the form.

i.e. Using <button type="submit" ... Will trigger the File Choose dialog when clicking "Submit"..

Any plan on localization of plugin

Multiple File Selections

I just tried your nifty addon in the CMS I'm building, and it doesn't work for using Multiple File Selecting, e.i., more than one file at a time. Is there a way to implement this easily?

Installing 1.0.5 through bower returns an outdated bootstrap-filestyle.js

Hello, well I'm not sure that this is exactly what is happening, but I see that you fixed a duplicate object property on commit d18b371, but when I install 1.0.5 through bower, the resulting bootstrap-filestyle.js doesn't have these changes. Thanks.

Input and button alignment

The input and the button are not aligning properly.

It looks like I am not the only one with this issue, as seen in a previous issue:

I am not adding any styling of my own.

Screenshot is from Chrome v.26, also tested in Firefox with the same result.

Cancel on open file dialog issue

Hi,
Click the choose file button, choose a file on the open file dialog. then click open. Now you have the file name shown as input text. and the value is something like "fakepath/filename".
Now click the choose file button, then click cancel, the old file name is still in input, but the value is empty.

No longer working?

Its been a long day so its entirely possible I'm missing something obvious, but this doesn't appear to be working at all anymore (no formatting is applied). Is there an incompatibility with JQuery 1.9.1?

Your site looks like it is down.

Cannot access http://dev.tudosobreweb.com.br/bootstrap-filestyle

How can I make the button disabled?!

How can I make a disabled appearance in the button?!

How to change button text or icon onchange?

Is there a way to change the button text or icon with an onchange Event?

Implement with input prepend/append issue

Hey Markus,
First of all, thank you for the plugin! looks brilliant.
I'm very limited in javascript and I'll explain as I can.. (I believe there must be some kind of a conflict in my case)
Trying (since..5 days now..) to implement your plugin with an input classed "prepend/append" without success.
Actually, I'm wrapping the input as following:

    <div class="input-prepend input-append span12"><span class="add-on"><i class="icon-picture icon-large"></i></span>
    <input type="text" class="span9" style="margin:0;" placeholder="Press the Browse button to upload your photo" /> 
         <input type="file" class="filestyle" name="img_upload_file" id="img_upload_file" accept="image/*" data-classButton="btn" data-input="false" />
         <input type="hidden" name="ajax-nonce" id="ajax-nonce" value="<?php echo wp_create_nonce('upload_img'); ?>" />
         <input type="hidden" name="mode" id="mode" value="computer" />
      <input type="hidden" name="action" id="action" value="fms-upload-img" />
        </div>

The result is as following :

"Choose file" wording doesn't display.
Tried everything. Adding a placeholder, etc, etc. Nothing seems to work. The button just stays empty whatever I try.
Please, I'm stuck and don't know where to turn to.
Thank you so much.

First time commenting on github.. Don't know how to tag this as "Question".. Sorry.

Options doesn't work

Hi, I downloaded the master and changed the test file.

I added the following line:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-buttonText="Find file">

The options data-input and data-buttonText has no effect.

Drag&Drop

It would be nice to support drag&drop to populate input file (like the default input file)

Issue in Button UI

The button is not getting displayed properly ! Label, Glyphicon on the button not getting displayed. IE11, Chrome as well as Firefox . I have attached it here

Bug: Input file is not hidden

When you hide input file and add filestyle need to change css left position to something like '9999px' otherwise old input file is seen on wide screens.

How to cancel the file once it's selected?

Thanks, this is fine, but IMHO it suffers the same basic issue of Greg Pike's implementation (grevory/bootstrap-file-input#15): no way to cancel the file once it's selected, if a user rethinks about uploading a file he/she has to refresh the page and lose the other filled fields...
Please add this feature, it's part of the file type field!
Thanks :-)