Rectangle 27 32

You dont need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in http://twitter.github.com and finally -Latest version of jquery.js

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images) which u need to upload inside /img/ folder of u r website (or) store it where ever u want but change the folder directory inside the bootstrap.css

For tooltip u need the following script inside your <head> </head> tag

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Bootstrap tooltips not working - Stack Overflow

twitter-bootstrap
Rectangle 27 32

You dont need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in http://twitter.github.com and finally -Latest version of jquery.js

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images) which u need to upload inside /img/ folder of u r website (or) store it where ever u want but change the folder directory inside the bootstrap.css

For tooltip u need the following script inside your <head> </head> tag

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Bootstrap tooltips not working - Stack Overflow

twitter-bootstrap
Rectangle 27 32

You dont need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in http://twitter.github.com and finally -Latest version of jquery.js

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images) which u need to upload inside /img/ folder of u r website (or) store it where ever u want but change the folder directory inside the bootstrap.css

For tooltip u need the following script inside your <head> </head> tag

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Bootstrap tooltips not working - Stack Overflow

twitter-bootstrap
Rectangle 27 9

Finally, after extensive trials and errors and searching for relevant code solutions, I got it working exactly the way I wanted ! I posted my query on the plugin's github issue page and got the help from there.

Below is the code sample that really worked :

1.First you have to bind the fileuploadadd event:

2.Then you have to bind the cancel event that will be called when clicking the "Cancel Upload" button, which will cancel all the file currently being uploaded :

$('#fileupload').bind('fileuploadfail', function(e, data){
    if (data.errorThrown === 'abort')
    {
        //PUT HERE SOME FEEDBACK FOR THE USER
    }
});

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - Add cancel upload or abort functionality to bootstrap multipl...

jquery twitter-bootstrap file-upload bootstrap-file-upload multiple-file-upload
Rectangle 27 21

I have been working on this as well and finally stumbled across the answer on the bootstrap page.

The key is setting the clickable: option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview', and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.

One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.

Thanks just adding clickable:'#dropzonePreview' worked like magic.However i think adding dz-message class to the preview div would make it invisible(display:none) so i removed that class. My div looks like this now <div id = "dropzonePreview" class="dropzone-previews dz-default"></div>

Just FYI to anyone else reading this, this solution only seems to work if clickable is provided an ID. If you try and set it using a class, it won't work

^ thats a bug with your specific configuration. adding classes as 'clickable' works fine.

I have the same problem with classes, can only add elements as clickable if they have an ID.

@ChaosTheory - how can I integrate dropzone in bootstrap markdown editor ?

javascript - How to make only the Dropzone.js Previews Div clickable a...

javascript jquery forms file-upload dropzone.js
Rectangle 27 21

I have been working on this as well and finally stumbled across the answer on the bootstrap page.

The key is setting the clickable: option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview', and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.

One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.

Thanks just adding clickable:'#dropzonePreview' worked like magic.However i think adding dz-message class to the preview div would make it invisible(display:none) so i removed that class. My div looks like this now <div id = "dropzonePreview" class="dropzone-previews dz-default"></div>

Just FYI to anyone else reading this, this solution only seems to work if clickable is provided an ID. If you try and set it using a class, it won't work

^ thats a bug with your specific configuration. adding classes as 'clickable' works fine.

I have the same problem with classes, can only add elements as clickable if they have an ID.

@ChaosTheory - how can I integrate dropzone in bootstrap markdown editor ?

javascript - How to make only the Dropzone.js Previews Div clickable a...

javascript jquery forms file-upload dropzone.js
Rectangle 27 86

It's included in Jasny's fork of bootstrap.

A simple upload button can be created using

<span class="btn btn-file">Upload<input type="file" /></span>

Does this work ok in IE9? I'm asking because I assume the solution makes use of Javascript, and, at the same time, "the IE doesnt allow manipulation of the type=file input element from javascript due to security reasons."

Yes it works in IE9 as well. It sets the opacity of the input element to 0, which luckily works in all browsers :). It's explained in the quirksmode article.

it does not work with jQuery 1.9.0, because they dropped $.browser support

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 86

