create a file preview in javascript

<form>
  <input type="file" id="fileInput">
</form>
52 chars
4 lines

index.tsx
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  // do something with the file
});
181 chars
7 lines

index.tsx
const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
const previewImage = previewContainer.querySelector('.preview-image');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', () => {
    previewImage.setAttribute('src', reader.result);
  });

  reader.readAsDataURL(file);
});
458 chars
15 lines

.preview-container {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  margin-top: 20px;
}
157 chars
12 lines