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', () => {