Add a 'Remove Image' button to clear the file upload field (#382)

* added "remove image" button * styled a new "remove image" button * Update index.js
invoke-ai · Sep 5, 2022 · caf4ea3 · caf4ea3
1 parent 95c088b
commit caf4ea3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/static/dream_web/index.css b/static/dream_web/index.css
@@ -39,7 +39,7 @@ div {
     padding: 5px 10px 5px 10px;
     border: 1px solid black;
 }
-#reset-all {
+#reset-all, #remove-image {
     background-color: pink;
 }
 #results {

diff --git a/static/dream_web/index.html b/static/dream_web/index.html
@@ -72,6 +72,7 @@ <h2 id="header">Stable Diffusion Dream Server</h2>
 	<div id="img2img">
           <label title="Upload an image to use img2img" for="initimg">Initial image:</label>
           <input type="file" id="initimg" name="initimg" accept=".jpg, .jpeg, .png">
+          <button type="button" id="remove-image">Remove Image</button>
 	  <br>
           <label for="strength">Img2Img Strength:</label>
           <input value="0.75" type="number" id="strength" name="strength" step="0.01" min="0" max="1">

diff --git a/static/dream_web/index.js b/static/dream_web/index.js
@@ -149,6 +149,9 @@ window.onload = () => {
     document.querySelector("#reset-all").addEventListener('click', (e) => {
         clearFields(e.target.form);
     });
+    document.querySelector("#remove-image").addEventListener('click', (e) => {
+        initimg.value=null;
+    });
     loadFields(document.querySelector("#generate-form"));
 
     document.querySelector('#cancel-button').addEventListener('click', () => {