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
This commit is contained in:
Adam Rice 2022-09-05 10:05:39 -04:00 committed by GitHub
parent 95c088b303
commit caf4ea3d89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 1 deletions

View File

@ -39,7 +39,7 @@ div {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
border: 1px solid black; border: 1px solid black;
} }
#reset-all { #reset-all, #remove-image {
background-color: pink; background-color: pink;
} }
#results { #results {

View File

@ -72,6 +72,7 @@
<div id="img2img"> <div id="img2img">
<label title="Upload an image to use img2img" for="initimg">Initial image:</label> <label title="Upload an image to use img2img" for="initimg">Initial image:</label>
<input type="file" id="initimg" name="initimg" accept=".jpg, .jpeg, .png"> <input type="file" id="initimg" name="initimg" accept=".jpg, .jpeg, .png">
<button type="button" id="remove-image">Remove Image</button>
<br> <br>
<label for="strength">Img2Img Strength:</label> <label for="strength">Img2Img Strength:</label>
<input value="0.75" type="number" id="strength" name="strength" step="0.01" min="0" max="1"> <input value="0.75" type="number" id="strength" name="strength" step="0.01" min="0" max="1">

View File

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