Merge pull request #15 from delirehberi/master

Progressbar support
jbouzekri · Jun 27, 2016 · 50197b5 · 50197b5
2 parents 2a83dc9 + 8a1f2a8
commit 50197b5
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 39 deletions.
diff --git a/Form/Type/FileAjaxType.php b/Form/Type/FileAjaxType.php
@@ -25,7 +25,7 @@ class FileAjaxType extends AbstractType
      * @var FileHistoryManagerInterface
      */
     protected $fileHistoryManager;
-
+    
     /**
      * Constructor
      *
@@ -35,30 +35,32 @@ public function __construct(FileHistoryManagerInterface $fileHistoryManager)
     {
         $this->fileHistoryManager = $fileHistoryManager;
     }
-
+    
     /**
      * {@inheritDoc}
      */
     public function setDefaultOptions(OptionsResolverInterface $resolver)
     {
         // Endpoint mandatory for fileupload bundle
         $resolver->setRequired(array('endpoint'));
-
+        
         $resolver->setOptional(array(
             'download_link',
             'remove_link',
             'loading_file',
-            'resolver_key'
+            'resolver_key',
+            'progress'
         ));
-
+        
         $resolver->setDefaults(array(
             'download_link' => true,
             'remove_link' => true,
             'loading_file' => 'bundles/jbfileuploader/img/ajax-loader-small.gif',
-            'resolver_key' => 'upload_resolver'
+            'resolver_key' => 'upload_resolver',
+            'progress'=>false
         ));
     }
-
+    
     /**
      * {@inheritDoc}
      */
@@ -70,31 +72,32 @@ public function buildView(FormView $view, FormInterface $form, array $options)
             $fileHistory = $this->fileHistoryManager->findOneByFileName($form->getData());
             $fileHistoryUrl = $this->fileHistoryManager->getUrl($fileHistory, $options['resolver_key']);
         }
-
+        
         $className = 'jb_result_filename';
         if (isset($view->vars['attr']['class'])) {
             $view->vars['attr']['class'] .= ' ' . $className;
         } else {
             $view->vars['attr']['class'] = $className;
         }
-
+        
         $view->vars['file_history'] = $fileHistory;
         $view->vars['file_history_url'] = $fileHistoryUrl;
         $view->vars['endpoint'] = $options['endpoint'];
         $view->vars['download_link'] = $options['download_link'];
         $view->vars['remove_link'] = $options['remove_link'];
         $view->vars['loading_file'] = $options['loading_file'];
+        $view->vars['progress'] = $options['progress'];
         $view->vars['use_crop'] = false;
     }
-
+    
     /**
      * {@inheritDoc}
      */
     public function getParent()
     {
         return 'text';
     }
-
+    
     /**
      * {@inheritDoc}
      */

diff --git a/Resources/doc/file_upload/simple.md b/Resources/doc/file_upload/simple.md
@@ -14,4 +14,5 @@ The available options are :
 * endpoint (_mandatory_) : a oneup fileupload mapping name
 * download_link (_boolean_) : show the download link when the upload was successful
 * remove_link (_boolean_) : show a remove link allowing to empty the field
+* progress (_boolean_) : show a progress bar
 
diff --git a/Resources/public/css/jbfileupload.css b/Resources/public/css/jbfileupload.css
@@ -8,4 +8,17 @@
 
 .fileinput-button:hover a {
     text-decoration: underline;
+}
+
+.jb_progressbar {
+    width: 100%;
+    height: 15px;
+    border: 1px solid #111;
+    margin-top: 3px;
+}
+
+.jb_bar {
+    width: 0;
+    background-color: #111;
+    height: 15px;
 }
diff --git a/Resources/public/js/jbfileupload.js b/Resources/public/js/jbfileupload.js
@@ -18,15 +18,16 @@
                 $cropFilename = $parentTag.find('.jb_crop_filename'),
                 $previewTag = $parentTag.find('.jb_result_preview'),
                 $loadingTag = $parentTag.find('.jb_loading'),
