Twitter Bootstrap Image Upload with Preview and Progress Bar

Question

How can i use Twitter Bootstrap to upload a single image with preview and progress bar. As currently, Until I save the image, I can not see what any preview or progress bar to u

Answer 1

I tried the accepted answer, but couldn't get it to work.

There's a plugin at http://plugins.krajee.com/file-input. It requires Bootstrap 3 and JQuery 2.1

You can see some demos here and get the source here or here. The source also has other examples of AJAX uploading schemes, drag and drop, etc, in its /examples/ folder. It's much more versatile than the Jensy plugin.

The following code is what I use on my websites. Note that file_path/kartik-v-bootstrap-fileinput-51ddb7c/ is the extracted source code folder on your machine:

  
  
  
  
  
  
  
  



  

  

    
Upload a picture:
      
      

        

          

            

              
            
          
        
      
  
  

You can set data-min-file-count="x" if you want to make sure the use uploads at least x photos. I also personally like to edit source/js/fileinput.js and set the following in previewCache line 454:

defaultPreviewSettings = {
        image: {width: "100%", height: "auto"},
        html: {width: "213px", height: "160px"},
        text: {width: "160px", height: "136px"},
        video: {width: "213px", height: "160px"},
        audio: {width: "213px", height: "80px"},
        flash: {width: "213px", height: "160px"},
        object: {width: "160px", height: "160px"},
        other: {width: "160px", height: "160px"}
    };