preview-file-callback.js

const generatePreviewData = (file, callback) => {
  const fr = new FileReader();
  fr.addEventListener('load', (e) => {
    if(callback && typeof callback === 'function') callback(fr.result);
  });
  fr.readAsDataURL(file);
}

preview-file-promise.js

const generatePreviewData = (file) => {
  const fr = new FileReader();
  return new Promise((resolve, reject) => {
    fr.addEventListener('load', (e) => {
      resolve(fr.result);
    });
    fr.addEventListener('error', (e) => {
      reject();
    });
    fr.readAsDataURL(file);
  });
}

script-callback.js

// Import the generatePreviewData function as following ways:
// const generatePreviewData = require('./preview-file');
// or <script src="./preview-file.js"></script>
// OR copy and paste above function in the same file of usage
const photo = document.querySelector('#photo');
generatePreviewData(photo.files[0], (data) => {
  const img = document.createElement('img');
  img.src = data;
  img.height = 200;
  document.body.appendChild(img)
})

script-promise.js

// Import the generatePreviewData function as following ways:
// const generatePreviewData = require('./preview-file');
// or <script src="./preview-file.js"></script>
// OR copy and paste above function in the same file of usage
const photo = document.querySelector('#photo');
generatePreviewData(photo.files[0])
  .then((data) => {
    const img = document.createElement('img');
    img.src = data;
    img.height = 200;
    document.body.appendChild(img)
  })