FileReader: readAsDataURL() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
The readAsDataURL() method of the FileReader interface is used to read the contents of the specified
Blob or File. When the read operation is finished, the
readyState property becomes DONE, and the
loadend event is triggered. At that time, the
result attribute contains the data as a data: URL representing the
file's data as a base64 encoded string.
Note:
The blob's result cannot be
directly decoded as Base64 without first removing the Data-URL declaration preceding
the Base64-encoded data. To retrieve only the Base64 encoded string, first
remove data:*/*;base64, from the result.
Syntax
readAsDataURL(blob)
Parameters
Return value
None (undefined).
Examples
Reading a single file
HTML
<input type="file" /><br />
<img src="" height="200" alt="Image preview" />
JavaScript
const preview = document.querySelector("img");
const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", previewFile);
function previewFile() {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
// convert image file to base64 string
preview.src = reader.result;
});
if (file) {
reader.readAsDataURL(file);
}
}
Result
Reading multiple files
HTML
<input id="browse" type="file" multiple />
<div id="preview"></div>
JavaScript
function previewFiles() {
const preview = document.querySelector("#preview");
const files = document.querySelector("input[type=file]").files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(?:jpe?g|png|gif)$/i.test(file.name)) {
const reader = new FileReader();
reader.addEventListener("load", () => {
const image = new Image();
image.height = 100;
image.title = file.name;
image.src = reader.result;
preview.appendChild(image);
});
reader.readAsDataURL(file);
}
}
if (files) {
Array.prototype.forEach.call(files, readAndPreview);
}
}
const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
Result
Specifications
| Specification |
|---|
| File API # readAsDataURL |
Browser compatibility
Loading…