How do I retain a file's name when using FileReader readAsDataURL(blob)? Is there a better/different way to upload files from the file browser?

I'm using "Input" to get files in a react app. I'm able to get a blob using readAsDataURL() but it's stripping out the file name and is replacing with "Data". When I log the blob I'm getting "data:image/jpeg;base64,/9j/4QAYRXhpZgAAS..." - "data" being the name that displays.

const handleGetFiles = (e) => {
    const reader = new FileReader();
    reader.readAsDataURL(e);
    reader.onload = () => {
        fileCollection((fileCollection) => [...fileCollection, {id: index, data: reader.result}]);
    }
}
<Input 
  accept="image/*,video/*" 
  id="contained-button-file" 
  multiple type="file" 
  onChange={e => handleGetFiles(e)}
/>

enter image description here

Is there a way to use URL.createObjectURL(file) instead? I can't get that to work either.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum