Bootstrap Snippet File upload widget using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <h1>File Upload Widget</h1>
    <p>For use with javascript file upload library such as <strong>resumable.js</strong>.<br>
    Change progress display by modifying <strong>linear-gradient</strong> in background properties.</p>
    <br>
    
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label class="form-label">File Upload</label>
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-browse">Browse</button>
                    </span>
                    <input type="text" value="" class="form-control file-upload">
    
                    <span class="input-group-btn">
                        <button onclick="r.upload(); return(false);" class="btn btn-default btn-upload" disabled>
                            <i class="glyphicon glyphicon-upload"></i>
                            Upload
                        </button>
                        <button onclick="r.upload(); return(false);"  class="btn btn-default btn-resume hidden">
                            <i class="glyphicon glyphicon-play"></i>
                        </button>
                        <button onclick="r.pause(); return(false);" class="btn btn-default btn-pause hidden">
                            <i class="glyphicon glyphicon-pause"></i>
                        </button>
                        <button onclick="r.cancel(); return(false);" class="btn btn-danger btn-cancel hidden">
                            <i class="glyphicon glyphicon glyphicon-remove"></i>
                        </button>
                    </span>
                </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
.file-upload-progress {
  background: linear-gradient(90deg, #5cb85c 65%, #f5f5f5 65%);
}
.file-upload-pause {
  background: linear-gradient(90deg, #f0ad4e 75%, #f5f5f5 75%);
}
.file-upload-complete {
  background: linear-gradient(90deg, #5cb85c 100%, #f5f5f5 100%);
}
.file-upload-cancel {
  background: #d9534f;
  color: #fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var r = new Resumable({
            target: '/upload',
            chunkSize: 1*1024*1024, // 1 Mb chunk
            simultaneousUploads: 4,
            testChunks: true,
            throttleProgressCallbacks: 1,
            maxFiles: 1,
            fileType: ['mp4'],
            maxFileSize: 5*1024*1024*1024 // 5 Gb file size limit
      });
      // Resumable.js isn't supported, fall back on a different method
      if(!r.support) {
        $('.resumable-error').show();
      } else {
        // Show a place for dropping/selecting files
        r.assignBrowse($('.btn-browse')[0]);
        var percentage;
        var filename;
        // Handle file add event
        r.on('fileAdded', function(file){
            $('.file-upload').val(file.fileName);
            $('.btn-upload').html('<i class="glyphicon glyphicon-upload"></i> Upload').prop('disabled', false);
            $('.file-upload').css('background', '#f5f5f5').css('color', '#555555');
            filename = file.fileName;
          });
        r.on('pause', function(){
            $('.btn-resume').removeClass('hidden');
            $('.btn-pause').addClass('hidden');
            percentage = Math.floor(r.progress()*100) + '%';
            $('.file-upload').css('background', 'linear-gradient(90deg, #f0ad4e '+percentage+', #f5f5f5 '+percentage+')');
          });
        r.on('complete', function(){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"File upload widget"
Bootstrap 3.3.0 Snippet by dels07

Related: See More

Questions / Comments:

"File upload widget" Bootstrap 3.3.0 Snippet by dels07

Related: See More

Questions / Comments:

"File upload widget"
Bootstrap 3.3.0 Snippet by dels07