jasny / bootstrap Goto Github PK

Thanks for the plugin. If I have multiple fileupload divs on a single page, only the first one works for me somehow. Here's the html snippet

<label class="label-attach">Attach files or photos</label>

<div class="fields">
<div class="fileupload fileupload-exists" data-fileupload="file">
<input name="" value="" type="hidden">
<div style="line-height: 18px;" class="fileupload-preview uneditable-input">Admin.png</div>
<span class="btn btn-file">
    <span class="fileupload-new">Select file</span>
    <span class="fileupload-exists">Change</span>
<input id="feed_attachments_attributes_0_attachment" name="feed[attachments_attributes][0][attachment]" type="file">
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
<div class="fields">
<div class="fileupload fileupload-new" data-fileupload="file">
<div style="line-height: 18px;" class="fileupload-preview uneditable-input"></div>
<span class="btn btn-file">
        <span class="fileupload-new">Select file</span>
    <span class="fileupload-exists">Change</span>
    <input id="feed_attachments_attributes_new_1339310815960_attachment" name="feed[attachments_attributes][new_1339310815960][attachment]" type="file">
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>

I am using it in my rails project if that helps.

Updating an image attachment , I am using an edit form w fileupload-exists and the current existing image

%div.fileupload.fileupload-exists{:'data-provides' => "fileupload"}
     %div.fileupload-preview.
            = image_tag @craftwork.image_url
    %span.btn.btn-file
    %span.fileupload-exists= "Change"

I can select a new image to replace the current one ... but what if I want to cancel this selection and reset back to the current image
Currently, I guess it's not possible to display a 'reset' button.... and rest on the client ,would it be a nice feature ?

I hacked it, adding myself a 'reset button' with an Ajax call to the server to reset the fiel upload widget ..

btw : I there a way to detect when the fileupload-preview image changed ( when upload is completed) to display the 'reset' button when upload is completed . I currently display it when user click on 'change' button ...

The file uploader doesn't seem to work inside the bootstrap modal. Instead it doesn't submit the file in POST.

1. It works fine when I just use a regular inside the modal.
2. It works fine when I put the file uploader code outside the modal.
3. It doesn't work when I put the file uploader inside of a modal.

Need to apply this to allow for error messages to be rendered on the right hand side:

.fileupload {
    display: inline-block;
}

Not an issue with the project itself, per se, but whenever I try to visit jasny.github.com/bootstrap, I get an error from markdotto.github.com stating that For security reasons, framing is not allowed. It looks like the Github buttons are causing the problem - a quick look at github.com/markdotto/github-buttons seems to indicate that the buttons should be from http://ghbtns.com as opposed to http://markdotto.github.com/github-buttons.

When I use the blueimp file uploader, it will load the jquery.fileuploader.js. Then it will cause the display issue about filename

Rowlink uses data property data-provides when data-provide is rest in the rest of Boostrap.

data-provides should continue working for compatibility.

http://jasny.github.com/bootstrap/javascript.html#rowlink

As subject says. Is there one? I've got the name of the file last posted and would like to restore the control as if I would have selected the file again. BTW: Thanks for quick response on #51
Regards

Is it possible to drag files into the "fileupload-preview thumbnail"?

The span is located to the right and below the text box where the text should be shown, which makes it invisible (FireBug to the rescue). Below is the code for the form, which looks OK, so I'm assuming some of my css is interfering with the span position, but I don't know how to fix it.

  <form action="/ldap_app_three/carpictures/add/1" id="CarpictureAddForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"/>
</div>  
<fieldset>
    <legend>Add Carpicture</legend>
    <input type="hidden" name="data[Carpicture][carmodel_id]" value="1" id="CarpictureCarmodelId"/> <div class="fileupload fileupload-new" data-provides="fileupload">
      <div class="input-append">
        <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> 
          <span class="fileupload-preview"></span>
        </div>
        <span class="btn btn-file">
          <span class="fileupload-new">Select File</span>
          <span class="fileupload-exists">Change</span>
          <input type="file" name="data[Carpicture][fileName]"  id="CarpictureFileName"/>       </span>
        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
      </div>
    </div>
    <div class="submit"><input  class="btn" type="submit" value="Upload"/></div>  </fieldset>
  </form>

in the customize page when selecting on jasny extension, the downloaded zip file would be corrupted

