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.