diff --git a/composer.json b/composer.json
index dc3f683f760bd7ce1e2fe36e3bf9b9c161506a60..a72256410e23f23a285fbcb7cd0254ee50032178 100644
--- a/composer.json
+++ b/composer.json
@@ -149,7 +149,6 @@
     ],
     "test:install-assets": [
       "@test:clear",
-      "@test:install-theme-assets",
       "cd tests/Fixtures && npm install && npm run dev #"
     ],
         "test:install-theme-assets": [
diff --git a/package.json b/package.json
index 175c943f19b3c4a8845e2c27b7b1e0b354addfca..1383bd827ead88307233f1e39bc0abc3e25cfbe7 100644
--- a/package.json
+++ b/package.json
@@ -7,17 +7,19 @@
   "peerDependencies": {
     "@symfony/webpack-encore": ">=0.21 <1",
     "node-sass": "*",
-    "sass-loader": "^7.0",
+    "sass-loader": "^8.0",
     "core-js": "^3.0.0"
   },
   "dependencies": {
     "blueimp-canvas-to-blob": "^3.27.0",
     "blueimp-file-upload": "^10.30.1",
-    "blueimp-load-image": "^5.12.0",
+    "blueimp-load-image": "^5.13.0",
     "bootstrap-sass": "^3.4.1",
+    "canvas-to-blob": "^1.0.0",
     "font-awesome": "^4.0",
     "jquery": "^1.10",
     "jquery-ui": "^1.12.1",
-    "popper.js": "1.14.3"
+    "popper.js": "1.14.3",
+    "translate-js": "^1.3.0"
   }
 }
diff --git a/src/DependencyInjection/IrsteaFileUploadExtension.php b/src/DependencyInjection/IrsteaFileUploadExtension.php
index cf671acb3d87921a56fc1d1a89f93b535bdd9277..fe45b6044c276bcfc7a8054ba172b94c48f1511a 100644
--- a/src/DependencyInjection/IrsteaFileUploadExtension.php
+++ b/src/DependencyInjection/IrsteaFileUploadExtension.php
@@ -55,11 +55,11 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt
      */
     public function prepend(ContainerBuilder $container)
     {
-        /* $pluginDir = __DIR__ . '/../../../../blueimp/jquery-file-upload';
-
-         $container->prependExtensionConfig(
-             'assetic',
-             [
+        $pluginDir = __DIR__ . '/../../node_modules/blueimp-file-upload/';
+        echo $pluginDir;
+        $container->prependExtensionConfig(
+            'assetic',
+            [
                  'assets' => [
                      'form_js'  => [
                          'inputs' => [
@@ -68,29 +68,29 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt
                              "$pluginDir/js/jquery.fileupload-validate.js",
                              "$pluginDir/js/jquery.fileupload-ui.js",
                              '@BazingaJsTranslationBundle/Resources/js/translator.js',
-                             'js/translations/file_upload/*.js',
-                             'js/translations/validators/*.js',
-                             '@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js',
+                             //'js/translations/file_upload/*.js',
+                           //'js/translations/validators/*.js',
+                            '@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js',
                          ],
                      ],
                      'form_css' => [
                          'inputs' => [
                              "$pluginDir/css/jquery.fileupload.css",
                              "$pluginDir/css/jquery.fileupload-ui.css",
-                             '@IrsteaFileUploadBundle/Resources/less/file_upload.less',
+                             '@IrsteaFileUploadBundle/Resources/assets/sass/file_upload.scss',
                          ],
                      ],
                  ],
              ]
-         );
+        );
 
-         $container->prependExtensionConfig(
-             'twig',
-             [
+        $container->prependExtensionConfig(
+            'twig',
+            [
                  'form_themes' => [
                      'IrsteaFileUploadBundle:Form:file_upload.html.twig',
                  ],
              ]
-         );*/
+        );
     }
 }
