Preview image before sending it out

Question

Somwhere around i found code that works fine for drag and drop:

 addImage($event) {

// loading the FileList from the dataTransfer
let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;
if (dataTransfer && dataTransfer.files) {

  // needed to support posting binaries and usual form values
  let files: FileList = dataTransfer.files;

  // uploading the files one by one asynchrounusly
  for (let i = 0; i < files.length; i++) {
    let file: File = files[i];

    // just for debugging
    console.log('Name: ' + file.name + '\n Type: ' + file.type + '\n Size: ' + file.size + '\n Date: ' + file.lastModifiedDate);

    // collecting the data to post
    let data = new FormData();
    data.append('file', file);
    data.append('fileName', file.name);
    data.append('fileSize', file.size.toString());
    data.append('fileType', file.type);
    data.append('fileLastMod', file.lastModifiedDate);


    // posting the data
    let url = 'http://***********.com/gallery/' + this.selectedCategory;
    this._http.post(url, data)
      .toPromise()
      .catch(reason => {
        console.log(JSON.stringify(reason));
      }).then(result => {
      this.getImages();
    });
  }
}

}

But before i send images out, i want them to preview in modal form.

I was thinking about function that will that take 1 param to works, like:

    previewFile(url) {
          let elem = document.createElement("img");
          elem.className = "previewImage";
          elem.src = url
          document.getElementById("previewImages").appendChild(elem);
        }

But how to get the URL ?

Answer 1

Use this code:

elem.src = URL.createObjectURL(file);