En el ámbito del desarrollo web, existen múltiples formas de cargar archivos al recopilar información del usuario. Uno de los métodos es copiar y pegar. Copiar y pegar para ingresar archivos es un método muy intuitivo para cargar archivos de los usuarios. El método de entrada de archivos copiar y pegar libera a los usuarios de la necesidad de memorizar la ubicación del archivo que desean cargar. En este artículo, analizaremos cómo puedes implementar la entrada de archivos copiando y pegando en tu sitio web.

Implementaremos la entrada de archivos de copiar y pegar aprovechando las interfaces ClipboadEvent y EventTarget. La interfaz ClipboardEvent proporciona información sobre el evento de pegado y la interfaz EventTarget nos permite escuchar el evento de pegado.

Mientras escuchamos el evento de pegado, adjuntaremos una función de controlador de eventos donde decidiremos qué hacer con los elementos pegados. En nuestro caso, tomaremos el archivo pegado y lo renderizaremos instantáneamente después de que esté completamente cargado en el navegador. Comenzaremos con el HTML y los estilos.

El HTML y los estilos

Comencemos creando el marcado HTML del área de pegado. El siguiente fragmento de código es el formato HTML:

    
    
    
    


    

        Paste your file here
    
    

    

El fragmento de código anterior muestra un contenedor rectangular dentro del cual podremos pegar archivos. El contenedor tiene un atributo llamado contenteditable establecido en verdadero. El atributo contenteditable es importante para permitir pegar archivos o cualquier otro elemento en el contenedor. Si el atributo contenteditable se cambia a falso o se elimina, la acción de pegar no funcionará como se esperaba. También tenemos un contenedor con el id de vista previa. Usaremos el contenedor de vista previa para obtener una vista previa de la imagen pegada por el usuario.

Agreguemos algunos estilos básicos a nuestro marcado desde style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

La hoja de estilo y marcado anterior crea un contenedor simple con un borde de guión y un mensaje de texto simple, como se muestra en la siguiente captura de pantalla:

Ahora que hemos creado la interfaz de usuario, agreguemos algunas funcionalidades útiles con JavaScript en la siguiente sección.

La secuencia de comandos

En esta sección, usaremos JavaScript para agregar un detector de eventos de pegado al área de pegado. Antes de obtener el área de pegado del DOM para adjuntar el detector de eventos, primero esperamos a que se cargue el contenido del DOM como se muestra en el siguiente fragmento de código.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

En el fragmento de código anterior, agregamos un detector para el evento DOMContentLoaded. Esto nos permite esperar a que se cree el árbol DOM antes de poder obtener los elementos DOM. A continuación, seleccionamos el contenedor del área de pegado y le agregamos un detector de eventos de pegado.

Obtener el archivo de los elementos pegados

El controlador de eventos de pegado no se implementó en el fragmento de código anterior. Implementémoslo obteniendo los datos del objeto de evento y registrándolos en la consola. Haremos más con los datos más adelante en el artículo; por ahora, solo queremos asegurarnos de que los archivos se reciban cuando se peguen elementos en el área de pegado. El siguiente fragmento de código muestra la implementación mínima del controlador de eventos de pegado.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

En el fragmento de código anterior, obtenemos elementos del objeto event.clipboardData. event.clipboardData.items es un DataTransferItemList que es un objeto similar a una lista que contiene el contenido de los elementos pegados. Los elementos se almacenan en una lista porque un usuario puede copiar y pegar varios elementos a la vez.

A continuación, iteramos sobre los elementos usando el bucle for ...of. En el bucle comprobamos si cada uno de los elementos es un archivo. Si el elemento es de king 'file', lo obtenemos como un archivo y lo imprimimos en la consola del navegador.

Imprimir la información del archivo en la consola no es muy útil para los usuarios de su página web. Hagamos algo un poco más interesante en la siguiente sección.

Vista previa del archivo cargado

Sería difícil para un usuario saber que la carga del archivo se realizó correctamente después de pegar los elementos en el portapapeles si no lo mostramos en ninguna parte. Es importante indicar que el archivo se cargó exitosamente mostrando algo que indique éxito. ¿Qué mejor manera de indicar el éxito de una carga que mostrar el archivo cargado?

En esta sección, ampliaremos el controlador de eventos de pegado para crear una URL a partir del archivo recibido. Usaremos la URL creada para representar el archivo una vez que esté cargado en el navegador. Aprovecharemos la API FileReader para crear una URL a partir del archivo codificado en el siguiente fragmento.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

En el fragmento de código anterior, creamos una instancia de FileReader y la usamos para generar la URL de datos. También agregamos un detector de eventos de carga al objeto FileReader donde registramos el resultado de la lectura en la consola. Este es el primer paso para obtener una vista previa del archivo. Ahora podemos usar la URL para mostrar el archivo.

Suponiendo que el usuario pegó archivos de imagen, el siguiente fragmento de código muestra cómo podemos extender el controlador de eventos para crear una URL y mostrar el archivo de imagen.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

En el fragmento de código anterior, obtenemos el contenedor de vista previa del DOM y creamos un elemento img para representar la imagen. Asignamos la URL creada como src de la imagen y agregamos la imagen al contenedor de vista previa. Una vez que la imagen se agrega al contenedor de vista previa, el usuario ahora puede saber que la imagen que pegó se cargó correctamente en la página web.

¡Éxito! Hemos implementado con éxito la carga de archivos mediante copiar y pegar en una página web. Este método de carga de archivos brinda a los usuarios el privilegio de cargar archivos fácilmente sin la necesidad de hacer clic en varios botones para seleccionar el archivo que se cargará. La interfaz ClipboadEvent proporciona una manera sencilla de recopilar datos de elementos pegados en el navegador. La interfaz FileReader nos permite crear una URL a partir del archivo cargado y usarla para obtener una vista previa del archivo cargado.

Siéntete libre de decir algo en la sección de comentarios. Obtenga más información sobre las interfaces ClipBoardEvent y FileReader de MDN.