I'm always confused, so I'll summarize it.

Premise

<input type=file name=logo_image /> <!-- （１） -->
<figure id=thumb_logo_image><img/></figure> <!-- （２） -->
<input type=hidden name=remove_logo_image value=on /> <!-- （３） -->
<button id=btn_remove_logo_img /> <!-- （４）-->

――Suppose there is such an element --If there is a saved file, the thumbnail will be displayed in (2). --Suppose you set thumbnails in (2) with JS immediately after selecting a file. -* Not sent to the server yet --Suppose that the saved file can be deleted by setting the value to remove_attribute name and sending it. --It is assumed that even if you send a new file with the value in the delete field, it will be properly replaced with the new file. -When the delete button of (4) is pressed, it is assumed that (2) thumbnail, (3) delete field, and (4) delete button disappear from HTML.

Washing out the condition

--Are there any saved files? --Whether a new file is selected or not --Whether you returned with the "Cancel" button after displaying the file selection dialog --Whether the delete button was pressed or not --Whether you selected the file again after the delete button was pressed --If you select a new file with a saved file, but cancel the new file

Identifying state variables

Object savedValue --Saved file
String savedValueUrl --URL for thumbnail of saved file
Object inputValue --Newly selected file -* (1) Value value of file field -* Due to the specifications of the file field, it cannot be reset from JS and only reset (null substitution) is possible.
String inputValueUrl --URL for thumbnail of newly selected file
Bool thumbVisible -(2) Whether to display thumbnails
String thumbSrc -(2) Value to be set in the thumb tag
- savedValueUrl or inputValueUrl
Bool readyToRemove -(3) Whether to delete the saved file
Bool removeBtnVisible -(4) Whether to display the delete button

Status confirmation sheet

--Assuming that operation check is completed by repeating reloading and operation for this number of lines -* The cells null and false are omitted. Because it became hard to see

(1).. inputValue -(2) .. thumbSrc and thumbVisible
(3).. readyToRemove
(4).. removeBtnVisible

If there is no saved file

operation\| (1)	(2)	(3)
initial state
File selected	Object	`inputValueUrl`
After selecting a file The delete button was pressed
After selecting a file The file selection was opened again Cancel was pressed

If you have a saved file

operation\| (1)	(2)	(3)	(4)
initial state		`savedValueUrl`
The delete button was pressed			true
File selected	Object	`inputValueUrl`
The file selection was opened Cancel was pressed		`savedValueUrl`
From the Delete button is pressed File selected	Object	`inputValueUrl`
Since the file selection The delete button was pressed		`savedValueUrl`
After the file is selected The delete button is pressed The delete button was pressed again			true
After the file is selected The delete button is pressed The file selection was opened again Cancel was pressed		`savedValueUrl`

end

Ah confusing

File form status check sheet that can be deleted with thumbnails