Author: John Au-Yeung

Sometimes, we want to get the filename from the JavaScript FileReader.

In this article, we’ll look at how to get the filename from the JavaScript FileReader.

How to get the filename from the JavaScript FileReader?

To get the filename from the JavaScript FileReader, we can use the fileName property of the selected file.

For instance, we write:

<input type='file'>

to add a file input.

Then we write:

const reader = new FileReader();
reader.onload = (readerEvt) => {
  console.log(readerEvt.target);
};

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = e.target.files
  console.log(file.name)
  reader.readAsDataURL(file)
})

to create the FileReader instance.

We select the input with document.querySelector.

Then we add a change event handler to the input with addEventListener.

In the event handler, we get the selected file with e.target.files.

Then we get the name of the selected file with file.name.

Conclusion

To get the filename from the JavaScript FileReader, we can use the fileName property of the selected file.

Sometimes, we want to iterate asynchronously over JavaScript arrays.

In this article, we’ll look at how to iterate asynchronously over JavaScript arrays.

How to iterate asynchronously over JavaScript arrays?

To iterate asynchronously over JavaScript arrays, we can use the for-of loop and run async code with promises inside the loop body.

For instance, we write:

(async () => {
  let value = 0
  const arr = [0, 1, 2, 3, 4, 5]
  for (const a of arr) {
    value += await (Promise.resolve(a))
    console.log(value)
  }
})()

We use the for-of loop to loop through the arr array.

Inside the loop body, we call Promise.resolve with ato return a promise that resolves toa`.

And we use await to wait for the promise to resolve and we return the resolved value from the promise.

We then add the resolved value to value and log it.

Therefore, we see:

0
1
3
6
10
15

logged in the console.

Conclusion

To iterate asynchronously over JavaScript arrays, we can use the for-of loop and run async code with promises inside the loop body.

Sometimes, we want to use JavaScript to dynamically change a video’s source.

In this article, we’ll look at how to use JavaScript to dynamically change a video’s source.

How to use JavaScript to dynamically change a video’s source?

To use JavaScript to dynamically change a video’s source, we can set the src property of the source element to the URL of the video.

For instance, we write:

<video controls>
  <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4">
</video>

to add the video element with the source element’s src attribute set to a video path.

Then we write:

const source = document.querySelector("video > source")
source.src = "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"

to select the source element in the video element with document.querySelector.

Then we set the src property to the video URL string.

Conclusion

To use JavaScript to dynamically change a video’s source, we can set the src property of the source element to the URL of the video.