It's included in Jasny's fork of bootstrap.

A simple upload button can be created using

<span class="btn btn-file">Upload<input type="file" /></span>

Does this work ok in IE9? I'm asking because I assume the solution makes use of Javascript, and, at the same time, "the IE doesnt allow manipulation of the type=file input element from javascript due to security reasons."

Yes it works in IE9 as well. It sets the opacity of the input element to 0, which luckily works in all browsers :). It's explained in the quirksmode article.

it does not work with jQuery 1.9.0, because they dropped $.browser support

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 121

With no additional plugin required, this bootstrap solution works great for me:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

I had some issues with the bottom area of the button not clickable. This answer helped me in bootstrap 3: stackoverflow.com/a/18164555/44336

This is an excellent solution as it shows the file name of the attached file!

Could someone please explain the need for the href='javascript:;' ? I don't need the onchange='$("#upload-file-info").html($(this).val());' to update the upload-file-info element, but the file upload dialog won't trigger without the href.

Where is 'C:\fakepath' coming from and how do I get rid of it?

@Ya. C:\fakepath is html5 security feature and is prefixed to file path if we manipulate it with javascript. See this blog post davidwalsh.name/fakepath for details.

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 120

With no additional plugin required, this bootstrap solution works great for me:

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

I had some issues with the bottom area of the button not clickable. This answer helped me in bootstrap 3: stackoverflow.com/a/18164555/44336

This is an excellent solution as it shows the file name of the attached file!

Could someone please explain the need for the href='javascript:;' ? I don't need the onchange='$("#upload-file-info").html($(this).val());' to update the upload-file-info element, but the file upload dialog won't trigger without the href.

Where is 'C:\fakepath' coming from and how do I get rid of it?

@Ya. C:\fakepath is html5 security feature and is prefixed to file path if we manipulate it with javascript. See this blog post davidwalsh.name/fakepath for details.

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 1

I had a similar problem with the progress bar. I'm using twitter-bootstrap and jQuery in my solution as well. This solution with the progress bar works fine for me (see element with id total-progress).

<!-- Upload preview template begin -->
<div id="preview-template" style="display: none;">
    <div class="dz-preview dz-file-preview" style="display:inline-block;margin:10px;">
        <div class="dz-details">
            <div class="dz-filename label label-primary">
                <span data-dz-name></span>
            </div>
            <br style="line-height:2px;" />
            <div class="dz-error-message label label-danger" style="display:none;clear:both;">
                <span data-dz-errormessage></span>
            </div>
            <br style="line-height:2px;" />
            <!--<div class="dz-size" data-dz-size></div>-->
            <img data-dz-thumbnail style="border-radius:5px;clear:both;" />
        </div>
        <!--<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>-->
        <!-- <div class="dz-success-mark"><span>?</span></div> -->
        <!-- <div class="dz-error-mark"><span>?</span></div> -->
        <div data-dz-remove class="btn btn-default removePicFromAlbum" title="Entfernen"><span class="glyphicon glyphicon-remove center-block" aria-hidden="true"></span></div>
        <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:100px;">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
        <!--<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />-->
    </div>
