How do I get the link of the user-provided image?

Question

I'm building a little website where users will be able to paste images into it. I want to get the link for that pasted image. What I get right now is:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZYAAAFWCAYAAABKELsiAAAgAElEQVR4ASy9Wa9s2ZWd9612N9Gc22RHMkmxiupgC4YEw/Cbf1v+NT/6xZBfLFl2SSVWsVhkMvPee05E7L1Xa4wVBFEokJnnnIjYa8055mhmmK+u33Zr4O1oRHOm9AQuYbunUfC9YhxM2ZJWTzoqtkEMjsM2TOvYOtFdw/ZKKLBNFVcM3nQOAj0V3NyJNrIlQyCRGywBggk8cqYYaA1mA2lt2DdH9J6Hz7yznkfNVP3OBkdzhLlg9oi1CeMdbVnp951mEr4vmFbYW8H4wBwyuYMxE9Sd2B3r+ktKO5GOvyf5ii+VDUcPDkcmZDg8UCx2mnD3B61ZStB7N+QWiK3iq8F4DxOUW8Jbi2kH9Au73SmT/rcVsxt4yeQvgWAOfPHMwKvN0AOzTSS9dzqhB5ZSuftANRHfb7ipEXqnVI/LluwMtmZKmDF1o0Q42c4jRUyrxLUz3658aQdz6OwhY7PBlkq3Dmc6vYOzltQbk4XKCec3bO8cdSGag1gMX1wj+kIogdYMR4S5dO7d4TvjzHQ9Tw95hnxYvDO4pL9jaL7jYsJujsNlooV7DYTmaDFjDgMebJyo3HGHJWc9/4XODaO/GyrFdjhOxNNG3wzdF3I6EWzFU8muY2rH4rCxQS8cy8SSCzYH7j0Rq6f3RDtZ+qvFhko3FuMMIXscjeQcNRyEGtkyOA6IntImZvtGygE/d0wy1J7pNTJ5B06ffycshb7pvOlvdfxy5X/+n/4dv/3+a/72b678X//7f+S/f/7MP//zF77Uxl5urLpDOdFdJvWANQ3XI6FWtrWM11luAe87tlUyHtcAnQFj+WqZ+d3X/xY/X/g//9v/gTGWrerzf6N5nYkDYz1m7/To6RUmr9du2Fok+ANXOo1IobNU6C+FvluyLcR0ofKgVEv3FQf0U6DdDmK3mLmT24Sn03qllUacLZu3uDfVAqAlpuXMY7+NM3lzJ+ZUebTE3Gaq/g6dzVmm1jnGuQOfHbkndhfxMbLuO4/WmJ3HVEefCrka3AxBv6FCbgnXT/zu4zd82V552z/x8ND1n3vHxojpmdpPhL6D7qGvUD0PA7YZYoKytvF+MA1untlZjM48AefSeMahJG7mSih3j

And like 500 000 more characters.

This is the code I'm using too get the pasted image:

  document.getElementById('pasteArea').onpaste = function (event) {
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }
  // load image if there is a pasted image
  if (blob !== null) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log(event.target.result); // data url!
      document.getElementById("pastedImage").src = event.target.result;
        console.log(event.target.result);
        alert(event.target.result);
    };
    reader.readAsDataURL(blob);
  }
    }

Then i display it using <div class="absoluteText square"> <img id="pastedImage"/> </div>

I want to be able to easily refer to this image somehow. For example open in in another tab. So how would I go about getting a normal link to that image, preferably user-side?

Answer 1

convert file to blob url. Below code will get all multiple files into array and can be stored in the backend.

var filesArray = new Array();
var file = document.getElementById('XYZ').files[0];
    if(file){
        var reader = new FileReader(); 
        reader.onloadend = function(e) {
            filesArray.push(e.target.result);
        };  
        reader.readAsDataURL(file); 
    }

Below code will fetch the filename (php)

foreach($filesArray as $key => $value){
   $data = explode(',',$value);
   $typeFile = explode('/', $data[0]);
   $extension = explode(';', $typeFile[1]);
   $fileName = base64_decode($data[1]);
}

Save the filename in the database