dropzone.js handle upload of document for a better UX

CHANGELOG.md

@@ -9,4 +9,7 @@ Branch add_dropzone
 ===================
 
 - fix some missing translations on update / create document and "any document" in list
+- use dropzone to upload a document with a better UI
+
+You must add `"dropzone": "^5.5.1"` to your dependencies in `packages.json`.
 

Resources/public/module/async_upload/downloader.js

@@ -29,6 +29,8 @@ var download = (button) => {
         labelReady = button.dataset.labelReady,
         mimeType = button.dataset.mimeType,
         extension = mime.extension(mimeType),
+        decryptError = "Error while decrypting file",
+        fetchError = "Error while fetching file",
         key, url
         ;
     
@@ -44,14 +46,25 @@ var download = (button) => {
         })
         .then(data => {
             url = data.url;
-
+    
             return window.crypto.subtle.importKey('jwk', keyData, { name: algo, iv: iv}, false, ['decrypt']);
         })
+        .catch(e => {
+            console.error("error while importing key");
+            console.error(e);
+            button.appendChild(document.createTextNode(decryptError));
+        })
         .then(nKey => {
             key = nKey;
 
             return window.fetch(url);
         })
+        .catch(e => {
+            console.error("error while fetching data");
+            console.error(e);
+            button.textContent = "";
+            button.appendChild(document.createTextNode(fetchError));
+        })
         .then(r => {
             if (r.ok) {
                 return r.arrayBuffer();
@@ -62,6 +75,12 @@ var download = (button) => {
         .then(buffer => {
             return window.crypto.subtle.decrypt({ name: algo, iv: iv }, key, buffer);
         })
+        .catch(e => {
+            console.error("error while importing key");
+            console.error(e);
+            button.textContent = "";
+            button.appendChild(document.createTextNode(decryptError));
+        })
         .then(decrypted => {
             var 
                 blob = new Blob([decrypted], { type: mimeType }),
@@ -82,6 +101,8 @@ var download = (button) => {
         })
         .catch(error => {
             console.log(error);
+            button.textContent = "";
+            button.appendChild(document.createTextNode("error while handling decrypted file"));
         })
         ;
 };
@@ -89,3 +110,5 @@ var download = (button) => {
 window.addEventListener('load', function(e) {
     initializeButtons(e.target);
 });
+
+module.exports = initializeButtons;

Resources/public/module/async_upload/index.scss

@@ -0,0 +1,25 @@
+.dropzone {
+    margin-bottom: 0.5rem;
+    
+    .dz-preview {
+        display: initial;
+        margin-left: auto;
+        margin-right: auto;
+
+        .dz-image {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .dz-details, .dz-progress, .dz-success-mark, .dz-error-mark {
+            position: initial;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+}
+
+.sc-button.dz-bt-below-dropzone {
+    width: 100%;
+}
+

Resources/public/module/async_upload/uploader.js

@@ -1,4 +1,15 @@
 var algo = 'AES-CBC';
+var Dropzone = require('dropzone');
+var initializeDownload = require('./downloader.js');
+
+// load css
+//require('dropzone/dist/basic.css');
+require('dropzone/dist/dropzone.css');
+require('./index.scss');
+//
+
+// disable dropzone autodiscover
+Dropzone.autoDiscover = false;
 
 var keyDefinition = {
     name: algo,
@@ -13,111 +24,135 @@ var searchForZones = function(root) {
     }
 };
 
+var getUploadUrl = function(zoneData, files) {
+    var
+        generateTempUrlPost  = zoneData.zone.querySelector('input[data-async-file-upload]').dataset.generateTempUrlPost,
+        oReq = new XMLHttpRequest()
+        ;
+    
+    // arg, dropzone, you cannot handle async upload...
+    oReq.open("GET", generateTempUrlPost, false);
+    oReq.send();
+    
+    if (oReq.readyState !== XMLHttpRequest.DONE) {
+        throw new Error("Error while fetching url to upload");
+    }
+    
+    zoneData.params = JSON.parse(oReq.responseText);
+    
+    return zoneData.params.url;
+};
+
+var encryptFile = function(originalFile, zoneData, done) {
+    var 
+        iv = crypto.getRandomValues(new Uint8Array(16)),
+        reader = new FileReader(),
+        jsKey, rawKey
+        ;
+        
+    zoneData.originalType = originalFile.type;
+        
+    reader.onload = e => {
+        window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ])
+            .then(key => { 
+                jsKey = key;
+
+                // we register the key somwhere
+                return window.crypto.subtle.exportKey('jwk', key);
+            }).then(exportedKey => {
+                rawKey = exportedKey;
+
+                // we start encryption
+                return window.crypto.subtle.encrypt({ name: algo, iv: iv}, jsKey, e.target.result);
+            })
+            .then(encrypted => {
+                zoneData.crypto = {
+                    jsKey: jsKey,
+                    rawKey: rawKey,
+                    iv: iv
+                };
+                
+                done(new File( [ encrypted ], zoneData.suffix));
+            });
+    };
+    
+    reader.readAsArrayBuffer(originalFile);
+};
+
 
 var initialize = function(zone) {
     var 
-        dropZone = document.createElement('div'),
-        input = document.createElement('input')
-        ;
+        created = document.createElement('div'),
+        initMessage = document.createElement('div'),
+        initContent = zone.dataset.labelInitMessage,
+        zoneData = { zone: zone, suffix: createFilename() },
+        dropzoneI;
         
-    input.type = 'file';
-    input.addEventListener('change', function(e) {
-        handleInputFile(zone);
+    created.classList.add('dropzone');
+    initMessage.classList.add('dz-message');
+    initMessage.appendChild(document.createTextNode(initContent));
+            
+    dropzoneI = new Dropzone(created, {
+            url: function(files) {
+                return getUploadUrl(zoneData, files);
+            },
+            dictDefaultMessage: zone.dataset.dictDefaultMessage,
+            dictFileTooBig: zone.dataset.dictFileTooBig,
+            dictRemoveFile: zone.dataset.dictRemoveFile,
+            dictMaxFilesExceeded: zone.dataset.dictMaxFilesExceeded,
+            dictCancelUpload: zone.dataset.dictCancelUpload,
+            dictCancelUploadConfirm: zone.dataset.dictCancelUploadConfirm,
+            dictUploadCanceled: zone.dataset.dictUploadCanceled,
+            maxFiles: 1,
+            addRemoveLinks: true,
+            transformFile: function(file, done) {
+                encryptFile(file, zoneData, done);
+            },
+            renameFile: function(file) {
+                return zoneData.suffix;
+            }
+        });
+        
+    dropzoneI.on("sending", function(file, xhr, formData) {
+        formData.append("redirect", zoneData.params.redirect);
+        formData.append("max_file_size", zoneData.params.max_file_size);
+        formData.append("max_file_count", zoneData.params.max_file_count);
+        formData.append("expires", zoneData.params.expires);
+        formData.append("signature", zoneData.params.signature);
     });
     
-    dropZone.classList.add('chill-doc__dropzone__drop');
+    dropzoneI.on("success", function(file, response) {
+        zoneData.currentFile = file;
+        storeDataInForm(zone, zoneData);
+    });
     
-    zone.insertBefore(input, zone.firstChild);
-    zone.insertBefore(dropZone, zone.firstChild);
-};
+    dropzoneI.on("addedfile", function(file) {
+        if (zoneData.hasOwnProperty('currentFile')) {
+            dropzoneI.removeFile(zoneData.currentFile);
+        }
+    });
+    
+    dropzoneI.on("removedfile", function(file) {
+        removeDataInForm(zone, zoneData);
+    });
 
-var handleInputFile = function (zone) {
-    var 
-        file = zone.querySelector('input[type="file"]').files[0],
-        type = file.type,
-        reader = new FileReader()
-        ;
+    zone.insertBefore(created, zone.firstChild);
     
-    reader.onload = e => {
-        transmitArrayBuffer(zone, e.target.result, type);
-    };
-    
-    reader.readAsArrayBuffer(file);
+    insertDownloadButton(zone, zoneData);
 };
 
 var createFilename = () => {
     var text = "";
     var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-    for (let i = 0; i < 7; i++)
-    text += possible.charAt(Math.floor(Math.random() * possible.length));
+    for (let i = 0; i < 7; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
 
     return text;
 };
 
-var transmitArrayBuffer = (zone, data, type) => {
-    var 
-        iv = crypto.getRandomValues(new Uint8Array(16)),
-        generateTempUrlPost  = zone.querySelector('input[data-async-file-upload]').dataset.generateTempUrlPost,
-        suffix = createFilename(),
-        jsKey, rawKey, encryptedData, uploadData
-        ;
-    
-    window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ])
-        .then(key => { 
-            jsKey = key;
-            
-            // we register the key somwhere
-            return window.crypto.subtle.exportKey('jwk', key);
-        }).then(exportedKey => {
-            rawKey = exportedKey;
-            
-            // we start encryption
-            return window.crypto.subtle.encrypt({ name: algo, iv: iv}, jsKey, data);
-        })
-        .then(encrypted => {
-            
-            encryptedData = encrypted;
-            
-            // we get the url and parameters to upload document
-            return window.fetch(generateTempUrlPost);
-        })
-        .then(response => response.json())
-        .then(data => {
-            var 
-                formData = new FormData();
-            
-            uploadData = data;
-            
-            formData.append("redirect", data.redirect);
-            formData.append("max_file_size", data.max_file_size);
-            formData.append("max_file_count", data.max_file_count);
-            formData.append("expires", data.expires);
-            formData.append("signature", data.signature);
-            formData.append("file", new Blob([ encryptedData ]), suffix);
-            
-            return window.fetch(data.url, {
-                method: 'POST',
-                mode: 'cors',
-                body: formData
-            });
-        })
-        .then(response => {
-            if (response.ok) {
-                storeDataInForm(zone, suffix, rawKey, iv, uploadData, type);
-                
-            } else {
-                throw new Error("error while sending data");
-            }
-        })
-        .catch(error => {
-            window.alert("Error while sending document.");
-            console.log(error);
-        })
-        ;
-};
-
-var storeDataInForm = (zone, suffix, jskey, iv, uploaddata, type) => {
+var storeDataInForm = (zone, zoneData) => {
     var 
         inputKey = zone.querySelector('input[data-stored-object-key]'),
         inputIv  = zone.querySelector('input[data-stored-object-iv]'),
@@ -125,10 +160,68 @@ var storeDataInForm = (zone, suffix, jskey, iv, uploaddata, type) => {
         inputType = zone.querySelector('input[data-async-file-type]')
         ;
     
-    inputKey.value = JSON.stringify(jskey);
-    inputIv.value = JSON.stringify(iv);
-    inputType.value = type;
-    inputObject.value = uploaddata.prefix + suffix;
+    inputKey.value = JSON.stringify(zoneData.crypto.rawKey);
+    inputIv.value = JSON.stringify(Array.from(zoneData.crypto.iv));
+    inputType.value = zoneData.originalType;
+    inputObject.value = zoneData.params.prefix + zoneData.suffix;
+
+    insertDownloadButton(zone);
+};
+
+var removeDataInForm = (zone, zoneData) => {
+    var 
+        inputKey = zone.querySelector('input[data-stored-object-key]'),
+        inputIv  = zone.querySelector('input[data-stored-object-iv]'),
+        inputObject = zone.querySelector('input[data-async-file-upload]'),
+        inputType = zone.querySelector('input[data-async-file-type]')
+        ;
+    
+    inputKey.value = "";
+    inputIv.value = "";
+    inputType.value = "";
+    inputObject.value = "";
+    
+    insertDownloadButton(zone);
+};
+
+var insertDownloadButton = (zone) => {
+    var 
+        existingButtons = zone.querySelectorAll('a[data-download-button]'),
+        newButton = document.createElement('a'),
+        inputKey = zone.querySelector('input[data-stored-object-key]'),
+        inputIv  = zone.querySelector('input[data-stored-object-iv]'),
+        inputObject = zone.querySelector('input[data-async-file-upload]'),
+        inputType = zone.querySelector('input[data-async-file-type]'),
+        labelPreparing = zone.dataset.labelPreparing,
+        labelQuietButton = zone.dataset.labelQuietButton,
+        labelReady = zone.dataset.labelReady,
+        tempUrlGenerator = zone.dataset.tempUrlGenerator,
+        tempUrlGeneratorParams = new URLSearchParams()
+        ;
+        
+    // remove existing
+    existingButtons.forEach(function(b) {
+        b.remove();
+    });
+    
+    if (inputObject.value === '') {
+        return;
+    }
+    
+    tempUrlGeneratorParams.append('object_name', inputObject.value);
+    
+    newButton.dataset.downloadButton = true;
+    newButton.dataset.key = inputKey.value;
+    newButton.dataset.iv = inputIv.value;
+    newButton.dataset.mimeType = inputType.value;
+    newButton.dataset.labelPreparing = labelPreparing;
+    newButton.dataset.labelReady = labelReady;
+    newButton.dataset.tempUrlGetGenerator = tempUrlGenerator + '?' + tempUrlGeneratorParams.toString();
+    newButton.classList.add('sc-button', 'bt-download', 'dz-bt-below-dropzone');
+    newButton.textContent = labelQuietButton;
+    
+    zone.appendChild(newButton);
+    initializeDownload(zone);
 };
 
 window.addEventListener('load', function(e) {

Resources/translations/messages.fr.yml

@@ -13,4 +13,13 @@ No document to download: Aucun document à télécharger
 'Choose a document category': Choisissez une catégorie de document
 Any document found: Aucun document trouvé
 The document is successfully registered: Le document est enregistré
-The document is successfully updated: Le document est mis à jour
+The document is successfully updated: Le document est mis à jour
+
+# dropzone upload
+File too big: Fichier trop volumineux
+Drop your file or click here: Cliquez ici ou faites glissez votre nouveau fichier dans cette zone
+Remove file in order to upload a new one: Supprimer ce fichier pour en insérer un autre
+Max files exceeded. Remove previous files: Nombre maximum de fichier atteint. Supprimez les précédents
+Cancel upload: Annuler le téléversement
+Are you sure you want to cancel this upload ?: Êtes-vous sûrs de vouloir annuler ce téléversement ?
+Upload canceled: Téléversement annulé

Resources/views/Form/fields.html.twig

@@ -1,5 +1,17 @@
 {% block stored_object_widget %}
-    <div data-stored-object="data-stored-object">
+    <div 
+        data-stored-object="data-stored-object" 
+        data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}" 
+        data-label-quiet-button="{{ 'Download'|trans|escape('html_attr') }}"
+        data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}" 
+        data-dict-file-too-big="{{ 'File too big'|trans|escape('html_attr') }}"
+        data-dict-default-message="{{ "Drop your file or click here"|trans|escape('html_attr') }}"
+        data-dict-remove-file="{{ 'Remove file in order to upload a new one'|trans|escape('html_attr') }}"
+        data-dict-max-files-exceeded="{{ 'Max files exceeded. Remove previous files'|trans|escape('html_attr') }}"
+        data-dict-cancel-upload="{{ 'Cancel upload'|trans|escape('html_attr') }}"
+        data-dict-cancel-upload-confirm="{{ 'Are you sure you want to cancel this upload ?'|trans|escape('html_attr') }}"
+        data-dict-upload-canceled="{{ 'Upload canceled'|trans|escape('html_attr') }}"
+        data-temp-url-generator="{{ path('async_upload.generate_url', { 'method': 'GET' })|escape('html_attr') }}">
         {{ form_widget(form.filename) }}
         {{ form_widget(form.keyInfos, { 'attr': { 'data-stored-object-key': 1 } }) }}
         {{ form_widget(form.iv, { 'attr': { 'data-stored-object-iv': 1 } }) }}

Resources/views/Macro/macro.html.twig

@@ -2,6 +2,14 @@
     {% if storedObject is null %}
         <!-- No document to download -->
     {% else %}
-        <a class="sc-button bt-download" data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}" data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}" data-download-button data-key="{{ storedObject.keyInfos|json_encode|escape('html_attr') }}" data-iv="{{ storedObject.iv|json_encode|escape('html_attr') }}" data-temp-url-get-generator="{{ storedObject|generate_url|escape('html_attr') }}" data-mime-type="{{ storedObject.type|escape('html_attr') }}" {% if filename is not null %}data-filename="{{ filename|escape('html_attr') }}"{% endif %}>{{ 'Download'|trans }}</a>
+        <a class="sc-button bt-download" 
+           data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}" 
+           data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}" 
+           data-download-button 
+           data-key="{{ storedObject.keyInfos|json_encode|escape('html_attr') }}" 
+           data-iv="{{ storedObject.iv|json_encode|escape('html_attr') }}" 
+           data-temp-url-get-generator="{{ storedObject|generate_url|escape('html_attr') }}" 
+           data-mime-type="{{ storedObject.type|escape('html_attr') }}" {% if filename is not null %}data-filename="{{ filename|escape('html_attr') }}"{% endif %}>
+            {{ 'Download'|trans }}</a>
     {% endif %}
 {% endmacro %}

Resources/views/PersonDocument/edit.html.twig

@@ -17,8 +17,6 @@
 
 {% extends "ChillPersonBundle::layout.html.twig"  %}
 
-{% import "@ChillDocStore/Macro/macro.html.twig" as m %}
-
 {% set activeRouteKey = '' %}
 
 {% block title %}{{ 'Editing document for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %}
@@ -34,14 +32,6 @@
     {{ form_row(form.category) }}
     {{ form_row(form.scope) }}
     {{ form_row(form.description) }}
-    <div class="container">
-        <div class="grid-4 clear">
-            <label>{{ 'Existing document'|trans }}</label>
-        </div>
-        <div class="grid-8">
-            {{ m.download_button(document.object, document.title) }}
-        </div>
-    </div>
     {{ form_row(form.object, { 'label': 'Document', 'existing': document.object }) }}
 
     <ul class="record_actions">
@@ -68,3 +58,7 @@
 {% block js %}
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
 {% endblock %}
+
+{% block css %}
+    <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
+{% endblock %}

Resources/views/PersonDocument/new.html.twig

@@ -50,3 +50,7 @@
 {% block js %}
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
 {% endblock %}
+
+{% block css %}
+    <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
+{% endblock %}