</div>
<!-- Upload preview template end -->
Dropzone.autoDiscover = false;
var {{$name or 'upload'}} = new Dropzone("div#{{$name or 'upload'}}", {
    url: "{{ action("$controllerClass@store") }}"
    , method: "post"
    , paramName: "file" // The name that will be used to transfer the file
    , maxFilesize: {{$maxFilesize or str_replace('M','',ini_get('upload_max_filesize')) }} // MB
    , uploadMultiple: false
    , dictDefaultMessage: "{{$text or 'Ziehen Sie Dateien in diesen Bereich, um diese hochzuladen'}}"
    , previewTemplate: document.getElementById('preview-template').innerHTML
    //, acceptedFiles:'image/*'
    , previewsContainer: '#logoPreview'
    , thumbnailWidth: {{$thumbnailWidth or 100}}
    , thumbnailHeight: {{$thumbnailHeight or 100}}
    , sending: function (file, xhr, formData) {
        formData.append('_token', '{!!csrf_token() !!}');
    }
    , success: function(file, responseText) {
        if(responseText != undefined) {
            if (responseText.success != undefined && responseText.success == "false") {
                $(file.previewElement).find('.dz-error-message').text("Fehler: " + responseText.errorMessage);
                $(file.previewElement).find('.dz-error-message').css('display','inline-block');
            }
            else {
                $(file.previewElement).find('.dz-error-message').css('display','none');
            }
        }
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , error: function(file, message, xhr) {
        var header = "Error " + xhr.status + ": " + xhr.statusText;
        $(file.previewElement).find('.dz-error-message').text(header);
        $(file.previewElement).find('.dz-error-message').css('display','inline-block');
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , uploadProgress: function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    }
    , completed: function(progress) {
        $(file.previewElement).find('#total-progress').css('display','none');
    }
    , removedfile: function(file) {
        removeFile(file.name);
        $(file.previewElement).remove();
    }

    });

dropzone.js - Progress bar not working when autoProcessQueue is false ...

dropzone.js
Rectangle 27 3

I see that the Github Issue says this isn't currently supported, but it seems relatively uncomplicated to fork this project and bend it to your needs. All the fnError ='s you'll find in a Cmd + F search inside fileinput.js are where you need to look.

fnError = function (jqXHR, textStatus, errorThrown) {
    if (!myError.equals(textStatus)) { // A service-like impl. injection would be sexier
        var outData = self._getOutData(jqXHR), errMsg = self._parseError(jqXHR, errorThrown);
        self._showUploadError(errMsg, outData, 'filebatchuploaderror');
        self.uploadFileCount = total - 1;
        if (!self.showPreview) {
            return;
        }
        self._getThumbs().each(function () {
            var $thumb = $(this), key = $thumb.attr('data-fileindex');
            $thumb.removeClass('file-uploading');
            if (self.filestack[key] !== undefined) {
                self._setPreviewError($thumb);
            }
        });
        self._getThumbs().removeClass('file-uploading');
        self._getThumbs(' .kv-file-upload').removeAttr('disabled');
        self._getThumbs(' .kv-file-delete').removeAttr('disabled');
    } else {
        self._ajaxSubmit(fnBefore, fnSuccess, fnComplete, function() {
            // TODO: Second time failure - handle recursively or differently? :-)
        );
    }
};

I solved it a bit quick'n'dirtier (see my answer below), but this approach also fits the needs, thank you very much!

ajax - Bootstrap Fileinput does not send file again on second upload -...

ajax twitter-bootstrap file-upload asyncfileupload bootstrap-file-upload
Rectangle 27 2

I finally found out the exact point, where the problem could be solved:

On line 1705 in the function updateUploadLog, the function self.updateStack is called. This call simply clears the file stack and causes a later process to empty the form input. Simply commenting out this line does the trick, but only if you reload after success, because somehow fnSuccess is also called when an error is found.

@Angad thank you very much for your solution triggering input, thanks to that I found a place to start the search again ;)

+1 I still cannot get over the fact that my line marker moved near to a second approach - it is things like this that make computer programming unendingly fun

ajax - Bootstrap Fileinput does not send file again on second upload -...

ajax twitter-bootstrap file-upload asyncfileupload bootstrap-file-upload
Rectangle 27 1

I modified @claviska answer and works as i like (Bootstrap 3, 4 not tested):

<label class="btn btn-default">
    <span>Browse</span>
    <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 1

I modified @claviska answer and works as i like (Bootstrap 3, 4 not tested):

<label class="btn btn-default">
    <span>Browse</span>
    <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')">
</label>

css - Twitter Bootstrap Form File Element upload button - Stack Overfl...

css forms twitter-bootstrap input-type-file
Rectangle 27 0

It's working correctly. It fix my problem. I've been searching for the correct solution for almost 3 days because I'm a newbie in bootstrap. By the it will not work when you are running your project locally/localhost. What I did it I uploaded it in a free hosting site like this - - > www.freehostingnoads.net. If you want to see my sample work. visit ariz.t15.org using Internet Explorer. Try also to make the browser smaller. It will automatically switch to mobile view... By the way Thanks to Nicol Monili... Thanks you for your big help

internet explorer 8 - bootstrap 3 on ie8, ignores media query - Stack ...

internet-explorer-8 media-queries bootstrap
Rectangle 27 0

I tried Milind's way but that didn't change anything. Turns out that a bootstrap addon, Bootstrap-filestyle, was messing up the upload. After removing it, everything worked as it should (but my upload buttons don't look so sexy now).

if you need sexy button and file upload widget - take a look at uploadcare.com

Rails, jQuery fileupload and multiple forms on page - Stack Overflow

jquery ruby-on-rails file-upload
Rectangle 27 0

It's included in Jasny's fork of bootstrap.

A simple upload button can be created using

<span class="btn btn-file">Upload<input type="file" /></span>

Does this work ok in IE9? I'm asking because I assume the solution makes use of Javascript, and, at the same time, "the IE doesnt allow manipulation of the type=file input element from javascript due to security reasons."

Yes it works in IE9 as well. It sets the opacity of the input element to 0, which luckily works in all browsers :). It's explained in the quirksmode article.

it does not work with jQuery 1.9.0, because they dropped $.browser support

Doesn't work with bootstrap 3. Tried modifying as per the changes in bootstrap 3 (e.g. span-* to col-md-*), but doesn't seem to work with that too.

Twitter Bootstrap Form File Element upload button - Stack Overflow

forms twitter-bootstrap
Rectangle 27 0

Check all your fonts are present and upload well in your font dir, see also: Bootstrap 3.0 and Font Awesome, .eot,.woff,.ttf,.svg. If one is broken or missing it will not work on some browsers:

css/bootstrap.css
fonts/glyphicons-halflings-regular.eot  
fonts/glyphicons-halflings-regular.svg  
fonts/glyphicons-halflings-regular.ttf  
fonts/glyphicons-halflings-regular.woff

I checked links and it works for other persons. What I don t understand is that website getbootstrap.com doesn t work on ffirefox to (seen screenshot)

The screen shot indicates that their Firefox settings are over-riding fonts in general. support.mozilla.org/en-US/kb/

@BassJobsen Thanks for the link. It's the solution !

Glyphicons from bootstrap 3 not rendering on Firefox - Stack Overflow

twitter-bootstrap firefox twitter-bootstrap-3
Rectangle 27 0

All of this code has been tested and works. I just whipped it up, so it's pretty basic but should point you in the right direction. You'll need to sanitize inputs, do the correct messaging, etc.

Just create a file (index.html) and copy/paste the HTML and JavaScript into it. Then create a file post.php and put the PHP in it. Download the class.upload.php script and then create a directory named uploads. Give it the appropriate permissions (0755 or 0777). Keep everything in the same folder for this example. You should be good to go.

<div>
alert()

Here's the HTML and jQuery (index.html)

<!DOCTYPE html>
    <html>
    <head>
        <title>Upload a Photo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="form" enctype="multipart/form-data" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Upload Photo</h4>
                            </div>
                            <div class="modal-body">
                                <div id="messages"></div>
                                <input type="file" name="file" id="file">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script>
            $('#form').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : 'post.php',
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,

                    success: function(response) {
                        if(response != 'error') {
                            //$('#messages').addClass('alert alert-success').text(response);
                            // OP requested to close the modal
                            $('#myModal').modal('hide');
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response);
                        }
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

And your PHP script (post.php)

class.upload.php
<?php

    require_once 'class.upload.php';

    $handle = new Upload($_FILES['file']);
    $handle->allowed = 'image/*';

    if($handle->uploaded) {
        $handle->Process('uploads');
        if($handle->processed) {
            echo 'Image uploaded';
        } else {
            echo 'error';
        }
    }

First of all thanks for the help you provided. Can you please help me in another issue? I want to close the modal dialog upon successful upload of a image file. Can you please add this to your code?

Sure thing. I commented out the message and added the code to automatically close the modal.

Is it possible to upload image to the server using Bootstrap's Modal d...

php jquery ajax twitter-bootstrap-3 image-uploading