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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 5,522 suscriptores

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

A %d blogueros les gusta esto: