preview file ready to merge

dranc · Jan 5, 2024 · fe1e315 · fe1e315
1 parent 631de46
commit fe1e315
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 78 deletions.
diff --git a/src/asset/html/index.html b/src/asset/html/index.html
@@ -9,33 +9,33 @@
         <span>Filigrane</span>
       </a>
     </nav>
-    <div class="flex center four" style="padding-top: 3em; align-items: center; height: 100%">
+    <div class="content flex center four">
       <article class="card full half-600 third-1200">
         <header>
           <p>Click here to add filigrane to any file.</p>
 
           <input id="input-file" type="file" multiple="true" />
         </header>
 
-        <div id="files" class="files" style="overflow-y: scroll; height: 50%">
+        <div id="files" class="files">
           <div class="file stack" style="display: none">
             <div class="flex six">
               <span class="fourth">
-                <img
+                <embed
+                  id="preview"
                   class="fourth center"
-                  src="icons/icon_48.png"
                   style="padding: 10px; margin: auto; display: block; width: 100%; overflow: hidden"
-                />
+                  alt="Click to see preview"
+                ></embed>
               </span>
               <span class="three-fourth">
-                <label class="name">This is a name</label>
+                <label id="name">This is a name</label>
                 <br />
-                <small class="size">6ko</small>
+                <small id="size">6ko</small>
+                <div class="processing"></div>
                 <div class="actions">
-                  <button>Revert</button>
-                  <button>Reload</button>
-                  <button>Preview</button>
-                  <button>Download</button>
+                  <!-- <button id="revert">Revert</button> -->
+                  <button id="download">Download</button>
                 </div>
               </span>
             </div>

diff --git a/src/asset/style/index.scss b/src/asset/style/index.scss
@@ -1,5 +1,26 @@
 @import '~picnic/src/picnic';
 
+.content {
+  padding-top: 3em;
+  align-items: center;
+  height: 100%;
+
+  .files {
+    overflow-y: scroll;
+    height: 50%;
+
+    .file {
+      &:not(.loading) .processing {
+        display: none;
+      }
+
+      &.loading .actions {
+        display: none;
+      }
+    }
+  }
+}
+
 // $height: 500px;
 // $width: 350px;
 

diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@ import { saveAs } from 'file-saver';
 import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
-  const filesMap = new Map<string, File>();
+  const filigraneServices = new FiligraneServices();
 
   document.addEventListener('DOMContentLoaded', () => {
     const inputFile = document.getElementById('input-file') as HTMLInputElement;
@@ -15,52 +15,61 @@ import { FiligraneServices } from './services/filigrane.services';
 
     inputFile.addEventListener('change', (ev) => {
       for (const file of inputFile.files!) {
-        const id = crypto.randomUUID();
-
-        console.log(fileExample);
+        const id = filigraneServices.prepareFile(file);
 
         const newFileElement = fileExample.cloneNode(true) as HTMLElement;
         newFileElement.id = id;
-
-        (newFileElement.getElementsByClassName('name')[0] as HTMLElement).innerText = file.name;
+        console.log(URL.createObjectURL(filigraneServices.getBlobFor(id)));
+        const preview = newFileElement.querySelector('#preview') as HTMLEmbedElement;
+        const blob = filigraneServices.getBlobFor(id);
+        preview.type = blob.type;
+        preview.src = URL.createObjectURL(blob);
+
+        (newFileElement.querySelector('#name') as HTMLElement).innerText = file.name;
+        (newFileElement.querySelector('#size') as HTMLElement).innerText = file.size.toString();
+
+        newFileElement.querySelector('#preview')!.addEventListener('click', () => {
+          const url = URL.createObjectURL(filigraneServices.getBlobFor(id));
+          console.log(id);
+          console.log(url);
+          window.open(url);
+        });
+
+        newFileElement.querySelector('#download')!.addEventListener('click', () => {
+          saveAs(filigraneServices.getBlobFor(id), `${file.name}.pdf`);
+        });
 
         files.appendChild(newFileElement);
-        filesMap.set(id, file);
 
         newFileElement.style.display = '';
       }
     });
 
     submit!.onclick = async (ev) => {
-      const filigrane = inputText.value || `Added from Filigrane.app on ${new Date().toDateString()}.`;
       for (const fileElt of files.children) {
         if (fileElt.id) {
-          console.log(`sending ${fileElt.id}`);
-          const file = filesMap.get(fileElt.id);
-          if (!file) {
-            throw Error(`File ${fileElt.id} lost ?`);
-          }
-
-          const actions = fileElt.getElementsByClassName('actions')[0] as HTMLElement;
-
-          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane, (step) => (actions.innerText = step));
-          const newFileBlob = new Blob([newFile], { type: 'application/pdf' });
-
-          const preview = document.createElement('button');
-          preview.innerText = 'Preview';
-          preview.onclick = () => {
-            window.open(URL.createObjectURL(newFileBlob));
-          };
-
-          const download = document.createElement('button');
-          download.innerText = 'Download';
-          download.onclick = () => {
-            saveAs(newFileBlob, `${file.name}.pdf`);
-          };
-
-          actions.innerHTML = '';
-          actions.appendChild(preview);
-          actions.appendChild(download);
+          fileElt.classList.add('loading');
+
+          const process = fileElt.getElementsByClassName('processing')[0] as HTMLElement;
+
+          await filigraneServices.addFiligraneToFile(
+            fileElt.id,
+            inputText.value,
+            (step) => (process.innerText = step),
+            () => {
+              const url = URL.createObjectURL(filigraneServices.getBlobFor(fileElt.id));
+
+              const preview = fileElt.querySelector('#preview') as HTMLEmbedElement;
+              const blob = filigraneServices.getBlobFor(fileElt.id);
+              preview.type = blob.type;
+              preview.src = URL.createObjectURL(blob);
+
+              fileElt.classList.remove('loading');
+            },
+            (message: string) => {
+              fileElt.classList.remove('loading');
+            },
+          );
         }
       }
     };

diff --git a/src/popup.ts b/src/popup.ts
@@ -18,8 +18,8 @@ import { FiligraneServices } from './services/filigrane.services';
       const files = (document.getElementById('input-file')! as HTMLInputElement).files!;
       if (files.length) {
         for (const filefromInput of files) {
-          const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
-          filesWithFiligrane.push(file);
+          // const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
+          // filesWithFiligrane.push(file);
         }
       }
 

diff --git a/src/services/filigrane.services.ts b/src/services/filigrane.services.ts
@@ -14,31 +14,48 @@ function sleep(ms: number) {
   });
 }
 