+                $progressBar = $parentTag.find('.jb_progressbar'),
                 naturalWidth, naturalHeight, currentWidth, currentHeight;
 
             /**
-            * Translate message
-            *
-            * @param {string} msg
-            *
-            * @returns {string}
-            */
+             * Translate message
+             *
+             * @param {string} msg
+             *
+             * @returns {string}
+             */
             function translateMessage(msg) {
                 if (typeof Translator !== "undefined") {
                     return Translator.trans(msg);
@@ -35,11 +36,11 @@
                 return msg;
             }
 
-           /**
-            * Toggle the upload field and crop tool
-            *
-            * @returns {undefined}
-            */
+            /**
+             * Toggle the upload field and crop tool
+             *
+             * @returns {undefined}
+             */
             function toggleCropingTool() {
                 $cropUpload.toggle();
                 $cropTool.toggle();
@@ -49,13 +50,13 @@
                 $cropHeight.val('');
             }
 
-           /**
-            * Load the crop tool
-            *
-            * @param {object} result
-            *
-            * @returns {undefined}
-            */
+            /**
+             * Load the crop tool
+             *
+             * @param {object} result
+             *
+             * @returns {undefined}
+             */
             function loadCropingTool(result) {
                 // Display the crop tool
                 toggleCropingTool();
@@ -163,6 +164,7 @@
              */
             function loadingToggle(e) {
                 $loadingTag.toggle();
+                $progressBar.toggle();
                 $previewTag.toggle();
             }
 
@@ -172,7 +174,14 @@
                 dataType: 'json',
                 done: fileUploadDone,
                 error: fileUploadError,
-                start: loadingToggle
+                start: loadingToggle,
+                progressall: function (e, data) {
+                    var progress = parseInt(data.loaded / data.total * 100, 10);
+                    $progressBar.find('.jb_bar').css(
+                        'width',
+                        progress + '%'
+                    );
+                }
             }, options );
 
             // Bind all events

diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig
@@ -15,11 +15,11 @@ All classes starting with jb_ are part of the markup. They are used in the js co
     <span class="fileinput-button">
         <span><a href="#importFile">{{ 'Import a file'|trans({}, translation_domain) }}</a></span>
         <input
-            class="jb_fileupload"
-            type="file"
-            name="{{ id }}_file"
-            data-url="{{ oneup_uploader_endpoint(endpoint) }}"
-            data-use-crop="{{ use_crop ? "true" : "false" }}" />
+                class="jb_fileupload"
+                type="file"
+                name="{{ id }}_file"
+                data-url="{{ oneup_uploader_endpoint(endpoint) }}"
+                data-use-crop="{{ use_crop ? "true" : "false" }}" />
     </span>
     {% if remove_link %}
         <span> | </span>
@@ -38,9 +38,15 @@ All classes starting with jb_ are part of the markup. They are used in the js co
         {% endif %}
     {% endif %}
     {% if loading_generated is not defined %}
-        <img class="jb_loading"
-             src="{{ asset(loading_file) }}"
-             style="display: none;" />
+        {% if (progress is not defined) or (progress == false)%}
+            <img class="jb_loading"
+                 src="{{ asset(loading_file) }}"
+                 style="display: none;" />
+        {% else %}
+            <div class="jb_progressbar" style="display:none;">
+                <div class="jb_bar"></div>
+            </div>
+        {% endif %}
     {% endif %}
 {% endblock %}
 
@@ -54,7 +60,7 @@ All classes starting with jb_ are part of the markup. They are used in the js co
          src="{{ previewSrc }}"
          data-default="{{ asset(default_image) }}"
          {% if img_width is defined %}width="{{ img_width }}"{% endif %}
-         {% if img_height is defined %}height="{{ img_height }}"{% endif %} />
+            {% if img_height is defined %}height="{{ img_height }}"{% endif %} />
 
     <img class="jb_loading"
          src="{{ asset(loading_file) }}"