add mime types to documents

Form/StoredObjectType.php

@@ -22,6 +22,7 @@ class StoredObjectType extends AbstractType
     {
         $builder
             ->add('filename', AsyncUploaderType::class)
+            ->add('type', HiddenType::class)
             ->add('keyInfos', HiddenType::class)
             ->add('iv', HiddenType::class)
             ;

Resources/public/module/async_upload/downloader.js

@@ -1,3 +1,5 @@
+var mime = require('mime-types');
+
 var algo = 'AES-CBC';
 
 var initializeButtons = (root) => {
@@ -16,52 +18,73 @@ var initialize = (button) => {
 var onClick = e => download(e.target);
 
 var download = (button) => {
-    console.log(button.dataset.key);
     var
         keyData = JSON.parse(button.dataset.key),
-        //keyData, // = JSON.parse(keyString),
         ivData = JSON.parse(button.dataset.iv),
         iv = new Uint8Array(ivData),
-        url = button.dataset.tempUrlGet,
+        urlGenerator = button.dataset.tempUrlGetGenerator,
-        data, key
+        hasFilename = 'filename' in button.dataset,
+        filename = button.dataset.filename,
+        labelPreparing = button.dataset.labelPreparing,
+        labelReady = button.dataset.labelReady,
+        mimeType = button.dataset.mimeType,
+        extension = mime.extension(mimeType),
+        key, url
         ;
-    console.log('keyData', keyData);
-    console.log('iv', iv);
-    console.log('url', url);
     
-    window.crypto.subtle.importKey('jwk', keyData, { name: algo, iv: iv}, false, ['decrypt'])
+    button.textContent = labelPreparing;
-            .then(nKey => {
+    
-                key = nKey;
+    window.fetch(urlGenerator)
-                console.log(key);
+        .then((r) => {
-        
+            if (r.ok) {
-                return window.fetch(url);
+                return r.json();
-            })
+            } else {
-            .then(r => {
+                throw new Error("error while downloading url " + r.status + " " + r.statusText);
-                if (r.ok) {
+            }
-                    return r.arrayBuffer();
+        })
-                } else {
+        .then(data => {
-                    console.log(r);
+            url = data.url;
-                    throw new Error(r.statusCode);
+
+            return window.crypto.subtle.importKey('jwk', keyData, { name: algo, iv: iv}, false, ['decrypt']);
+        })
+        .then(nKey => {
+            key = nKey;
+
+            return window.fetch(url);
+        })
+        .then(r => {
+            if (r.ok) {
+                return r.arrayBuffer();
+            } else {
+                throw new Error(r.status + r.statusText);
+            }
+        })
+        .then(buffer => {
+            return window.crypto.subtle.decrypt({ name: algo, iv: iv }, key, buffer);
+        })
+        .then(decrypted => {
+            var 
+                blob = new Blob([decrypted], { type: mimeType }),
+                url = window.URL.createObjectURL(blob)
+                ;
+            button.href = url;
+            button.target = '_parent';
+            button.type = mimeType;
+            button.textContent = labelReady;
+            if (hasFilename) {
+                button.download = filename;
+                if (extension !== false) {
+                    button.download = button.download + '.' + extension;
                 }
-            })
+            }
-            .then(buffer => {
+            button.removeEventListener('click', onClick);
-                return window.crypto.subtle.decrypt({ name: algo, iv: iv }, key, buffer);
+        })
-            })
+        .catch(error => {
-            .then(decrypted => {
+            console.log(error);
-                var 
+        })
-                    blob = new Blob([decrypted]),
+        ;
-                    url = window.URL.createObjectURL(blob)
-                    ;
-                button.href = url;
-                button.removeEventListener('click', onClick);
-            })
-            .catch(error => {
-                console.log(error);
-            })
-            ;
 };
 
 window.addEventListener('load', function(e) {
-    console.log('load');
     initializeButtons(e.target);
 });

Resources/public/module/async_upload/uploader.js

@@ -15,8 +15,6 @@ var searchForZones = function(root) {
 
 
 var initialize = function(zone) {
-    console.log('initialize zone');
-    
     var 
         dropZone = document.createElement('div'),
         input = document.createElement('input')
@@ -34,16 +32,14 @@ var initialize = function(zone) {
 };
 
 var handleInputFile = function (zone) {
-    console.log('handle file');
-    
     var 
         file = zone.querySelector('input[type="file"]').files[0],
-        
+        type = file.type,
         reader = new FileReader()
         ;
     
     reader.onload = e => {
-        transmitArrayBuffer(zone, e.target.result);
+        transmitArrayBuffer(zone, e.target.result, type);
     };
     
     reader.readAsArrayBuffer(file);
@@ -59,7 +55,7 @@ var createFilename = () => {
     return text;
 };
 
-var transmitArrayBuffer = (zone, data) => {
+var transmitArrayBuffer = (zone, data, type) => {
     var 
         iv = crypto.getRandomValues(new Uint8Array(16)),
         generateTempUrlPost  = zone.querySelector('input[data-async-file-upload]').dataset.generateTempUrlPost,
@@ -69,9 +65,6 @@ var transmitArrayBuffer = (zone, data) => {
     
     window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ])
         .then(key => { 
-            console.log('key', key); 
-            console.log('iv', iv); 
-            console.log('iv to string', iv.join(','));
             jsKey = key;
             
             // we register the key somwhere
@@ -79,13 +72,10 @@ var transmitArrayBuffer = (zone, data) => {
         }).then(exportedKey => {
             rawKey = exportedKey;
             
-            console.log('rawkey', rawKey);
-            console.log('data', data);
             // we start encryption
             return window.crypto.subtle.encrypt({ name: algo, iv: iv}, jsKey, data);
         })
         .then(encrypted => {
-            console.log('encrypted', encrypted);
             
             encryptedData = encrypted;
             
@@ -94,8 +84,6 @@ var transmitArrayBuffer = (zone, data) => {
         })
         .then(response => response.json())
         .then(data => {
-            console.log(encryptedData);
-            console.log(data);
             var 
                 formData = new FormData();
             
@@ -108,9 +96,6 @@ var transmitArrayBuffer = (zone, data) => {
             formData.append("signature", data.signature);
             formData.append("file", new Blob([ encryptedData ]), suffix);
             
-            console.log('filename', suffix);
-            console.log('formData', formData);
-            
             return window.fetch(data.url, {
                 method: 'POST',
                 mode: 'cors',
@@ -119,65 +104,33 @@ var transmitArrayBuffer = (zone, data) => {
         })
         .then(response => {
             if (response.ok) {
-                console.log('sent');
+                storeDataInForm(zone, suffix, rawKey, iv, uploadData, type);
-        
-                storeDataInForm(zone, suffix, rawKey, iv, uploadData);
                 
             } else {
-                console.log('response', response);
                 throw new Error("error while sending data");
             }
         })
         .catch(error => {
+            window.alert("Error while sending document.");
             console.log(error);
         })
-        
-//   return window.crypto.subtle.importKey('jwk', rawKey, { name: algo, iv: iv }, false, [ "decrypt"]);
-//
-//        .then(key => {
-//            console.log('decrypt');
-//            console.log(key);
-//            
-//            return window.crypto.subtle.decrypt({ name: algo, iv: iv }, key, encryptedData);
-//        })
-//        .then(decrypted => {
-//            console.log('decrypted');
-//            decrypt(zone, decrypted, 'decrypted');
-//        })
-
         ;
 };
 
-var storeDataInForm = (zone, suffix, jskey, iv, uploaddata) => {
+var storeDataInForm = (zone, suffix, jskey, iv, uploaddata, type) => {
     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]')
+        inputObject = zone.querySelector('input[data-async-file-upload]'),
+        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;
 };
 
-var decrypt = (zone, arraybuffer, name) => {
-    console.log('arraybuffer', arraybuffer);
-    var 
-        link = document.createElement('a'),
-        data = new Blob([ arraybuffer ])
-        ;
-    
-    link.innerHTML = name;
-    
-    link.href = window.URL.createObjectURL(data);
-    link.download = 'file';
-    
-    zone.appendChild(link);
-};
-
-
 window.addEventListener('load', function(e) {
     searchForZones(document);
 });
-
-

Resources/views/Form/fields.html.twig

@@ -3,5 +3,6 @@
         {{ form_widget(form.filename) }}
         {{ form_widget(form.keyInfos, { 'attr': { 'data-stored-object-key': 1 } }) }}
         {{ form_widget(form.iv, { 'attr': { 'data-stored-object-iv': 1 } }) }}
+        {{ form_widget(form.type, { 'attr': { 'data-async-file-type': 1 } }) }}
     </div>
 {% endblock %}

Resources/views/Macro/macro.html.twig

@@ -1,3 +1,3 @@
-{% macro download_button(storedObject) %}
+{% macro download_button(storedObject, filename = null) %}
-    <a class="sc-button bt-download" 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="{{ storedObject|file_url }}">{{ 'Download'|trans }}</a>
+    <a class="sc-button bt-download" data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}" data-label-ready="{{ 'Prêt'|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>
 {% endmacro %}

Resources/views/PersonDocument/index.html.twig

@@ -49,7 +49,7 @@
                     <ul class="record_actions">
                     {% if is_granted('CHILL_PERSON_DOCUMENT_SEE_DETAILS', document) %}
                         <li>
-                            {{ m.download_button(document.object) }}
+                            {{ m.download_button(document.object, document.title) }}
                         </li>
                         <li>
                             <a href="{{ path('person_document_show', {'person': person.id, 'id': document.id}) }}" class="sc-button">