Have got removing parameters working

assets/js/controllers/edit_upload.js

@@ -5,7 +5,10 @@ const processorFrame = Handlebars.compile(`
     <div class="card mb-3">
       <div class="card-header d-flex justify-content-between">
         <span>{{name}}</span>
-        <a href="#" class="btn btn-sm btn-secondary float-end">X</a>
+        <a href="#" class="btn btn-sm btn-secondary float-end"
+          data-action="edit-upload#removeProcessor"
+          data-edit-upload-id-param="{{id}}"
+        >X</a>
       </div>
       <div class="card-body">
         {{{props}}}
@@ -13,14 +16,12 @@ const processorFrame = Handlebars.compile(`
     </div>
 `);
 
-const processors = [
-    {
-        name: "shadow",
+const processorUIs = {
+    "shadow": {
         label: "Shadow",
         template: Handlebars.compile(`This processor has no properties.`),
     },
-    {
-        name: "resize",
+    "resize": {
         label: "Resize",
         template: Handlebars.compile(`
             <div class="mb-3">
@@ -32,8 +33,8 @@ const processors = [
               <input name="width" class="form-control" id="{{id}}_width">
             </div>
         `),
-    }
-];
+    },
+};
 
 export default class UploadEditController extends Controller {
     static targets = ['processList', 'preview'];
@@ -54,19 +55,33 @@ export default class UploadEditController extends Controller {
         });
     }
 
+    async removeProcessor(ev) {
+        ev.preventDefault();
+        let id = ev.params.id;
+        console.log(ev.params);
+        await this._removeProcessor(id);
+    }
+
     _rebuildProcessList() {
         let el = this.processListTarget;
 
-        // TEMP
-        let cardTemplate = processors[0].template({
-            "id": "shadow",
-        });
-        let cardOuter = processorFrame({
-            name: processors[0].label,
-            props: cardTemplate,
-        });
-        el.innerHTML = cardOuter;
-        // END TEMP
+        if ((!this._state) || (!this._state.session) || (!this._state.session.processors)) {
+            return;
+        }
+
+        el.innerHTML = "";
+        for (let p of this._state.session.processors) {
+            let ui = processorUIs[p.type];
+            if (!ui) {
+                continue;
+            }
+            let cardOuter = processorFrame({
+                id: p.id,
+                name: ui.label,
+                props: ui.template(p),
+            });
+            el.innerHTML += cardOuter;
+        }
     }
 
     async _createSession() {
@@ -83,9 +98,9 @@ export default class UploadEditController extends Controller {
             });
 
             this._state = await resp.json();
-            this.previewTarget.src = this._state.preview_url;
 
-            console.log("Session created");
+            this._rebuildProcessList();
+            this.previewTarget.src = this._state.preview_url;
         } catch (e) {
             console.error(e);
         }
@@ -103,9 +118,31 @@ export default class UploadEditController extends Controller {
             });
 
             this._state = await resp.json();
+
+            this._rebuildProcessList();
             this.previewTarget.src = this._state.preview_url;
         } catch (e) {
             console.error(e);
         }
     }
+
+    async _removeProcessor(processorID) {
+        await this._doReturningState(async () => {
+            return (await fetch(`/sites/${this.siteIdValue}/imageedit/${this._state.session.guid}/processors/${processorID}`, {
+                method: 'DELETE',
+            })).json();
+        })
+    }
+
+    async _doReturningState(fn) {
+        try {
+            this._state = await fn();
+
+            this._rebuildProcessList();
+            this.previewTarget.src = this._state.preview_url;
+        } catch (e) {
+            console.error(e);
+        }
+
+    }
 }