En este corto post de programación con JS puro vamos a ver cómo resetear, reiniciar, reestablecer o limpiar un elemento input de tipo file.
Explicado con otras palabras veremos cómo eliminar el archivo seleccionado de un input tipo file o input de archivo, para que parezca que no se ha seleccionado un archivo.
Lo haremos con JavaScript puro para que puedas aplicarlo a cualquier framework.
Limpiar input de tipo file en JavaScript
Recordemos que los archivos seleccionados en un input de tipo file están en su propiedad files, pero para restablecerlo y hacer como si el usuario no hubiera seleccionado nada debemos modificar su propiedad value.
Yo esperaría que modificando la propiedad files.length o files a un arreglo vacío el input se limpiara, pero no, debemos modificar el value.
Entonces la línea de código queda así: $elemento.value = ""; es decir, le asignamos una cadena vacía a su value. Y eso va a resetear el seleccionador de archivos.
Obteniendo referencia al elemento
Recuerda que en este caso $elemento es una referencia al elemento HTML del DOM.
Si, por ejemplo, tu input tiene el id archivo entonces podrías obtener una referencia a él con querySelector así:
const $elemento = document.querySelector("#archivo");
Yo he usado esto con JavaScript puro y también con Vue, solo que en Vue utilicé los $refs.
Para terminar te dejo con más tutoriales de JavaScript en mi blog.