Yet another data URI generator, file to base64 converter, every other combination of these terms.

Data URI Drag & Drop

Dropping large files will eat lots of memory, but should eventually resolve.

Source

const output = document.querySelector('.output');
let uploaded_files = {};
function readFile(file) {
  const reader = new FileReader();
  reader.addEventListener('load', () => {
    uploaded_files = R.merge(
      uploaded_files,
      {
        [`${file.name}_${Date.now()}`]: reader.result,
      }
    );
    const purposed_output = JSON.stringify(uploaded_files, null, 2);
    if (purposed_output !== output.textContent) {
      requestAnimationFrame(() => output.textContent = purposed_output);
    }
  });
  reader.readAsDataURL(file);
}

output.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
}, true);

output.addEventListener('drop', (event) => {
  event.preventDefault();
  event.stopPropagation();

  const data_transfer = event.dataTransfer;
  if (data_transfer.items) {
    for (let i = 0; i < data_transfer.items.length; i++) {
      if (data_transfer.items[i].kind === 'file') {
        readFile(data_transfer.items[i].getAsFile());
      }
    }
  } else {
    for (let i = 0; i < data_transfer.files.length; i++) {
      readFile(data_transfer.files[i].name);
    }
  }
});