From caf4ea3d8982416dcf5a80fe4601ac4fbc126cc0 Mon Sep 17 00:00:00 2001
From: Adam Rice <adam@askadam.io>
Date: Mon, 5 Sep 2022 10:05:39 -0400
Subject: [PATCH] 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
---
 static/dream_web/index.css  | 2 +-
 static/dream_web/index.html | 1 +
 static/dream_web/index.js   | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/dream_web/index.css b/static/dream_web/index.css
index 072c00d53a7..43218a08abd 100644
--- 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
index 49a0fcccd49..610d8a3a49a 100644
--- 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
index ceaef32f09c..4c87b072c78 100644
--- 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', () => {