Mise à jour du FileUploadType et de ses templates pour utiliser l'extension Twig.

Form/Type/FileUploadType.php

@@ -37,27 +37,21 @@ class FileUploadType extends AbstractType
      */
     private $fileManager;
 
-    /**
-     * @var string
-     */
-    private $csrfToken;
-
     /**
      * @var int
      */
-    private $maxChunkSize;
+    private $defaultMaxChunkSize;
 
     /**
      *
      * @param Router $router
      * @param FileManagerInterface $fileManager
      */
-    public function __construct(Router $router, FileManagerInterface $fileManager, CsrfProviderInterface $csrfProvider, $maxChunkSize)
+    public function __construct(Router $router, FileManagerInterface $fileManager, $defaultMaxChunkSize)
     {
         $this->router = $router;
         $this->fileManager = $fileManager;
-        $this->csrfToken = $csrfProvider->generateCsrfToken(UploadController::CSRF_INTENTION);
-        $this->maxChunkSize = $maxChunkSize;
+        $this->defaultMaxChunkSize = $defaultMaxChunkSize;
     }
 
     public function buildForm(FormBuilderInterface $builder, array $options)
@@ -77,7 +71,6 @@ class FileUploadType extends AbstractType
         $this->buildWidgetView($view, $form, $options);
 
         $view->vars['widget_attr']['data-create-url'] = $this->router->generate('file_upload_create');
