Packages
phoenix_live_view
1.1.24
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.2.0-rc.3
1.2.0-rc.2
1.2.0-rc.1
1.2.0-rc.0
1.1.32
1.1.31
1.1.30
1.1.29
1.1.28
1.1.27
1.1.26
1.1.25
1.1.24
1.1.23
1.1.22
1.1.21
1.1.20
1.1.19
1.1.18
1.1.17
1.1.16
1.1.15
1.1.14
1.1.13
1.1.12
1.1.11
1.1.10
1.1.9
1.1.8
1.1.7
1.1.6
retired
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.1.0-rc.4
1.1.0-rc.3
1.1.0-rc.2
1.1.0-rc.1
1.1.0-rc.0
1.0.18
1.0.17
1.0.16
1.0.15
1.0.14
1.0.13
1.0.12
1.0.11
1.0.10
1.0.9
1.0.8
retired
1.0.7
1.0.6
retired
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
1.0.0-rc.9
1.0.0-rc.8
1.0.0-rc.7
1.0.0-rc.6
1.0.0-rc.5
1.0.0-rc.4
1.0.0-rc.3
1.0.0-rc.2
1.0.0-rc.1
1.0.0-rc.0
0.20.17
0.20.16
0.20.15
0.20.14
0.20.13
0.20.12
0.20.11
0.20.10
0.20.9
0.20.8
0.20.7
0.20.6
0.20.5
0.20.4
0.20.3
0.20.2
0.20.1
0.20.0
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.18
0.18.17
0.18.16
0.18.15
0.18.14
0.18.13
0.18.12
0.18.11
0.18.10
0.18.9
0.18.8
0.18.7
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.14
0.17.13
0.17.12
0.17.11
0.17.10
0.17.9
0.17.8
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.7
0.15.6
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.8
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.1
0.11.0
0.10.0
0.9.0
0.8.1
0.8.0
0.7.1
0.7.0
0.6.0
0.6.0-dev
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.1
0.2.0
0.1.1
0.1.0
Rich, real-time user experiences with server-rendered HTML
Current section
Files
Jump to
Current section
Files
assets/js/phoenix_live_view/upload_entry.js
import {
PHX_ACTIVE_ENTRY_REFS,
PHX_LIVE_FILE_UPDATED,
PHX_PREFLIGHTED_REFS,
} from "./constants";
import { channelUploader, logError } from "./utils";
import LiveUploader from "./live_uploader";
export default class UploadEntry {
static isActive(fileEl, file) {
const isNew = file._phxRef === undefined;
const activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
const isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
return file.size > 0 && (isNew || isActive);
}
static isPreflighted(fileEl, file) {
const preflightedRefs = fileEl
.getAttribute(PHX_PREFLIGHTED_REFS)
.split(",");
const isPreflighted =
preflightedRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
return isPreflighted && this.isActive(fileEl, file);
}
static isPreflightInProgress(file) {
return file._preflightInProgress === true;
}
static markPreflightInProgress(file) {
file._preflightInProgress = true;
}
constructor(fileEl, file, view, autoUpload) {
this.ref = LiveUploader.genFileRef(file);
this.fileEl = fileEl;
this.file = file;
this.view = view;
this.meta = null;
this._isCancelled = false;
this._isDone = false;
this._progress = 0;
this._lastProgressSent = -1;
this._onDone = function () {};
this._onElUpdated = this.onElUpdated.bind(this);
this.fileEl.addEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
this.autoUpload = autoUpload;
}
metadata() {
return this.meta;
}
progress(progress) {
this._progress = Math.floor(progress);
if (this._progress > this._lastProgressSent) {
if (this._progress >= 100) {
this._progress = 100;
this._lastProgressSent = 100;
this._isDone = true;
this.view.pushFileProgress(this.fileEl, this.ref, 100, () => {
LiveUploader.untrackFile(this.fileEl, this.file);
this._onDone();
});
} else {
this._lastProgressSent = this._progress;
this.view.pushFileProgress(this.fileEl, this.ref, this._progress);
}
}
}
isCancelled() {
return this._isCancelled;
}
cancel() {
this.file._preflightInProgress = false;
this._isCancelled = true;
this._isDone = true;
this._onDone();
}
isDone() {
return this._isDone;
}
error(reason = "failed") {
this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
this.view.pushFileProgress(this.fileEl, this.ref, { error: reason });
if (!this.isAutoUpload()) {
LiveUploader.clearFiles(this.fileEl);
}
}
isAutoUpload() {
return this.autoUpload;
}
//private
onDone(callback) {
this._onDone = () => {
this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
callback();
};
}
onElUpdated() {
const activeRefs = this.fileEl
.getAttribute(PHX_ACTIVE_ENTRY_REFS)
.split(",");
if (activeRefs.indexOf(this.ref) === -1) {
LiveUploader.untrackFile(this.fileEl, this.file);
this.cancel();
}
}
toPreflightPayload() {
return {
last_modified: this.file.lastModified,
name: this.file.name,
relative_path: this.file.webkitRelativePath,
size: this.file.size,
type: this.file.type,
ref: this.ref,
meta: typeof this.file.meta === "function" ? this.file.meta() : undefined,
};
}
uploader(uploaders) {
if (this.meta.uploader) {
const callback =
uploaders[this.meta.uploader] ||
logError(`no uploader configured for ${this.meta.uploader}`);
return { name: this.meta.uploader, callback: callback };
} else {
return { name: "channel", callback: channelUploader };
}
}
zipPostFlight(resp) {
this.meta = resp.entries[this.ref];
if (!this.meta) {
logError(`no preflight upload response returned with ref ${this.ref}`, {
input: this.fileEl,
response: resp,
});
}
}
}