Updated rename button to fix where it wasn't working on fields with existing values [B:1886]

src/frontend/js/lib/util/upload/UploadControl.ts

@@ -23,6 +23,9 @@ type XmlHttpRequestLike = {
     readyState: number,
     status: number,
     responseText: string,
+    upload?: {
+        onprogress?: ((e: ProgressEvent) => void) | null
+    };
 };
 
 /**
@@ -71,7 +74,10 @@ class Uploader {
             request.open(this.method, this.url.toString());
             request.onabort = () => reject('aborted');
             request.onerror = () => reject('error');
-            request.onprogress = (e: ProgressEvent) => this.onProgressCallback?.(e.loaded, e.total);
+            request.upload.onprogress = (e: ProgressEvent) => {
+                if(!e.lengthComputable) this.onProgressCallback?.(e.loaded, 0);
+                this.onProgressCallback?.(e.loaded, e.total);
+            }
             request.onreadystatechange = () => {
                 if (request.readyState === 4) {
                     if (request.status === 200) {

src/frontend/testing/globals.definitions.ts

@@ -56,6 +56,9 @@ export class MockXhr implements XmlHttpRequestLike {
     readyState: number = 4;
     status: number = 200;
     responseText: string = JSON.stringify({error: 0});
+    upload = {
+        onprogress: jest.fn()
+    }
 }
 
 export interface ElementLike {

views/edit.tt

@@ -879,9 +879,11 @@
           '<ul class="list__items fileupload__files">';
             FOREACH file IN editvalue.files;
             '<li class="list__item">';
+              '<div class="row">';
+                '<div class="col-auto align-content-center">';
               '<span class="list__key">';
                 INCLUDE fields/sub/checkbox.tt
-                  id      = "file_checkbox_" _ col.id _ "_" _ file.id
+                  id      = "file-" _ file.id
                   name    = field
                   label   = "Include file."
                   value   = file.id
@@ -895,10 +897,13 @@
               '</span>';
               '<span class="list__value">';
                 'Current file name: ';
-                '<a class="link link--plain" href="' _ url.page _ '/file/' _ file.id _'">';
+                '<a class="link link--plain" href="' _ url.page _ '/file/' _ file.id _'" id="current-'_ file.id _'">';
                   file.name | html;
-                '</a>.';
+                '</a>';
+                '<button data-field-id="' _ file.id _ '" class="rename btn btn-plain btn-small btn-sm py-0"></button>';
               '</span>';
+              '</div>';
+              '</div>';
             '</li>';
             END;
              '</li>';