How can i get file url data in javascript

Question

I tried using base64 to get image data:

function previewFile() {
  const preview = document.getElementById('video1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function() {
    // convert to base64
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="previewFile()"><br>

<video width="320" height="240" id="video1" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

This script makes you upload an mp4 file and then it will display it.

The problem is that base64 is too way long. Is there any other way to get the file data but shorter?

Use blob url for shorter data

Faheem azaz Bhanej
– Faheem azaz Bhanej

2021-11-20 13:04:01 +00:00
Commented Nov 20, 2021 at 13:04 — Faheem azaz Bhanej
– Faheem azaz Bhanej, Commented Nov 20, 2021 at 13:04

Faheem azaz Bhanej · Accepted Answer · 2021-11-22 03:43:12Z

0

You want to use Blob url for shorter src.

Convert Base64 to Blob

Change:

reader.result

to:

window.URL.createObjectURL(file)

function previewFile() {
  const preview = document.getElementById('video1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function() {
    // convert to base64
    preview.src = window.URL.createObjectURL(file);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="previewFile()"><br>

<video width="320" height="240" id="video1" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

edited Nov 22, 2021 at 3:43

answered Nov 20, 2021 at 13:28

Faheem azaz Bhanej

2,4063 gold badges17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i get file url data in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related