upload image by url in web ui

2 files changed, 38 insertions, 33 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index f6302516..5402303b 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -324,7 +324,7 @@
                 <select disabled id="msd-image-selector"></select>
               </td>
               <td>
-                <button disabled id="msd-remove-image">Remove</button>
+                <button disabled id="msd-remove-button">Remove</button>
               </td>
             </tr>
           </table>
@@ -348,11 +348,10 @@
             </div>
           </div>
           <hr>
-          <input class="hidden" type="file" id="msd-select-new-image-file">
           <div class="buttons buttons-row">
-            <button class="row50" disabled id="msd-select-new-image-button">Select image to upload</button>
-            <button class="row25" disabled id="msd-upload-new-image-button">Upload</button>
-            <button class="row25" disabled id="msd-abort-uploading-button">Abort</button>
+            <button class="row50" disabled id="msd-select-new-button">Select image to upload</button>
+            <button class="row25" disabled id="msd-upload-new-button">Upload</button>
+            <button class="row25" disabled id="msd-abort-new-button">Abort</button>
           </div>
           <div class="hidden" id="msd-message-another-user-uploads">
             <hr>
@@ -365,32 +364,38 @@
                   </table>
                 </div>
           </div>
-          <div class="hidden" id="msd-submenu-new-image">
+          <div class="hidden" id="msd-new-sub">
             <hr>
             <table class="kv">
               <tr>
-                <td>New image:</td>
-                <td class="value" id="msd-new-image-name"></td>
+                <td>Specify a local file:</td>
+                <td>
+                  <input type="file" id="msd-new-file">
+                </td>
               </tr>
               <tr>
-                <td>Upload size:</td>
-                <td class="value" id="msd-new-image-size"></td>
+                <td><b>Or</b> paste a URL:</td>
+                <td>
+                  <input type="text" id="msd-new-url" style="width: 100%">
+                </td>
               </tr>
             </table>
-            <div class="text">
-              <div class="progress" id="msd-uploading-progress"><span class="progress-value" id="msd-uploading-progress-value"></span></div>
-            </div>
+          </div>
+          <div class="hidden" id="msd-uploading-sub">
             <hr>
             <table class="kv">
               <tr>
-                <td class="value">Tip:</td>
-                <td>To speed up uploading, close the Stream window.</td>
+                <td>New image:</td>
+                <td class="value" id="msd-uploading-name"></td>
               </tr>
               <tr>
-                <td></td>
-                <td>This will save network bandwidth.</td>
+                <td>Upload size:</td>
+                <td class="value" id="msd-uploading-size"></td>
               </tr>
             </table>
+            <div class="text">
+              <div class="progress" id="msd-uploading-progress"><span class="progress-value" id="msd-uploading-progress-value"></span></div>
+            </div>
           </div>
           <hr>
           <div class="buttons buttons-row">
diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug
index 33a56845..dd671f71 100644
--- a/web/kvm/navbar-msd.pug
+++ b/web/kvm/navbar-msd.pug
@@ -37,7 +37,7 @@ li(id="msd-dropdown" class="right feature-disabled")
 			tr
 				td Image:
 				td(width="100%") #[select(disabled id="msd-image-selector")]
-				td #[button(disabled id="msd-remove-image") Remove]
+				td #[button(disabled id="msd-remove-button") Remove]
 		table(class="kv msd-multi-storage feature-disabled")
 			tr(class="msd-cdrom-emulation feature-disabled")
 				td Drive #[a(target="_blank" href="https://github.com/pikvm/pikvm/blob/master/pages/msd.md") mode]:
@@ -53,34 +53,34 @@ li(id="msd-dropdown" class="right feature-disabled")
 				div(id="msd-storage-progress" class="progress")
 					span(id="msd-storage-progress-value" class="progress-value")
 		hr
-		input(type="file" id="msd-select-new-image-file" class="hidden")
 		div(class="buttons buttons-row")
-			button(disabled id="msd-select-new-image-button" class="row50") Select image to upload
-			button(disabled id="msd-upload-new-image-button" class="row25") Upload
-			button(disabled id="msd-abort-uploading-button" class="row25") Abort
+			button(disabled id="msd-select-new-button" class="row50") Select image to upload
+			button(disabled id="msd-upload-new-button" class="row25") Upload
+			button(disabled id="msd-abort-new-button" class="row25") Abort
 		div(id="msd-message-another-user-uploads" class="hidden")
 			hr
 			+menu_message("info", "Another user uploads an image")
-		div(id="msd-submenu-new-image" class="hidden")
+		div(id="msd-new-sub" class="hidden")
+			hr
+			table(class="kv")
+				tr
+					td Specify a local file:
+					td #[input(type="file" id="msd-new-file")]
+				tr
+					td #[b Or] paste a URL:
+					td #[input(type="text" id="msd-new-url" style="width: 100%")]
+		div(id="msd-uploading-sub" class="hidden")
 			hr
 			table(class="kv")
 				tr
 					td New image:
-					td(id="msd-new-image-name" class="value")
+					td(id="msd-uploading-name" class="value")
 				tr
 					td Upload size:
-					td(id="msd-new-image-size" class="value")
+					td(id="msd-uploading-size" class="value")
 			div(class="text")
 				div(id="msd-uploading-progress" class="progress")
 					span(id="msd-uploading-progress-value" class="progress-value")
-			hr
-			table(class="kv")
-				tr
-					td(class="value") Tip:
-					td To speed up uploading, close the Stream window.
-				tr
-					td
-					td This will save network bandwidth.
 		hr
 		div(class="buttons buttons-row")
 			button(disabled id="msd-connect-button" class="row50") Connect drive to Server