joyonto511

Progress Bar

Apr 6th, 2021
325
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. console.log('hello world')
  2.  
  3. const uploadForm = document.getElementById('upload-form')
  4. const input = document.getElementById('id_image')
  5. const uploadButton = document.getElementById('upload-button')
  6. console.log(input)
  7.  
  8. const alertBox = document.getElementById('alert-box')
  9. // const imageBox = document.getElementById('image-box')
  10. const progressBox = document.getElementById('progress-box')
  11. const cancelBox = document.getElementById('cancel-box')
  12. const cancelBtn = document.getElementById('cancel-btn')
  13.  
  14. const csrf = document.getElementsByName('csrfmiddlewaretoken')
  15.  
  16. uploadButton.addEventListener('click', ()=>{
  17.     progressBox.classList.remove('not-visible')
  18.     cancelBox.classList.remove('not-visible')
  19.  
  20.     const img_data = input.files[0]
  21.     const url = URL.createObjectURL(img_data)
  22.     console.log(img_data)
  23.  
  24.     const fd = new FormData()
  25.     // fd.append('csrfmiddlewaretoken', csrf[0].value)
  26.     fd.append('image', img_data)
  27.  
  28.     $.ajax({
  29.         type:'POST',
  30.         url: 'http://127.0.0.1:8005/upload/',
  31.         enctype: 'multipart/form-data',
  32.         data: fd,
  33.         headers: {'Authorization':'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIi' +
  34.             'wiZXhwIjoxNjE3Nzk1MzUyLCJqdGkiOiI3NmEzODA1Y2FjOTg0MWE1Yjc0MmZhMWQ2NjAxMGM4ZCIsInV' +
  35.             'zZXJfaWQiOjJ9.LYtEv7Resw9klU-ISqYjj3D2EPg4U-aJFTXwqTB9k0U'},
  36.  
  37.         beforeSend: function(){
  38.             console.log('before')
  39.             alertBox.innerHTML= ""
  40.             // imageBox.innerHTML = ""
  41.         },
  42.         xhr: function(){
  43.             const xhr = new window.XMLHttpRequest();
  44.             xhr.upload.addEventListener('progress', e=>{
  45.                 // console.log(e)
  46.                 if (e.lengthComputable) {
  47.                     const percent = e.loaded / e.total * 100
  48.                     console.log(percent)
  49.                     progressBox.innerHTML = `<div class="progress">
  50.                                                 <div class="progress-bar" role="progressbar" style="width: ${percent}%" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100"></div>
  51.                                             </div>
  52.                                             <p>${percent.toFixed(1)}%</p>`
  53.                 }
  54.  
  55.             })
  56.             cancelBtn.addEventListener('click', ()=>{
  57.                 xhr.abort()
  58.                 setTimeout(()=>{
  59.                     uploadForm.reset()
  60.                     progressBox.innerHTML=""
  61.                     alertBox.innerHTML = ""
  62.                     cancelBox.classList.add('not-visible')
  63.                 }, 2000)
  64.             })
  65.             return xhr
  66.         },
  67.         success: function(response){
  68.             console.log(response)
  69.             // imageBox.innerHTML = `<img src="${url}" width="300px">`
  70.             alertBox.innerHTML = `<div class="alert alert-success" role="alert">
  71.                                     The file has been uploaded successfully
  72.                                 </div>`
  73.             cancelBox.classList.add('not-visible')
  74.         },
  75.         error: function(error){
  76.             console.log(error)
  77.             alertBox.innerHTML = `<div class="alert alert-danger" role="alert">
  78.                                     Ups... something went wrong
  79.                                 </div>`
  80.         },
  81.         cache: false,
  82.         contentType: false,
  83.         processData: false,
  84.     })
  85. })
  86.  
  87.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×