-        $view->vars['csrf_token'] = $this->csrfToken;
         $view->vars['multiple'] = $options['multiple'];
         if($options['max_chunk_size'] > 0) {
             $view->vars['widget_attr']['data-max-chunk-size'] = $options['max_chunk_size'];
@@ -88,7 +81,7 @@ class FileUploadType extends AbstractType
     {
         $this->setWidgetDefaultOptions($resolver);
 
-        $resolver->setDefaults(['max_chunk_size' => $this->maxChunkSize ?: 0]);
+        $resolver->setDefaults(['max_chunk_size' => $this->defaultMaxChunkSize ?: 0]);
         $resolver->setAllowedTypes(['max_chunk_size' => 'int']);
 
         $resolver->setNormalizers(['constraints' => function(OptionsResolver $options, $constraints) {

Resources/config/services.yml

@@ -39,7 +39,6 @@ services:
         arguments:
             - @router
             - @irstea_file_upload.file_manager
-            - @form.csrf_provider
             - %irstea_file_upload.max_chunk_size%
         tags:
             - { name: form.type, alias: file_upload }

Resources/js/widget/file_upload.js

@@ -4,18 +4,15 @@
  */
 (function($) {
 
-    var formatFileSize = function(size, precision) {
-            if(typeof(precision) === "undefined") {
-                precision = 2;
-            }
+    var formatFileSize = function(size) {
             if(size > 1000000000) {
-                return (size/1000000000).toFixed(precision) + ' Gio';
+                return (size/1000000000).toFixed(2) + ' Gio';
             }
             if(size > 1000000) {
-                return (size/1000000).toFixed(precision) + ' Mio';
+                return (size/1000000).toFixed(2) + ' Mio';
             }
             if(size > 1000) {
-                return (size/1000).toFixed(precision)+ ' Kio';
+                return (size/1000).toFixed(2)+ ' Kio';
             }
             return size + ' o';
         },
@@ -73,10 +70,6 @@
                 $button.toggle(options.multiple || !hasEntry);
             };
 
-        $this.find('.size').each(function() {
-            $(this).text(formatFileSize($(this).text(), $(this).data('size-precision')));
-        });
-
         updateDisplay();
 
         // Activation
@@ -95,12 +88,13 @@
                     var rows = $();
                     $.each(data.files, function (index, file) {
                         var row = $(uploadPrototype);
+                        rows = rows.add(row);
                         row.find('.name').text(file.name);
-                        row.find('.size').text(formatFileSize(file.size));
                         if (file.error) {
                             showError(row, file.error);
+                            return;
                         }
-                        rows = rows.add(row);
+                        row.find('.size').text(formatFileSize(file.size));
                     });
                     return rows;
                 },
@@ -108,26 +102,26 @@
                     var rows = $();
                     $.each(data.files, function (index, file) {
                         var row = $(downloadPrototype.replace(/__index__/g, nextIndex++));
-                        row.find('.size').text(formatFileSize(file.size));
+                        rows = rows.add(row);
                         if (file.error) {
                             row.find('.name').text(file.name);
                             showError(row, file.error);
-                        } else {
-                            row.find('.name a')
-                                .text(file.name)
-                                .prop('href', file.url + csrfQuery);
-                            row.find('.delete')
-                                .attr('data-type', file.delete_type)
-                                .attr('data-url', file.delete_url + csrfQuery);
-                            row.find('input.id')
-                                .val(file.id);
-                            if(file.icon && file.icon !== 'file') {
-                                row.find('.icon')
-                                    .removeClass('fa-file-o')
-                                    .addClass('fa-file-'+file.icon+'-o');
-                            }
+                            return;
+                        }
+                        row.find('.size').text(formatFileSize(file.size));
+                        row.find('.name a')
+                            .text(file.name)
+                            .prop('href', file.url + csrfQuery);
+                        row.find('.delete')
+                            .attr('data-type', file.delete_type)
+                            .attr('data-url', file.delete_url + csrfQuery);
+                        row.find('input.id')
+                            .val(file.id);
+                        if(file.icon && file.icon !== 'file') {
+                            row.find('.icon')
+                                .removeClass('fa-file-o')
+                                .addClass('fa-file-'+file.icon+'-o');
                         }
-                        rows = rows.add(row);
                     });
                     return rows;
                 },

Resources/less/file_upload.less

@@ -26,10 +26,6 @@ All rights reserved.
     .error {
         display: none;
     }
-    .size {
-        &:before { content: '('; }
-        &:after  { content: ')'; }
-    }
     &.alert {
         padding: @padding-xs-vertical @padding-xs-horizontal;
         margin-bottom: 0;

Resources/views/Form/file_upload.html.twig

@@ -18,10 +18,7 @@
     {%- set file = file|default([]) %}
     <div class="template-download fileinput-entry">
         <input class="id" type="hidden" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[id]" value="{{ file.id|default }}"/>
-        <i class="fa fa-file{% if file.icon|default(false) %}-{{ file.icon }}{% endif %}-o icon"></i>&nbsp;<span class="name">
-            <a{% if file %} href="{{ path('file_upload_get_content', {id: file.id, token: csrf_token}) }}"{% endif %}>{{ file.name|default }}</a>
-        </span>
-        <span class="size">{{ file.size|default }}</span>
+        {{ irstea_uploaded_file(file) }}
         <input class="form-control description" type="text" placeholder="{% trans %}form.file_upload.description.placeholder{% endtrans %}" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[description]" value="{{ file.description|default }}"/>
         <span class="error"></span>
         <a href="#" class="danger delete {%- if disabled or read_only %} disabled{% endif -%}" title="{% trans %}button.delete{% endtrans %}">
@@ -34,7 +31,7 @@
     <div id="{{ id }}" class="form-control fileinput-{{ multiple ? "multiple" : "single" }}" {{ block('widget_container_attributes') }} {{ block('widget_only_attributes') }}
          data-download-prototype="{{ block('file_upload_entry_prototype')|e }}"
          data-upload-prototype="{{ block('file_upload_progress_prototype')|e }}"
-         data-csrf-token="{{ csrf_token }}"
+         data-csrf-token="{{ csrf_token(constant('Irstea\\FileUploadBundle\\Controller\\UploadController::CSRF_INTENTION')) }}"
          {% if disabled %}data-disabled="disabled"{% endif -%}
          {% if read_only %}data-readonly="readonly"{% endif -%}
          >
@@ -61,10 +58,10 @@
             &nbsp;<small>{% trans with {"%num%": widget_attr["data-max-number-of-files"]}%}form.file_upload.max_number_of_files(%num%){% endtrans %}.</small>
         {% endif %}
         {% if widget_attr["data-min-file-size"] is defined %}
-            &nbsp;<small>{% trans %}form.file_upload.min_file_size{% endtrans %}&nbsp;: <span class="size" data-size-precision="0">{{ widget_attr["data-min-file-size"] }}</span></small>
+            &nbsp;<small>{% trans %}form.file_upload.min_file_size{% endtrans %}&nbsp;: {{ widget_attr["data-min-file-size"]|irstea_file_size(0) }}</small>
         {% endif %}
         {% if widget_attr["data-max-file-size"] is defined %}
-            &nbsp;<small>{% trans %}form.file_upload.max_file_size{% endtrans %}&nbsp;: <span class="size" data-size-precision="0">{{ widget_attr["data-max-file-size"] }}</span></small>
+            &nbsp;<small>{% trans %}form.file_upload.max_file_size{% endtrans %}&nbsp;: {{ widget_attr["data-max-file-size"]|irstea_file_size(0) }}</small>
         {% endif %}
     </div>
 {% endblock file_upload_widget %}

Twig/FileUploadExtension.php

@@ -100,29 +100,28 @@ class FileUploadExtension extends Twig_Extension
 
         if($size > 1000000000) {
             $size /= 1000000000.0;
+            $defaultPrecision = 2;
             $unit = 'Gi';
         } elseif($size > 1000000) {
             $size /= 1000000.0;
+            $defaultPrecision = 1;
             $unit = 'Mi';
         } elseif($size > 1000) {
             $size /= 1000.0;
+            $defaultPrecision = 1;
             $unit = 'Ki';
         } else {
             $unit = '';
-        }
+            $defaultPrecision = 0;
+    }
 
         if(null === $locale) {
             $locale = $context['app']->getRequest()->getLocale();
         }
 
         $formatter = NumberFormatter::create($locale, NumberFormatter::DECIMAL);
-        if(null !== $precision) {
-            $formatter->setAttribute(NumberFormatter::MIN_FRACTION_DIGITS, $precision);
-            $formatter->setAttribute(NumberFormatter::MAX_FRACTION_DIGITS, $precision);
-        } else {
-            $formatter->setAttribute(NumberFormatter::MIN_FRACTION_DIGITS, 0);
-            $formatter->setAttribute(NumberFormatter::MAX_FRACTION_DIGITS, 2);
-        }
+        $formatter->setAttribute(NumberFormatter::MIN_FRACTION_DIGITS, null !== $precision ? $precision : 0);
+        $formatter->setAttribute(NumberFormatter::MAX_FRACTION_DIGITS, null !== $precision ? $precision : $defaultPrecision);
 
         return $this->translator->trans(
             'file_upload.file_size(%size%,%unit%)',