webdev/page2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CrunchTime</title>
  <link rel="stylesheet" href="style2.css"/>
</head>
<body>
<section>
  <div id="drop-area">
    <form class="my-form">
      <span></span><p>Drop image here</p></span>
      <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
      <label class="button" for="fileElem">Select some files</label>
    </form>
    <progress id="progress-bar" max=100 value=0></progress>
  </div>
  <div class="circle__wrapper"></div>
  <header>
    <a href="page1.html"><img src="logo.png" class="logo"/></a>
    <div class="toggle" onclick="toggleMenu();"></div>
    <ul>
      <li><a href="page1.html">Home</a></li>
      <li><a href="page2.html">Tools</a></li>
      <li><a href="page3.html">What's new</a></li>
      <li><a href="page4.html">Contact</a></li>
    </ul>
  </header>

  <div class="content">
    <div class="textBox">
    </div>
  </div>

  <ul class="sci">
    <li><a href="#"><img src="facebook.png"></img></a></li>
    <li><a href="#"><img src="twitter.png"></img></a></li>
    <li><a href="#"><img src="instagram.png"></img></a></li>
  </ul>
</section>

<script type="text/javascript">

  function toggleMenu() {
    var menuToggle = document.querySelector('.toggle')
    var navigation = document.querySelector('.navigation')
    menuToggle.classList.toggle('active')
    navigation.classList.toggle('active')
  }

  let dropArea = document.getElementById("drop-area")

// Prevent default drag behaviors
  ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)
    document.body.addEventListener(eventName, preventDefaults, false)
  })

// Highlight drop area when item is dragged over it
  ;['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false)
  })

  ;['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false)
  })

  // Handle dropped files
  dropArea.addEventListener('drop', handleDrop, false)

  function preventDefaults (e) {
    e.preventDefault()
    e.stopPropagation()
  }

  function highlight(e) {
    dropArea.classList.add('highlight')
  }

  function unhighlight(e) {
    dropArea.classList.remove('active')
  }

  function handleDrop(e) {
    var dt = e.dataTransfer
    var files = dt.files

    handleFiles(files)
  }

  let uploadProgress = []
  let progressBar = document.getElementById('progress-bar')

  function initializeProgress(numFiles) {
    progressBar.value = 0
    uploadProgress = []

    for(let i = numFiles; i > 0; i--) {
      uploadProgress.push(0)
    }
  }

  function updateProgress(fileNumber, percent) {
    uploadProgress[fileNumber] = percent
    let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
    progressBar.value = total
  }

  function handleFiles(files) {
    files = [...files]
    initializeProgress(files.length)
    files.forEach(uploadFile)
    files.forEach(previewFile)
  }

  function previewFile(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onloadend = function() {
      let img = document.createElement('img')
      img.src = reader.result
      document.getElementById('gallery').appendChild(img)
    }
  }

  function uploadFile(file, i) {
    var url = 'https://api.cloudinary.com/v1_1/joezimim007/image/upload'
    var xhr = new XMLHttpRequest()
    var formData = new FormData()
    xhr.open('POST', url, true)
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

    // Update progress (can be used to show progress indicator)
    xhr.upload.addEventListener("progress", function(e) {
      updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
    })

    xhr.addEventListener('readystatechange', function(e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        updateProgress(i, 100) // <- Add this
      }
      else if (xhr.readyState == 4 && xhr.status != 200) {
        // Error. Inform the user
      }
    })

    formData.append('upload_preset', 'ujpu6gyk')
    formData.append('file', file)
    xhr.send(formData)
  }
</script>
</body>
</html>