Merge pull request #5 from we-bridge/add_cancel_button

Add a cancel button when uploading

Author: thomas-barthelemy

Form/LargeFileType.php

@@ -33,9 +33,11 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
         $resolver->setRequired(array('mimeTypesMessage'));
         $resolver->setRequired(array('maxSizeMessage'));
         $resolver->setOptional(array('previewContainerId'));
+        $resolver->setOptional(array('cancelMessage'));
 
         $resolver->setDefaults(array(
-            'previewContainerId' =>''
+            'previewContainerId' => '',
+            'cancelMessage' => 'Cancel'
         ));
     }
 
@@ -85,6 +87,7 @@ public function buildView(FormView $view, FormInterface $form, array $options)
         $view->vars['mimeTypesMessage'] = $options['mimeTypesMessage'];
         $view->vars['maxSizeMessage'] = $options['maxSizeMessage'];
         $view->vars['previewContainerId'] = $options['previewContainerId'];
+        $view->vars['cancelMessage'] = $options['cancelMessage'];
     }
 
     public function getName()

Resources/public/js/largefile.js

@@ -14,6 +14,9 @@ var LargeFile = (function() {
             var progress = parseInt(data.loaded / data.total * 100, 10);
             uploadProgress(this, progress);
         },
+        add: function (e, data) {
+            showCancel(this, data.submit());
+        },
         error: function(e, data) {
             var inputField = document.getElementById(this.fileInput[0].id);
             uploadFinished(inputField, false);
@@ -75,6 +78,7 @@ var LargeFile = (function() {
             );
             progressBar.html('');
         }
+        hideCancel(inputField);
     };
 
     var displayError = function(inputField, error) {
@@ -126,6 +130,32 @@ var LargeFile = (function() {
         }
     };
 
+    var showCancel = function(inputField, uploader) {
+        
+        $('#' + inputField.getAttribute('data-largefile-field') + '-upload').
+            addClass('hidden');
+
+        var cancelButton = 
+            $('#' + inputField.getAttribute('data-largefile-field') + '-cancel');
+
+        cancelButton.removeClass('hidden');
+
+        cancelButton.click(function() { 
+            uploader.abort();
+        });
+    };
+
+    var hideCancel = function(inputField) {
+        
+        $('#' + inputField.getAttribute('data-largefile-field') + '-cancel').
+            addClass('hidden');
+
+        var uploadButton = 
+            $('#' + inputField.getAttribute('data-largefile-field') + '-upload');
+
+        uploadButton.removeClass('hidden');
+    };
+
     return {
         setup: setup
     };

Resources/views/Form/largefile.html.twig

@@ -10,7 +10,17 @@
 
     {% spaceless %}
 
-    <span class="file-input btn btn-block panel-heading-highlighted btn-file">
+    <span 
+        id="{{ view_id_prefix ~ largefile_field }}-cancel"
+        class="btn btn-block btn-danger largefile-cancel hidden"
+    >
+            {{ cancelMessage }}
+    </span>
+
+    <span 
+        id="{{ view_id_prefix ~ largefile_field }}-upload"
+        class="file-input btn btn-block panel-heading-highlighted btn-file"
+    >
         {{ label }}
 
         {{ form_widget(