Track upload progress using Base64

Asked

Viewed 27 times

0

I have the following code

function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
      console.log(e.target.result)	
      
      $.ajax({
        url: "https://postman-echo.com/post",
        type: 'POST',
        data: { 
            imageBase64:e.target.result
        },
        dataType: 'json',
        success: function(data) { 
            console.log(data)
        },
        error: function(xhr, ajaxOptions, thrownError) {
            if (xhr.status == 404) {
                console.log("error")
            } 
        }
    });
      
      
      
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
  
}

document.getElementById("inp").addEventListener("change", readFile);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

I would like to track the image upload progress, using Base64, with pure javascript or jquery.

It is possible ?

  • Do you want to do "Load Bar" with Base64? Wouldn’t it be better with CSS?

  • I want to track the progress of sending Base64 to my server.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.