Bit of cleanup, fixed album creation

src/files/templates/upload.html

@@ -36,10 +36,6 @@
     <span class="sr-only">Loading...</span>
   </button>
   <script src={% static 'js/upload.js' %}></script>
-  <img id="preview">
-  <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-      <div class="progress-bar" style="width: 0%"></div>
-  </div>
   <div class="modal fade" id="image-editor-modal" tabindex="-1" aria-labelledby="ImageEditorModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-fullscreen">
           <div class="modal-content">

src/static_src/js/grinder.js

@@ -26,7 +26,7 @@ UC.onFinished = (active) => {
 }
 
 UC.onDeQueue = (active, jobs, current, total, _element) => {
-  UC.log(`Active jobs: ${active} left in Queue: ${jobs} Current: ${current} Total: ${total}`)
+  console.log(`Active jobs: ${active} left in Queue: ${jobs} Current: ${current} Total: ${total}`)
   if (jobs > 0) {
     const pct = ((current - jobs + 1)/current*100);
     document.getElementsByClassName('progress-bar').item(0).setAttribute('aria-valuenow', pct);

src/static_src/js/upload.js

@@ -8,20 +8,12 @@ const UC = new UploadClient(client_id, () => {
   console.log("Loaded UC client");
 });
 
-UC.onDeQueue = (active, jobs, current, total, _element) => {
-  UC.log(`Active jobs: ${active} left in Queue: ${jobs} Current: ${current} Total: ${total}`)
-  if (jobs > 0) {
-    const pct = ((current - jobs + 1)/current*100);
-    document.getElementsByClassName('progress-bar').item(0).setAttribute('aria-valuenow', pct);
-    document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pct)+'%');
-  }
-}
-
 //Init base variables
 var dropzone = undefined;
 var ImageEditorModal = undefined;
 var ImageEditor = undefined;
 var ImageEditorOrgFile = undefined;
+var ImageUploadList = [];
 tui.usageStatistics = false
 
 jQuery(document).ready(function () {
@@ -154,10 +146,9 @@ jQuery(document).ready(function () {
   dropzone.on("success", file => {
     const resp = JSON.parse(file.xhr.response);
     const uuid = resp.bma_response.uuid;
-    const source_url = resp.bma_response.links.downloads.original;
 
-    //Queue file for jobs fetching and processing
-    UC.addUploadedFile(uuid, source_url, file);
+    //Append images to make album when done
+    ImageUploadList.push(uuid)
 
     //Make BMA scripts happy
     const index = formdatas.indexOf(file.name);
@@ -166,20 +157,19 @@ jQuery(document).ready(function () {
     }
     //Trigger BMA script enableUploadButton
     enableUploadButton();
-
-    UC.startGrinder();
   });
 
   //Event triggered after its done uploading a batch
   dropzone.on("complete", _file => {
-    UC.processNextJob();
     dropzone.processQueue();
   })
 
   //Event triggered after its done uploading
   dropzone.on("queuecomplete", _file => {
     const now = new Date;
-    UC.createAlbum(`Uploaded ${now.toISOString()}`,"") 
+    console.log("Adding album for", ImageUploadList)
+    UC.createAlbum(`Uploaded ${now.toISOString()}`,"", ImageUploadList);
+    ImageUploadList = [];
   })
 });
 

src/static_src/js/uploadClient.js

@@ -21,7 +21,7 @@ class UploadClient {
     this.bma_version = JSON.parse(document.getElementById('bma_version').textContent);
     this.client_version = `js-client - BMA ${this.bma_version}`;
     this.activeJobs = 0;
-    this.maxConcurrent = 6;
+    this.maxConcurrent = 2;
     this.skip_jobs = [];
     this.source_file_store = {};
     this.job_queue = [];
@@ -293,7 +293,14 @@ class UploadClient {
           "Authorization": `Bearer ${this.oauth.token}`,
         },
       });
-      return { url: file_url, file: await result.blob() }
+      const file = await result.blob();
+      const header = result.headers.get('Content-Disposition');
+      const parts = header.split(';');
+      const filename = parts[1].split('=')[1];
+      if (filename.endsWith(".webp\"")) {
+        return { url: file_url, file: new Blob([file], {type:"image/webp"})}
+      }
+      return { url: file_url, file: file }
     } catch (error) {
       console.log(error.message);
       return [];
@@ -457,15 +464,16 @@ class UploadClient {
    *
    * @param {string} name - Name of the album.
    * @param {string} description - Description of the album.
+   * @param {array} files - List of file uuids to create a album with. 
    * @returns {array} bma_response 
    */
-  async createAlbum(name, description) {
-    var data = {
+  async createAlbum(name, description, files = this.finished) {
+    const data = {
       'title': name,
       'description': description,
-      'files': this.finished,
+      'files': files,
     }
-    if (this.finished.length === 0) return
+    if (files.length === 0) return
     try {
       const response = await fetch(`/api/v1/json/albums/create/`, {
         headers: {