Drag and Drop con Ajax

15-4-2020

Para usar Drag and Drop con Ajax, tenemos primeramente que indicar una zona que será la que tendrá el escuchador. Ese escuchador va a estar atento a cuándo alguien pasar por arriba con el mouse cargado de un archivo que ha seleccionado y cuándo lo larga.

Le damos un poco de estilo con CSS primero.

    <style>
        #drop {
            width: 300px;
            height: 300px;
            border: 2px dashed blue;
            color: red;
            text-align: center;
            line-height: 300px;
            font-size: 22px;
        }

        input {
            display: none;
        }

        label {
            display: block;
            width: 100%;
            height: 100%;
        }

    </style>

Y luego metemos el recuadro en nuestro HTML:

    <!-- barra de progreso -->
    <progress min="0" max="100" value="0"></progress> <span></span>
    <br><br>

    <!-- Menu drag and drop y input file -->
    <!-- <label>texto <input type="text"></label> -->
    <input id="texto" type="file">
    <div id="drop">
        <label for="texto">Drag And Drop ó Click Me!</label>
    </div>
    <hr>
    <!-- imagen -->
    <img src="" alt="">

 

function cargarImagen(imagen) {
    let img = document.querySelector('img')
    let progress = document.querySelector('progress')
    let span = document.querySelector('span')
    img.src = ''
    progress.value = 0
    span.innerHTML = '0%'

    let xhr = new XMLHttpRequest
    xhr.responseType = 'blob'
    
    let urlSinCache = imagen + '?' + Date.now()
    console.log(urlSinCache)

    xhr.open('get', urlSinCache)
    xhr.addEventListener('load', () => {
        if(xhr.status == 200) {
            let imagenBlob = xhr.response
            console.log(imagenBlob)
            let url = URL.createObjectURL(imagenBlob)
            console.log(url)

            //let img = document.createElement('img')
            //img.src = url
            //document.body.appendChild(img)
            img.src = url
        }
    })

    xhr.addEventListener('progress', e => {
        //console.log('descargando....')
        //console.log(e)
        if(e.lengthComputable) {
            let porcentaje = parseInt((e.loaded * 100) / e.total)
            //console.log(porcentaje + '%')
            progress.value = porcentaje
            span.innerHTML = porcentaje + '%'
        }
    })

    xhr.send()
}

/* ------------------------ */
/*  CONTROL POR INPUT FILE  */
/* ------------------------ */
let input = document.querySelector('input')
input.addEventListener('change', () => {
    //console.log(input.value)
    let archivo = input.files[0].name
    console.log(archivo)
    cargarImagen(archivo)
})

/* ------------------------- */
/* CONTROL POR DRAG AND DROP */
/* ------------------------- */
let drop = document.getElementById('drop')

drop.addEventListener('dragenter', e => {
    e.preventDefault()
    console.log('Estoy adentro del drop')
})

drop.addEventListener('dragleave', e => {
    e.preventDefault()
    console.log('Estoy afuera del drop')
})

drop.addEventListener('dragover', e => {
    e.preventDefault()
    console.log('Estoy encima del drop')
})

drop.addEventListener('drop', e => {
    e.preventDefault()
    //console.log('Solté el recurso')
    let archivo = e.dataTransfer.files[0].name
    console.log(archivo)
    cargarImagen(archivo)
})