[PATCH manager 1/2] fix #8015: ui: upload: let the user choose the .img image format

[Michal Fox <me@dualfroz.com>]

When uploading a '.img' file as import content, '.raw' is appended to
the file name, so the image is always treated as a raw image. But the
'.img' extension is also commonly used for other formats, for example
the Ubuntu cloud images are qcow2 images. Such an image is then
imported as raw disk, which results in a disk with the size of the
qcow2 file and a guest that does not boot.

The format cannot be derived from the '.img' extension, so show a
format selector for such files and only append the extension of the
selected format to the file name. The upload stays disabled until a
format is selected, so the choice is always an explicit one.

Signed-off-by: Michal Fox <me@dualfroz.com>
---
 www/manager6/window/UploadToStorage.js | 45 +++++++++++++++++++-------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/www/manager6/window/UploadToStorage.js b/www/manager6/window/UploadToStorage.js
index cc53596d..54af1603 100644
--- a/www/manager6/window/UploadToStorage.js
+++ b/www/manager6/window/UploadToStorage.js
@@ -14,11 +14,10 @@ Ext.define('PVE.window.UploadToStorage', {
         vztmpl: ['.tar.gz', '.tar.xz', '.tar.zst'],
     },
 
-    // accepted for file selection, will be renamed to real extension
-    extensionAliases: {
-        import: {
-            '.img': '.raw',
-        },
+    // accepted for file selection, but the extension does not tell the image format, so the user
+    // has to select it and it gets appended as real extension
+    formatAliases: {
+        import: ['.img'],
     },
 
     cbindData: function (initialConfig) {
@@ -27,7 +26,7 @@ Ext.define('PVE.window.UploadToStorage', {
 
         me.url = `/nodes/${me.nodename}/storage/${me.storage}/upload`;
 
-        let fileSelectorExt = ext.concat(Object.keys(me.extensionAliases[me.content] ?? {}));
+        let fileSelectorExt = ext.concat(me.formatAliases[me.content] ?? []);
 
         return {
             extensions: fileSelectorExt.join(', '),
@@ -40,6 +39,7 @@ Ext.define('PVE.window.UploadToStorage', {
             size: '-',
             mimetype: '-',
             filename: '',
+            needsFormat: false,
         },
     },
 
@@ -154,12 +154,12 @@ Ext.define('PVE.window.UploadToStorage', {
             const me = this;
             const vm = me.getViewModel();
             const view = me.getView();
-            let name = input.value.replace(/^.*(\/|\\)/, '');
-            for (const [alias, real] of Object.entries(view.extensionAliases[view.content] ?? {})) {
-                if (name.endsWith(alias)) {
-                    name += real;
-                }
-            }
+            const name = input.value.replace(/^.*(\/|\\)/, '');
+            const aliases = view.formatAliases[view.content] ?? [];
+            const needsFormat = aliases.some((alias) => name.endsWith(alias));
+            me.selectedName = name;
+            vm.set('needsFormat', needsFormat);
+            me.lookup('imageFormat').setValue(null);
             const fileInput = input.fileInputEl.dom;
             vm.set('filename', name);
             vm.set(
@@ -178,6 +178,12 @@ Ext.define('PVE.window.UploadToStorage', {
                 checksum.setDisabled(false);
             }
         },
+
+        formatChange: function (field, format) {
+            if (format) {
+                this.getViewModel().set('filename', `${this.selectedName}.${format}`);
+            }
+        },
     },
 
     items: [
@@ -220,6 +226,21 @@ Ext.define('PVE.window.UploadToStorage', {
                     },
                     regexText: gettext('Wrong file extension'),
                 },
+                {
+                    xtype: 'pveDiskFormatSelector',
+                    reference: 'imageFormat',
+                    fieldLabel: gettext('Format'),
+                    allowBlank: false,
+                    hidden: true,
+                    disabled: true,
+                    bind: {
+                        hidden: '{!needsFormat}',
+                        disabled: '{!needsFormat}',
+                    },
+                    listeners: {
+                        change: 'formatChange',
+                    },
+                },
                 {
                     xtype: 'displayfield',
                     name: 'size',
-- 
2.43.0