HomeSegun Adebayo

Set File Input Value

How to set a value on a file input element using programmatically.

  • #typescript
  • #dom
// 1. Get the file input element
const inputEl = document.querySelector('input[type=file]');

// 2. Create a new File object
const myFile = new File(['File content'], 'myFile.md', {
  type: 'text/plain',
  lastModified: new Date(),
});

// 3. Create a new DataTransfer to store the files
const dataTransfer = new DataTransfer();
dataTransfer.items.add(myFile);

// 4. Set the files on the file input element
inputEl.files = dataTransfer.files;

Tweet this snippet

Edit on github

Segun Adebayo

Passionate UI engineer looking to bridge the gap between design and code

All rights reserved © Segun Adebayo 2024