Merge remote-tracking branch 'origin/issue466_file_upload' into workflow/fixes-2022-02

src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/uploader.js

@@ -4,12 +4,12 @@ var initializeDownload = require('./downloader.js');
 
 
 /**
- * 
+ *
  * define a dropzone for chill usage
- * 
- * An event is launched when dropzone is initialize, allowing to customize events 
+ *
+ * An event is launched when dropzone is initialize, allowing to customize events
  * on dropzone :
- * 
+ *
  * ```
  * window.addEventListener("chill_dropzone_initialized", (e) => {
  *    // do something with dropzone:
@@ -18,7 +18,7 @@ var initializeDownload = require('./downloader.js');
  *    });
  * });
  * ```
- * 
+ *
  */
 
 // load css
@@ -37,7 +37,6 @@ var keyDefinition = {
 
 var searchForZones = function(root) {
     var zones = root.querySelectorAll('div[data-stored-object]');
-    
     for(let i=0; i < zones.length; i++) {
         initialize(zones[i]);
     }
@@ -48,32 +47,32 @@ var getUploadUrl = function(zoneData, files) {
         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 
+    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 => { 
+            .then(key => {
                 jsKey = key;
 
                 // we register the key somwhere
@@ -90,34 +89,34 @@ var encryptFile = function(originalFile, zoneData, done) {
                     rawKey: rawKey,
                     iv: iv
                 };
-                
+
                 done(new File( [ encrypted ], zoneData.suffix));
             });
     };
-    
+
     reader.readAsArrayBuffer(originalFile);
 };
 
 var addBelowButton = (btn, zone, zoneData) => {
     let
         belowZone = zone.querySelector('.chill-dropzone__below-zone');
-        
+
     if (belowZone === null) {
         belowZone = document.createElement('div');
         belowZone.classList.add('chill-dropzone__below-zone');
         zone.appendChild(belowZone);
     }
-            
+
     belowZone.appendChild(btn);
 };
 
 var createZone = (zone, zoneData) => {
-    var 
+    var
         created = document.createElement('div'),
         initMessage = document.createElement('div'),
         initContent = zone.dataset.labelInitMessage,
         dropzoneI;
-    
+
     created.classList.add('dropzone');
     initMessage.classList.add('dz-message');
     initMessage.appendChild(document.createTextNode(initContent));
@@ -142,7 +141,7 @@ var createZone = (zone, zoneData) => {
                 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);
@@ -150,24 +149,24 @@ var createZone = (zone, zoneData) => {
         formData.append("expires", zoneData.params.expires);
         formData.append("signature", zoneData.params.signature);
     });
-    
+
     dropzoneI.on("success", function(file, response) {
         zoneData.currentFile = file;
         storeDataInForm(zone, zoneData);
     });
-    
+
     dropzoneI.on("addedfile", function(file) {
         if (zoneData.hasOwnProperty('currentFile')) {
             dropzoneI.removeFile(zoneData.currentFile);
         }
     });
-    
+
     dropzoneI.on("removedfile", function(file) {
         removeDataInForm(zone, zoneData);
     });
 
     zone.insertBefore(created, zone.firstChild);
-    
+
     let event = new CustomEvent("chill_dropzone_initialized", {
         detail: {
             dropzone: dropzoneI,
@@ -179,7 +178,7 @@ var createZone = (zone, zoneData) => {
 
 
 var initialize = function(zone) {
-    var 
+    var
         allowRemove = zone.dataset.allowRemove,
         zoneData = { zone: zone, suffix: createFilename(), allowRemove: allowRemove, old: null }
         ;
@@ -204,13 +203,13 @@ var createFilename = () => {
 };
 
 var storeDataInForm = (zone, zoneData) => {
-    var 
+    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 = JSON.stringify(zoneData.crypto.rawKey);
     inputIv.value = JSON.stringify(Array.from(zoneData.crypto.iv));
     inputType.value = zoneData.originalType;
@@ -220,18 +219,18 @@ var storeDataInForm = (zone, zoneData) => {
 };
 
 const restoreDataInForm = (zone, zoneData) => {
-    var 
+    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]')
         ;
-        
+
     if (zoneData.old === null) {
         console.log('should not have restored data');
         return;
     }
-    
+
     inputKey.value    = zoneData.old.key;
     inputIv.value     = zoneData.old.iv;
     inputType.value   = zoneData.old.type;
@@ -241,21 +240,21 @@ const restoreDataInForm = (zone, zoneData) => {
 };
 
 const hasDataInForm = (zone, zoneData) => {
-    var 
+    var
         inputObject = zone.querySelector('input[data-async-file-upload]')
         ;
-        
+
     return inputObject.value.length > 0;
 };
 
 var removeDataInForm = (zone, zoneData) => {
-    var 
+    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]')
         ;
-        
+
     // store data for future usage
     zoneData.old = {
             key: inputKey.value,
@@ -268,7 +267,7 @@ var removeDataInForm = (zone, zoneData) => {
     inputIv.value = "";
     inputType.value = "";
     inputObject.value = "";
-    
+
     insertDownloadButton(zone);
 };
 
@@ -279,25 +278,25 @@ var insertRemoveButton = (zone, zoneData) => {
         labelRemove = zone.dataset.dictRemove,
         labelCancel = 'Restaurer'
         ;
-    
+
     removeButton.classList.add('btn', 'btn-delete');
     removeButton.textContent = labelRemove;
-    
+
     cancelButton.classList.add('btn', 'btn-cancel');
     cancelButton.textContent = labelCancel;
-    
+
     removeButton.addEventListener('click', (e) => {
         e.preventDefault();
         if (zoneData.allowRemove === 'true') {
             removeDataInForm(zone, zoneData);
             cancelButton.addEventListener('click', (e) => {
                 e.preventDefault();
-                
+
                 restoreDataInForm(zone, zoneData);
-                
+
                 cancelButton.remove();
                 zone.querySelector('.dropzone').remove();
-                
+
                 initialize(zone);
             });
         }
@@ -306,16 +305,16 @@ var insertRemoveButton = (zone, zoneData) => {
         removeButton.remove();
         createZone(zone, zoneData);
     });
-    
+
     addBelowButton(removeButton, zone, zoneData);
     // zone.appendChild(removeButton);
 };
 
 const removeDownloadButton = (zone, zoneData) => {
-    var 
+    var
         existingButtons = zone.querySelectorAll('a[data-download-button]')
         ;
-        
+
     // remove existing
     existingButtons.forEach(function(b) {
         b.remove();
@@ -323,7 +322,7 @@ const removeDownloadButton = (zone, zoneData) => {
 };
 
 var insertDownloadButton = (zone, zoneData) => {
-    var 
+    var
         existingButtons = zone.querySelectorAll('a[data-download-button]'),
         newButton = document.createElement('a'),
         inputKey = zone.querySelector('input[data-stored-object-key]'),
@@ -336,18 +335,18 @@ var insertDownloadButton = (zone, zoneData) => {
         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;
@@ -357,7 +356,7 @@ var insertDownloadButton = (zone, zoneData) => {
     newButton.dataset.tempUrlGetGenerator = tempUrlGenerator + '?' + tempUrlGeneratorParams.toString();
     newButton.classList.add('btn', 'btn-download', 'dz-bt-below-dropzone');
     newButton.textContent = labelQuietButton;
-    
+
     addBelowButton(newButton, zone, zoneData);
     //zone.appendChild(newButton);
     initializeDownload(zone);
@@ -370,3 +369,5 @@ window.addEventListener('load', function(e) {
 window.addEventListener('collection-add-entry', function(e) {
     searchForZones(e.detail.entry);
 });
+
+export { searchForZones };

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue

@@ -0,0 +1,156 @@
+<template>
+   <a class="btn btn-create" :title="$t(buttonTitle)" @click="openModal">
+      <span>{{ $t(buttonTitle) }}</span>
+   </a>
+   <teleport to="body">
+      <div>
+         <modal v-if="modal.showModal"
+            :modalDialogClass="modal.modalDialogClass"
+            @close="modal.showModal = false">
+
+            <template v-slot:header>
+               {{ $t('upload_a_document') }}
+            </template>
+
+            <template v-slot:body>
+                <div id="dropZoneWrapper" ref="dropZoneWrapper">
+                    <div
+                        data-stored-object="data-stored-object"
+                        :data-label-preparing="$t('data_label_preparing')"
+                        :data-label-quiet-button="$t('data_label_quiet_button')"
+                        :data-label-ready="$t('data_label_ready')"
+                        :data-dict-file-too-big="$t('data_dict_file_too_big')"
+                        :data-dict-default-message="$t('data_dict_default_message')"
+                        :data-dict-remove-file="$t('data_dict_remove_file')"
+                        :data-dict-max-files-exceeded="$t('data_dict_max_files_exceeded')"
+                        :data-dict-cancel-upload="$t('data_dict_cancel_upload')"
+                        :data-dict-cancel-upload-confirm="$t('data_dict_cancel_upload_confirm')"
+                        :data-dict-upload-canceled="$t('data_dict_upload_canceled')"
+                        :data-dict-remove="$t('data_dict_remove')"
+                        :data-allow-remove="!options.required"
+                        data-temp-url-generator="/asyncupload/temp_url/generate/GET">
+                        <input
+                           type="hidden"
+                           data-async-file-upload="data-async-file-upload"
+                           data-generate-temp-url-post="/asyncupload/temp_url/generate/post?expires_delay=180&amp;submit_delay=3600"
+                           data-temp-url-get="/asyncupload/temp_url/generate/GET"
+                           :data-max-files="options.maxFiles"
+                           :data-max-post-size="options.maxPostSize"
+                           :v-model="dataAsyncFileUpload"
+                        >
+                        <input
+                           type="hidden"
+                           data-stored-object-key="1"
+                        >
+                        <input
+                           type="hidden"
+                           data-stored-object-iv="1"
+                        >
+                        <input
+                           type="hidden"
+                           data-async-file-type="1"
+                        >
+                    </div>
+                </div>
+            </template>
+
+            <template v-slot:footer>
+               <button class="btn btn-create"
+                  @click.prevent="saveDocument">
+                  {{ $t('action.add')}}
+            </button>
+            </template>
+
+         </modal>
+      </div>
+   </teleport>
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import { searchForZones } from '../../module/async_upload/uploader';
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+
+const i18n = {
+   messages: {
+      fr: {
+         upload_a_document: "Téléversez un document",
+         data_label_preparing: "Chargement...",
+         data_label_quiet_button: "Téléchargez le fichier existant",
+         data_label_ready: "Prêt à montrer",
+         data_dict_file_too_big: "Fichier trop volumineux",
+         data_dict_default_message: "Glissez votre fichier ou cliquez ici",
+         data_dict_remove_file: "Enlevez votre fichier pour en téléversez un autre",
+         data_dict_max_files_exceeded: "Nombre maximum de fichiers atteint. Enlevez les fichiers précédents",
+         data_dict_cancel_upload: "Annulez le téléversement",
+         data_dict_cancel_upload_confirm: "Êtes-vous sûr·e de vouloir annuler ce téléversement?",
+         data_dict_upload_canceled: "Téléversement annulé",
+         data_dict_remove: "Enlevez le fichier existant",
+      }
+   }
+};
+
+export default {
+   name: "AddAsyncUpload",
+   components: {
+      Modal
+   },
+   i18n,
+   props: [
+     'buttonTitle',
+     'options'
+   ],
+   emits: ['addDocument'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         },
+      }
+   },
+   updated() {
+     if (this.modal.showModal){
+         searchForZones(this.$refs.dropZoneWrapper);
+     }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+      },
+      saveDocument() {
+         const dropzone = this.$refs.dropZoneWrapper;
+         if (dropzone) {
+            const inputKey = dropzone.querySelector('input[data-stored-object-key]');
+            const inputIv  = dropzone.querySelector('input[data-stored-object-iv]');
+            const inputObject = dropzone.querySelector('input[data-async-file-upload]');
+            const inputType = dropzone.querySelector('input[data-async-file-type]');
+
+            const url = '/api/1.0/docstore/stored-object.json';
+            const body = {
+               filename: inputObject.value,
+               keyInfos: JSON.parse(inputKey.value),
+               iv: JSON.parse(inputIv.value),
+               type: inputType.value,
+            };
+            makeFetch('POST', url, body)
+               .then(r => {
+                  this.$emit("addDocument", r);
+                  this.modal.showModal = false;
+               })
+               .catch((error) => {
+                  if (error.name === 'ValidationException') {
+                     for (let v of error.violations) {
+                        this.$toast.open({message: v });
+                     }
+                  } else {
+                     this.$toast.open({message: 'An error occurred'});
+                  }
+               });
+         } else {
+            this.$toast.open({message: 'An error occurred - drop zone not found'});
+         }
+      }
+   }
+}
+</script>