-export namespace FiligraneServices {
-  export async function addFiligraneToFile(
-    file: File,
-    watermark: string = 'this is a test from code',
+export class FiligraneServices {
+  private readonly data: Map<string, { origin: File; filigrane?: File }> = new Map();
+
+  public prepareFile(file: File): string {
+    let id: string;
+
+    do {
+      id = crypto.randomUUID();
+    } while (this.data.has(id));
+
+    this.data.set(id, { origin: file });
+
+    return id;
+  }
+
+  public async addFiligraneToFile(
+    id: string,
+    watermark: string = `Added with Filigrane.app on ${new Date().toDateString()}.`,
     onEvent: (step: string) => void,
-  ): Promise<File> {
-    // const uploadUrl = 'https://api.filigrane.beta.gouv.fr/api/document/files';
+    onCompleted: () => void,
+    onError: (message: string) => void,
+  ): Promise<void> {
+    if (!this.data.has(id)) {
+      onError('File is not find in the data.');
+      return;
+    }
+
+    const file = this.data.get(id)!.origin;
 
     var formData = new FormData();
     formData.append('files', file);
     formData.append('watermark', watermark);
+
     onEvent('Sending file to beta.gouv.fr.');
-    const { data, status } = await axios.post<ResponseData>(
-      'https://api.filigrane.beta.gouv.fr/api/document/files',
-      formData,
-      // {
-      //   files: [new File(e.target.result, 'name.pdf')],
-      //   watermark: 'this is a test from code'
-      // } as SendData,
-      {
-        headers: {
-          Accept: 'application/json',
-        },
+
+    const baseUrl = 'https://api.filigrane.beta.gouv.fr/api/document';
+
+    const { data, status } = await axios.post<ResponseData>(`${baseUrl}/files`, formData, {
+      headers: {
+        Accept: 'application/json',
       },
-    );
+    });
 
     onEvent('File has been sent.');
 
@@ -48,15 +65,11 @@ export namespace FiligraneServices {
     do {
       restart = false;
       try {
-        res = await axios.get<ResponseData2>(`https://api.filigrane.beta.gouv.fr/api/document/url/${data.token}`);
-        onEvent(`Trying to retrieve new file for the ${cpt} time.`);
+        onEvent(`Trying to retrieve new file for the ${cpt} time(s).`);
+        res = await axios.get<ResponseData2>(`${baseUrl}/url/${data.token}`);
       } catch (error) {
-        console.log(error);
-
         if (error instanceof AxiosError && error.response) {
-          console.log(error.status);
           if (error.response.status === 404 || error.response.status === 409) {
-            console.log('sleep anbd restart');
             await sleep(1500);
             restart = true;
           }
@@ -68,21 +81,26 @@ export namespace FiligraneServices {
 
     var param = {
       type: 'download',
-      url: `https://api.filigrane.beta.gouv.fr/api/document/${data.token}`,
+      url: `${baseUrl}/${data.token}`,
       filename: file.name,
     };
 
     const test = await axios.get(param.url, {
       responseType: 'blob',
     });
 
-    onEvent('File downloaded.');
+    onEvent('File ready.');
+
+    this.data.get(id)!.filigrane = new File([test.data], `${file.name}-filigrane.pdf`);
 
-    return new File([test.data], `${file.name}-filigrane.pdf`);
-    // let container = new DataTransfer();
-    // container.items.add(newFile);
-    // input.files = container.files;
+    onCompleted();
+  }
 
-    // return data.token
+  public getBlobFor(id: string): Blob {
+    const file = this.data.get(id)!;
+    if (file.filigrane) {
+      return new Blob([file.filigrane], { type: 'application/pdf' });
+    }
+    return new Blob([file.origin], { type: file.origin.type });
   }
 }