So I need to make a way to import a file and show it on the user's screen. I cannot use PHP, as it is for a chrome extension. I am using the fileReader() API, and am using this to read the binary file. Is there any way to render an image directly from the user?
Add a comment
|
2 Answers
Skip the FileReader part. Take the File or Blob you're reading and create an object URL for it.
img.src = URL.createObjectURL(file);
7 Comments
bluninja1234
I need to get it from the user's computer.
Brad
@bluninja1234 Yes, you can still do that. The URL this creates is not a server-side URL, but a
blob: URL that references the local file data. Use the same file object here as you would have if you were using the FileReader.bluninja1234
Then what is
file in this case?Brad
@bluninja1234 A file instance. developer.mozilla.org/en-US/docs/Web/API/File If you'd show your code that you had with FileReader, I can give you an in-context example. Again, whatever file reference you passed to FileReader, you can use that reference here.
yqlim
@bluninja1234 please note that you need to manually release its memory if your extension is memory intensive.
|
You can use FileReader.readAsDataURL() for images.
Simply read the documentation.
Try it yourself:
const input = document.getElementById('input');
const img = document.getElementById('img');
const reader = new FileReader();
reader.addEventListener('load', showImage);
input.addEventListener('change', readImage);
function readImage(){
if (!this.files) return;
reader.readAsDataURL(this.files[0]);
}
function showImage(){
img.src = this.result;
}<input id="input" type="file" onchange="showImage()">
<img id="img">Read more about FileReader API.
EDIT - for future readers
It's unfair to judge FileReader.readAsDataURL() by only one argument, that it is "horribly inefficient". After all, if it is in the standard spec, it serves its own purpose.
While FileReader.readAsDataURL() is indeed less efficient than URL.createObjectURL() in this case, there is a difference:
.readAsDataURLis asynchronous,.createObjectURL()is not..readAsDataURLcan be garbage collected automatically,.createObjectURLcannot.
But of course, these difference can be trivial, depending on your apps' implementation and application.
2 Comments
Brad
This is horribly inefficient. It requires reading the entire object, base64-encoding, and shoving it into the DOM.
Brad
".readAsDataURL is asynchronous, .createObjectURL() is not." It doesn't have to be asynchronous because it returns a blob URL to you instantly. No real work is done! In your case, you're reading and encoding the entire resource! This is a massive overhead, so the function needs to be async. What a ridiculous argument you're making. ".readAsDataURL can be garbage collected automatically" You still have to remove it from the DOM as well as clean up any references!