FileReader: abort event
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 abort event of the FileReader interface is fired when a read has been aborted: for instance because the program called FileReader.abort().
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("abort", (event) => { })
onabort = (event) => { }
Event type
A ProgressEvent. Inherits from Event.
Examples
Live example
HTML
html
<div class="example">
<div class="file-select">
<label for="avatar">Choose a profile picture:</label>
<input
type="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg" />
</div>
<img src="" class="preview" height="200" alt="Image preview" />
<div class="event-log">
<label for="eventLog">Event log:</label>
<textarea readonly class="event-log-contents" id="eventLog"></textarea>
</div>
</div>
JavaScript
js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();
function handleEvent(event) {
eventLog.textContent += `${event.type}: ${event.loaded} bytes transferred\n`;
if (event.type === "load") {
preview.src = reader.result;
}
}
function addListeners(reader) {
reader.addEventListener("loadstart", handleEvent);
reader.addEventListener("load", handleEvent);
reader.addEventListener("loadend", handleEvent);
reader.addEventListener("progress", handleEvent);
reader.addEventListener("error", handleEvent);
reader.addEventListener("abort", handleEvent);
}
function handleSelected(e) {
eventLog.textContent = "";
const selectedFile = fileInput.files[0];
if (selectedFile) {
addListeners(reader);
reader.readAsDataURL(selectedFile);
}
reader.abort();
}
fileInput.addEventListener("change", handleSelected);
Result
Specifications
| Specification |
|---|
| File API # dfn-abort-event |
| File API # dfn-onabort |