Add something like this:
<input type="text" data-mask="255.255.255.255" />
in bootstrap-inputmask.js.
So you can`t enter in input numbers bigger then "255"

Error message for file upload is not correctly positioned after validation.

If I have more than one field using the input mask plugin, and I autofill the form, the form field focus starts rapidly and endlessly jumping between all of the masked fields on the form, selecting the full text in the input once focused. Attempting to focus another field while this happens does not break the loop, and it continues to change focus between fields. The only way to break the loop is to reload the page.

So far I have only been able to reproduce this in Chrome and Safari.

A temporary work around for the issue is to disable browser autocompletion on the data-mask fields to prevent the autocompletion from happening.

$('input[data-mask]').prop('autocomplete', 'off')

And i want to use it with modal in bootstrap, someone can help me. thanks.

I have copied and pasted the example code as follows.

<div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-append">
            <div class="uneditable-input span3"></div>
            <span class="btn btn-file">
                <span class="fileupload-new">Select file</span>
                <span class="fileupload-exists">Change</span>
                <input type="file">
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
        </div>
    </div>

the result is that button is extra wide and extra high then what's represented on the website. If I remove

 <div class="input-append">  

then it works fine.

Hello,

am trying to use fileupload for edit operations whereby am retrieving images from backend to be displayed in edit mode.

I tried to follow instructions on manual, it says i must replace fileupload-new class with fileupload-exists which I did.

I do get the edit mode UI, with Change and Remove buttons. but the image from server is not rendered, actually am not sure where should I have it render the url of the current image?

When using Bootstrap 2.1.1 in conjunction with the bootstrap-inputmask plugin (ver j1), data-masks that contain numbers fail.

For example, if you are trying to format a zip-code field, this command will fail...
input type="text" placeholder="Zip" name="zip" data-mask="99999"

However, this command will not fail (inserted random space at end):
input type="text" placeholder="Zip" name="zip" data-mask="99999 "

These commands, curiously, will not fail either:
input type="text" placeholder="Zip" name="zip" data-mask="(99999)"
input type="text" placeholder="Zip" name="zip" data-mask="aaaaa"

When trying to use blueimp in combination with the fileinput extension there is a name conflict because both libraries extend jquery by "fileupload()".

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js

vs.

https://github.com/jasny/bootstrap/blob/master/js/bootstrap-fileupload.js

I can't find any programmatic way of resetting the fileupload, short of click()ing the remove button. When the form resets, fileupload should reset too. Also, a programmatic reset() would be welcome.

On a typical bootstrap submit, if an error occurs, the borders of whatever field is in red. This does not apply to the custom file uploader which makes it look out of place.

This the issue bootstrap-inputmask.js on line 95:

var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask"

$.browser has been removed in 1.9: http://api.jquery.com/jQuery.browser/.

In bootstrap-rowlink.js it has a function whose definition begins like this:

var Rowlink = function (element, options) {
    options = $.extend({}, $.fn.rowlink.defaults, options)
    var tr = element.nodeName == 'tr' ? $(element) : $(element).find('tr:has(td)')

It does not work on a Mac with Safari or Firefox because the element.nodeName is returned in upper case ('TR' instead of 'tr'). I hacked it to accept either, and it was fine. I have not checked any other browsers on a Mac.

Date picker from Bootstrap Form Helpers

Filename isn't shown nor is image preview shown in when selecting an image file using Safari. It seems like it used to work but doesn't seem to work in latest version of Safari.

The image uploads fine however.

Would be nice if you modify composer.json to inform Composer that this package replaces twitter/bootstrap (see http://getcomposer.org/doc/04-schema.md#replace).

{
  // ...
  "replace": "twitter/bootstrap"
  // ...
}

After having selected a file in the upload dialog, the "Select file" button changes to read "Change". So, user clicks "Change", but then decides the original is fine, and clicks "cancel" in the dialog window. The text for the original selection remains in the input area. User clicks "Upload", thinking the original selection remains intact, but in-fact it has been cleared.

1. Click "Select File"
2. Choose a file and click OK
3. Click "Change"
4. Click "Cancel"
5. Click "Upload"

The "file" var is defined in the scope of the change event (line 59). There should probably be another variable that acts as a cache for this one, so that the old pointer can be retrieved in this case.

and i getting below error

Uncaught TypeError: Cannot read property 'mask' of undefined

Hello.

Could you add this (http://jhollingworth.github.com/bootstrap-wysihtml5/) to your project?

Thanks and congrats for your work.

$ git clone git://github.com/jasny/bootstrap.git
Cloning into 'bootstrap'...
remote: Counting objects: 27194, done.
remote: Compressing objects: 100% (9689/9689), done.
remote: Total 27194 (delta 19032), reused 25184 (delta 17319)
Receiving objects: 100% (27194/27194), 17.61 MiB | 595 KiB/s, done.
Resolving deltas: 100% (19032/19032), done.

$ cd bootstrap/
$ make

Building Bootstrap...

Running JSHint on javascript... ✔ Done
Compiling LESS with Recess... ✔ Done
Compiling documentation... ✔ Done
Binary
Error parsing arguments in: docs/assets/js/bootstrap.js
make: *** [build] Error 1

When i call the fileupload plugin nothing change. The element is not altered and there isn't new elements.

The plugin only works if i use the complete html.

Hey,

It works on FF and Chrome but it's broken on Safari 5 and IE 8...

File upload:
It would be good to add optional feature of opening file dialog with double/single click on file input. And ability to remove "Select file"/"change" button.

This can cause confusion (twbs/bootstrap#6301).

It should link to https://github.com/jasny/bootstrap/issues/ instead.

Helllo.

Could you add this - http://www.eyecon.ro/bootstrap-datepicker/?

Looks like Remove button functionality requires $.browser support, which was dropped in jQuery 1.9.0, that is why javascript error $.browser is not supported is thrown.
Here it is written, that it is removed from 1.9.0
http://api.jquery.com/jQuery.browser/

line 103 in fileupload.js

    //ie8+ doesn't support changing the value of input with type=file so clone instead
      if($.browser.msie){

jQuery is offering to replace $.browser with $.support, but at least here there's nothing about file upload value change support.

This may not a bug, but you may help me with it a little bit.

I am using the example code of file upload and after uploading a file, I couldn't see the file icon and the file name in the uneditable-input area.

Any suggestions?

It looks like when you click on the File Input button then in Google Chrome 24.0.1312.52 the Select file dialog comes from the top left to the middle somewhat of jerking.

I am trying to combine using the DataTables jQuery plugin with the jasny rowlink extension to Boostrap. The fastest way is to, after the table is drawn, use the rowlink method:

$('#tableid').rowlink();

It works well for the first page. However, when you page to the next set of rows, rowlink no longer works. I was able to work around it by using an callback DataTables provides on every redraw of a table:

DataTableData.fnDrawCallback = function(oSettings){
    // these next two do rowlink stuff...
    $('#example').removeData('rowlink');
    $('#example').rowlink();
    };

But I recognize it is a kludge that is trusting that the rowlink functionality will continue to execute the if clause this code:

$.fn.rowlink = function (options) {
    return this.each(function () {
    var $this = $(this)
    , data = $this.data('rowlink')
    if (!data) $this.data('rowlink', (data = new Rowlink(this, options)))
    })
}

Perhaps an option can be added to rowlink() to tell it to ignore if the previous data exists or not (overwriting it)?

I imagine a lot of people would like to use this with dynamically produced tables...even DataTables specifically...and they may run into the same issue. I know there may be a better solution than what I have suggested.

Using the engine in http://code.google.com/p/minify/, if you try to compress the Javascript in bootstrap.js you'll get "Uncaught SyntaxError: Unexpected token !" in 3 places. This is because the syntax

[...]}(window.jQuery)!function[...]

will fail to parse. Simple solution, add semicolons before the "!". Patch is at http://blog.echothis.com/wp-content/uploads/2012/12/0001-Patch-bootstrap.js-so-it-doesn-t-break-when-minified.patch_.txt

I am developing a project using Bootstrap in which I use file upload, all very well, but I have seen using IE10 not working properly, to load a file you have to double click.

The File Uploader doesn't seem to work inside of a bootstrap modal.

When multiple files are selected in the custom file chooser, only the first file is displayed as opposed to having all files comma separated in the native file chooser

Browser: IE9
OS: Windows 7

1. Pick a File (Selected File Name in input text)
2. Remove (get removed)

so far so good

3. Pick file again

Expected:

New file should be in input text

Actual

Nothing happens

hey man, I was just checking out some of the extensions you added, and saw the scrollspy not updating correctly on the javascript page -- http://jasny.github.com/bootstrap/javascript.html#carousel you got the carousel, row links, and then typeahead, but in the nav list you have carousel, typeahead, and rowlinks, so the active state jumps around.. not really a big, but something you might want to fix

When multiple files are selected in the custom file chooser, only the first file is displayed as opposed to having all files comma separated in the native file chooser

Is the Fileupload not working in Safari?

Docs should be updated with a valid iconic example.

Namely: https://github.com/tors/jquery-fileupload-rails

Given that this plugin is specifically for creating file inputs, what about calling it FileInput instead?

Bonus: it has more semantic meaning. I spent a while searching for keywords like "JQuery File Input" rather than "File upload" and it took me a long time to find your project.