diff --git a/src/Resources/assets/js/file_upload.js b/src/Resources/assets/js/file_upload.js
index 8c0a1b4568f977cd4bdc774f31167e2128b59d81..42c95ab1353c74ae4caa0618a8300b11be5f0b24 100644
--- a/src/Resources/assets/js/file_upload.js
+++ b/src/Resources/assets/js/file_upload.js
@@ -1,3 +1,5 @@
+const Translator = require('translator');
+
 /*
  * Copyright (C) 2015 IRSTEA
  * All rights reserved.
diff --git a/src/Resources/assets/js/main.js b/src/Resources/assets/js/main.js
index 1c169463c085ab3ddcd6aa866b8689e7d13521b2..e2c2f6ba18f521cb51004eccba36361ea801d54c 100644
--- a/src/Resources/assets/js/main.js
+++ b/src/Resources/assets/js/main.js
@@ -1,11 +1,21 @@
 import * as jQuery from 'jquery';
 global.$ = window.$ = jQuery;
-
-import 'jquery-ui';
+import 'bootstrap-sass';
 import './widget/file_upload.js';
+import '../sass/file_upload.scss';
+
+import 'blueimp-file-upload/js/vendor/jquery.ui.widget';
+import 'blueimp-file-upload/js/jquery.iframe-transport';
+
+import 'blueimp-load-image';
+
+import 'blueimp-file-upload/js/jquery.fileupload';
 import 'blueimp-file-upload/js/jquery.fileupload';
-//import 'blueimp-file-upload/js/jquery.fileupload-ui'; //bloque ici à voir
-import 'blueimp-canvas-to-blob';
 import 'blueimp-file-upload/js/jquery.fileupload-process';
-import 'blueimp-file-upload/js/jquery.iframe-transport';
 import 'blueimp-file-upload/js/jquery.fileupload-validate';
+
+
+//css to convert to less
+import 'blueimp-file-upload/css/jquery.fileupload.css';
+import 'blueimp-file-upload/css/jquery.fileupload-ui.css';
+
diff --git a/src/Resources/assets/js/widget/file_upload.js b/src/Resources/assets/js/widget/file_upload.js
index 373b5cc14836d192a46b811763f294b498a10431..d1b994bae895e8a1c3f38eafade1cf5702e3facf 100644
--- a/src/Resources/assets/js/widget/file_upload.js
+++ b/src/Resources/assets/js/widget/file_upload.js
@@ -1,3 +1,6 @@
+const Translator = require("translate-js/dist/translate");
+
+
 /*
  * Copyright (C) 2015 IRSTEA
  * All rights reserved.
@@ -25,8 +28,8 @@
             return formatFileSize(rate) + '/s';
         };
 
-    $.blueimp.fileupload.prototype._formatFileSize = formatFileSize;
-    $.blueimp.fileupload.prototype._formatBitrate = formatBitrate;
+  //blueimp.fileupload.prototype._formatFileSize = formatFileSize;
+ // blueimp.fileupload.prototype._formatBitrate= formatBitrate;
 
     /** Plugin irsteaFileUpload.
      */
