Browse Source

Cuter file upload progress

Pitu 7 năm trước cách đây
mục cha
commit
7c8be0341f
2 tập tin đã thay đổi với 5 bổ sung8 xóa
  1. 3 7
      pages/home.html
  2. 2 1
      public/js/upload.js

+ 3 - 7
pages/home.html

@@ -36,17 +36,13 @@
 
                     <div id="uploads">
                         <div id="template" class="columns">
+                            <div class="column is-hidden-mobile"></div>
                             <div class="column">
-                                <p data-dz-size></p>
-                            </div>
-                            <div class="column">
-                                <p data-dz-name></p>
-                            </div>
-                            <div class="column">
-                                <progress class="progress is-danger" value="100" max="100" data-dz-uploadprogress></progress>
+                                <progress class="progress is-small is-danger" value="0" max="100" data-dz-uploadprogress></progress>
                                 <p data-dz-errormessage></p>
                                 <p class="link"></p>
                             </div>
+                            <div class="column is-hidden-mobile"></div>
                         </div>
                     </div>
                     

+ 2 - 1
public/js/upload.js

@@ -109,7 +109,8 @@ upload.prepareDropzone = function(){
 
 	// Update the total progress bar
 	dropzone.on('uploadprogress', function(file, progress) {
-		file.previewElement.querySelector('.progress').style.width = progress + '%';
+		file.previewElement.querySelector('.progress').setAttribute('value', progress);
+		file.previewElement.querySelector('.progress').innerHTML = progress + '%';
 	});
 
 	dropzone.on('success', function(file, response) {