Back in this post, I wrote about previewing a file before uploading it. I had taken someone else’s concept and did my own version of it to suit my own needs. Recently, someone asked me how to clear the file selection. I’m not sure if that what was they asked, but here is what I did to achieve that goal.

Add Clear Button

I added a clear button and changed some of the page styles to make it look reasonable. These are just portions of the implementation files that had changes, not the entire files.

JavaScript Clear Function

I wrote a minimal JavaScript function to reset the entire form. This clears the file upload filed in a way that should be compatible with every browser. I’m not sure if a file upload input field can be cleared by setting the values, since the value is often only readable for security reasons, and even then only contains a fake file path.

This should satisfy the simplistic need to “unselect” a file for upload. if the only need is to let the user pick another file, picking another will simply overwrite the first. There is no need to clear anything between selecting one file and another. This is something that I just threw together so take it as-is.