Global file list

formularioContacto.js

window.addEventListener("load", function () {
  const form = document.getElementById("formulario")
  const titleName = document.querySelector(".error-name")
  const email = document.querySelector("#email")
  const name = document.querySelector("#nombre")
  const titleMail = document.querySelector(".error-email")
  const dropArea = document.querySelector(".dragArea")
  const dragText = dropArea.querySelector("h4")
  const button = dropArea.querySelector("button")
  const input = dropArea.querySelector("#input-file")
  const filesFinal = []
  window.filesFinal = filesFinal;




  form.addEventListener("submit", (e) => {

    let errors = []


    if (name.value.length < 6 ) {
      name.style.border = "1px solid red"
      errors.push("El nombre debe poseer más caracteres");
    };

    if (name.value == "" ) {
      name.style.border = "1px solid red"
      errors.push("El nombre debe poseer más caracteres");
    };

    if (email.value == "" ) {
      email.style.border = "1px solid red"
      errors.push("El email debe poseer más caracteres")
    };

    if (!email.value.includes("@")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo electrónico válido por favor")

    }

    if (name.value.includes("/")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un nombre válido por favor")

    }

    if (email.value.includes("/")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo elctrónico válido por favor")
    }


    if (email.value.includes("||")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo electrónico válido por favor")
    }

    if (email.value.includes("|")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo electrónico válido por favor")
    }

    if (email.value.includes("%")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo electrónico válido por favor")
    }

    if (email.value.includes("#")) {
      email.style.border = "1px solid red"
      errors.push("Ingrese un correo electrónico válido por favor")
    }


    name.addEventListener("keyup", (e) => {

      if (name.value.length > 0) {

        name.style.border = "1px solid red"


      }
    })
    name.addEventListener("keyup", function (e) {
      if (name.value.length > 5) {
        name.style.border = "2px solid green"
        titleName.innerHTML = " "
      }

    })


    email.addEventListener("keyup", function (e) {
      if (email.value.length > 0 || !(email.value.includes("@"))) {
        email.style.border = "1px solid red"
        errors.push("El mail debe contener más caracteres")
      }
    })

    email.addEventListener("keyup", function (e) {
      if (email.value.length > 5) {
        email.style.border = "2px solid green"
        titleMail.innerHTML = " "
      }
    })

    if (errors.length > 0) {
      e.preventDefault();

      alert("Revise los errores para poder continuar")
      alert(errors);
    }

  })
  console.log(input)


  button.addEventListener("click", (e) => {
    e.preventDefault()
    input.click()
  })

  input.addEventListener("change", (e) => {
    dropArea.classList.add("active")

    dropArea.classList.remove("active")
  })

//cuando los archivos están encima

  dropArea.addEventListener("dragover", (e) => {
    e.preventDefault()
    dropArea.classList.add("active")
    dragText.textContent = "Suelte para cargar los archivos"
  })

//cuando te vas

  dropArea.addEventListener("dragleave", (e) => {
    e.preventDefault()
    dropArea.classList.remove("active")
    dragText.innerHTML = "arroz con tuco"
  })

  //`<h4>Para cargar varias imagenes arrastre y suelte las imagenes en la caja, o haga <button class="click">click aquí</button></h4>`;

  //cuando lo soltas
  dropArea.addEventListener("drop", (e) => {
    e.preventDefault()
    files = e.dataTransfer.files

   e.dataTransfer.files.forEach(x => filesFinal.push(x))

   showFiles(files)
   if (input.hasOwnProperty('files') === "true"){
            //input.files.push(files)
    				e.dataTransfer.files.forEach(x => input.files.push(x))
   } else {
     input.files = files
   }
    dropArea.classList.remove("active")
    dragText.textContent = "Arrastre y suelte imágenes o haga click"
  })

  console.log(input.value)
  function showFiles() {
    if (files.length == undefined) {
      processFile(files)
    } else {
      for (let file of files) {
        processFile(file)
      }
    }
  }

  function processFile(file) {
    const docType = file.type
    const validExtensions = ["image/jpeg", "image/jpg", "image/png"]

    if (validExtensions.includes(docType)) {
      const fileReader = new FileReader()
      const id = `file-${Math.random().toString(32).substring(7)}`

      fileReader.addEventListener("load", (e) => {
        const fileUrl = fileReader.result
        const image = `    <div id="${id}" class="file-container">


             <div class="status">
              <span> ${file.name}</span>
              </div>

       </div>`
        const html = document.querySelector("#preview").innerHTML
        document.querySelector("#preview").innerHTML = image + html
      })

      fileReader.readAsDataURL(file)

    } else {
      alert("No se ha ingresado una imagen válida")
    }
  }



})