markusslima / bootstrap-filestyle Goto Github PK
View Code? Open in Web Editor NEWjQuery customization of input html file for Bootstrap Twitter
Home Page: http://markusslima.github.io/bootstrap-filestyle/
License: MIT License
jQuery customization of input html file for Bootstrap Twitter
Home Page: http://markusslima.github.io/bootstrap-filestyle/
License: MIT License
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
Click the button on your demo page (http://markusslima.github.io/bootstrap-filestyle/) , no file chosen window be popped.
Browser : firefox 20.0.1
Cannot access http://dev.tudosobreweb.com.br/bootstrap-filestyle
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.
I know this doesn't affect the functionality of the plugin, but would you accept a PR unifying this?
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?
When submitting and clearing ajax form, filestyle stops working (when choosing new file it does not change the textbox)
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
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.
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
bootstrap-filestyle not support bootsrap 3.
the text field shows C:\fakepath{filename}, would be good if this could be an option to just show the file name.
Hi,
There is not accessibility support for filestyle. So :
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.
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!
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 :)
Is there a way to change the button text or icon with an onchange Event?
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?
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.
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.
Thanks for the great plugin!. I think it would be nice to support HTML 5 data attributes as plugin options.
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
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
Is there any way that the form could be submitted right after upload?
It would be nice to support drag&drop to populate input file (like the default input file)
Just go to the demo page and run $(':file').filestyle();
a couple of times.
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.
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
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.
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
Is Bootstrap3 supported?
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.
For more info check: http://twitter.github.io/bower/
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.
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!
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.
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 :-)
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?
Examples on set methods have incorrect syntax:
$(":file").filestyle('input', false});
instead of
$(":file").filestyle({'input': false});
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.
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"..
How can I make a disabled appearance in the button?!
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!
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.