diff --git a/src/Resources/assets/sass/file_upload.scss b/src/Resources/assets/sass/file_upload.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c4962c87a2a6825961114406e37ea0ee2c3da23e
--- /dev/null
+++ b/src/Resources/assets/sass/file_upload.scss
@@ -0,0 +1,65 @@
+/*
+Copyright (C) 2015 IRSTEA
+All rights reserved.
+*/
+
+@import "~font-awesome/scss/font-awesome";
+
+$padding-xs-vertical: false !default;
+$padding-xs-horizontal: false !default;
+$input-height-base: false !default;
+$line-height-computed: false !default;
+
+.fileinput-entry {
+    .cancel, .delete {
+        margin-left: 0.2em;
+    }
+    .description {
+        display: inline;
+        width: auto;
+        height: auto;
+        padding: $padding-xs-vertical $padding-xs-horizontal;
+        margin: 0 0.2em;
+    }
+    .progress {
+        height: ($line-height-computed / 2);
+        margin: ($line-height-computed / 4) 0;
+    }
+    .progress-text {
+        float: right;
+    }
+    .error {
+        display: none;
+    }
+    &.alert {
+        padding: $padding-xs-vertical $padding-xs-horizontal;
+        margin-bottom: 0;
+        .name:after {
+            content: " :";
+        }
+        .error {
+            display: inline;
+            &:after {
+                content: ".";
+            }
+        }
+        .size, .description {
+            display: none;
+        }
+    }
+}
+
+.fileinput-multiple .fileinput-entry {
+    margin-bottom: ($line-height-computed / 2);
+}
+
+.fileinput-multiple, .fileinput-single {
+    height: auto !important;
+    min-height: $input-height-base;
+}
+
+.template-upload .size {
+    &:before { content: "("; }
+    &:after  { content: ")"; }
+}
+
diff --git a/src/Resources/views/Form/file_upload.html.twig b/src/Resources/views/Form/file_upload.html.twig
index 6e618d3d23df19063d0b4d47dd9192313d2bf1a4..694c96b80f1692824a236e65904d59870daab914 100644
--- a/src/Resources/views/Form/file_upload.html.twig
+++ b/src/Resources/views/Form/file_upload.html.twig
@@ -1,12 +1,11 @@
-
 {% block file_upload_progress_prototype %}
     <div class="template-upload fileinput-entry">
-        <div class="progress-text" style="display: none"></div>
+         <div class="progress-text" style="display: none"></div>
         <i class="fa fa-circle-o-notch fa-spin icon"></i>&nbsp;<span class="name"></span>
         <span class="size"></span>
         <span class="error"></span>
         <a href="#" class="danger cancel" title="{% trans %}button.cancel{% endtrans %}">
-            {{- irstea_icon('remove') -}}
+              {{- irstea_icon('remove') -}}
         </a>
         <div class="progress" style="display: none">
             <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0"></div>
diff --git a/tests/Fixtures/App/Controller/DefaultController.php b/tests/Fixtures/App/Controller/DefaultController.php
index a5dee38d369f2ba48a44a06e694d07c2c5819a5c..27323474cd1010ba97aa0d45139213ef1eb596b2 100644
--- a/tests/Fixtures/App/Controller/DefaultController.php
+++ b/tests/Fixtures/App/Controller/DefaultController.php
@@ -61,7 +61,7 @@ class DefaultController extends Controller
             'fichierSource',
             FileUploadType::class,
             [
-                    'label'             => 'Enregistrement.fichiers.label',
+                    'label'             => 'Label fileupload test',
                     'accept_file_types' => 'audio/.*',
                     'multiple'          => false,
                     'required'          => false,
diff --git a/tests/Fixtures/assets/fileupload_demo.css b/tests/Fixtures/assets/fileupload_demo.css
new file mode 100644
index 0000000000000000000000000000000000000000..38c567030498941ec6334468984e2f13ffb39756
--- /dev/null
+++ b/tests/Fixtures/assets/fileupload_demo.css
@@ -0,0 +1,16 @@
+        .file {
+   position: relative;
+   background: linear-gradient(to right, lightblue 50%, transparent 50%);
+   background-size: 200% 100%;
+   background-position: right bottom;
+   transition:all 1s ease;
+}
+ .file.done {
+   background: lightgreen;
+}
+ .file a {
+   display: block;
+   position: relative;
+   padding: 5px;
+   color: black;
+}
diff --git a/tests/Fixtures/assets/fileupload_demo.js b/tests/Fixtures/assets/fileupload_demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..55e73a7e2982d61045b865fc014be02191ce2087
--- /dev/null
+++ b/tests/Fixtures/assets/fileupload_demo.js
@@ -0,0 +1,19 @@
+       $("#fileupload").fileupload({
+            dataType: "json",
+            add: function(e, data) {
+                data.context = $('<p class="file">')
+                    .append($('<a target="_blank">').text(data.files[0].name))
+                    .appendTo(document.body);
+                data.submit();
+            },
+            progress: function(e, data) {
+                var progress = parseInt((data.loaded / data.total) * 100, 10);
+                data.context.css("background-position-x", 100 - progress + "%");
+            },
+            done: function(e, data) {
+                data.context
+                    .addClass("done")
+                    .find("a")
+                    .prop("href", data.result.files[0].url);
+            }
+        });
diff --git a/tests/Fixtures/package.json b/tests/Fixtures/package.json
index 8182dc5e84b73aa624b45c1f39886552d4936803..0781d4d3201de584315d37bbd4753d1072dcd6c8 100644
--- a/tests/Fixtures/package.json
+++ b/tests/Fixtures/package.json
@@ -16,6 +16,6 @@
     "highlight.js": "^9.18.1",
     "jquery-mousewheel": "^3.1.13",
     "node-sass": "^4.13.1",
-    "sass-loader": "^7.0"
+    "sass-loader": "^8.0"
   }
 }
diff --git a/tests/Fixtures/templates/base.html.twig b/tests/Fixtures/templates/base.html.twig
index 0c074640af489c4b998cc79545b8f6440bb7e81d..9dcfde3702f4fc5f729144d7a5c9aecad2409e1b 100644
--- a/tests/Fixtures/templates/base.html.twig
+++ b/tests/Fixtures/templates/base.html.twig
@@ -7,52 +7,11 @@
 {% endblock %}
 
 {% block stylesheets %}
-    
-    <style>
-        .file {
-   position: relative;
-   background: linear-gradient(to right, lightblue 50%, transparent 50%);
-   background-size: 200% 100%;
-   background-position: right bottom;
-   transition:all 1s ease;
-}
- .file.done {
-   background: lightgreen;
-}
- .file a {
-   display: block;
-   position: relative;
-   padding: 5px;
-   color: black;
-}</style>
     {{ parent() }}
     {{ encore_entry_link_tags('main') }}
 {% endblock %}
 
 {%- block javascripts %}
-
-    <script>
-
-        $("#fileupload").fileupload({
-            dataType: "json",
-            add: function(e, data) {
-                data.context = $('<p class="file">')
-                    .append($('<a target="_blank">').text(data.files[0].name))
-                    .appendTo(document.body);
-                data.submit();
-            },
-            progress: function(e, data) {
-                var progress = parseInt((data.loaded / data.total) * 100, 10);
-                data.context.css("background-position-x", 100 - progress + "%");
-            },
-            done: function(e, data) {
-                data.context
-                    .addClass("done")
-                    .find("a")
-                    .prop("href", data.result.files[0].url);
-            }
-        });
-    </script>
 {{ parent() }}
 
     {{ encore_entry_script_tags('main') }}
diff --git a/tests/Fixtures/templates/index.html.twig b/tests/Fixtures/templates/index.html.twig
index 146181604a7005e747698c3ec263e5c70210bbd1..b377ea802fc8527b3dc4e70c63df505b5d84739f 100644
--- a/tests/Fixtures/templates/index.html.twig
+++ b/tests/Fixtures/templates/index.html.twig
@@ -1,5 +1,15 @@
 {% extends '/base.html.twig' %}
 
-{% block content %}
-    {{ form(form) }}
+{% block content -%}
+    {{ form_start(form) }}
+    <div class="tab-content">
+        <div class="row">
+            <div class="col-md-12">
+                <br/><br/>
+                {{ form_rest(form) }}
+            </div>
+        </div>
+    </div>
+</div>
+{{ form_end(form) }}
 {% endblock %}
diff --git a/tests/Fixtures/webpack.config.js b/tests/Fixtures/webpack.config.js
index 6831c04d5e97aac22e9560d58c0cecafdfb42d68..a8fe4fb096587c1c0809e42e89c94236770a3fd8 100644
--- a/tests/Fixtures/webpack.config.js
+++ b/tests/Fixtures/webpack.config.js
@@ -1,4 +1,4 @@
-var Encore = require('@symfony/webpack-encore');
+ var Encore = require('@symfony/webpack-encore');
 
 Encore
   // the project directory where compiled assets will be stored
@@ -36,6 +36,7 @@ Encore
   .addEntry('main', [
     './assets/main.js',
     './assets/main.scss',
+    './assets/fileupload_demo.js',
   ])