phoenix_live_view 0.20.9 → 0.20.11

package/assets/js/phoenix_live_view/live_uploader.js

@@ -70,7 +70,7 @@ export default class LiveUploader {
   static trackFiles(inputEl, files, dataTransfer){
     if(inputEl.getAttribute("multiple") !== null){
       let newFiles = files.filter(file => !this.activeFiles(inputEl).find(f => Object.is(f, file)))
-      DOM.putPrivate(inputEl, "files", this.activeFiles(inputEl).concat(newFiles))
+      DOM.updatePrivate(inputEl, "files", [], (existing) => existing.concat(newFiles))
       inputEl.value = null
     } else {
       // Reset inputEl files to align output with programmatic changes (i.e. drag and drop)
@@ -102,28 +102,36 @@ export default class LiveUploader {
   }
 
   constructor(inputEl, view, onComplete){
+    this.autoUpload = DOM.isAutoUpload(inputEl)
     this.view = view
     this.onComplete = onComplete
     this._entries =
       Array.from(LiveUploader.filesAwaitingPreflight(inputEl) || [])
-        .map(file => new UploadEntry(inputEl, file, view))
+        .map(file => new UploadEntry(inputEl, file, view, this.autoUpload))
 
-    // prevent sending duplicate preflight requests 
+    // prevent sending duplicate preflight requests
     LiveUploader.markPreflightInProgress(this._entries)
 
     this.numEntriesInProgress = this._entries.length
   }
 
+  isAutoUpload(){ return this.autoUpload }
+
   entries(){ return this._entries }
 
   initAdapterUpload(resp, onError, liveSocket){
     this._entries =
       this._entries.map(entry => {
-        entry.zipPostFlight(resp)
-        entry.onDone(() => {
+        if(entry.isCancelled()){
           this.numEntriesInProgress--
           if(this.numEntriesInProgress === 0){ this.onComplete() }
-        })
+        } else {
+          entry.zipPostFlight(resp)
+          entry.onDone(() => {
+            this.numEntriesInProgress--
+            if(this.numEntriesInProgress === 0){ this.onComplete() }
+          })
+        }
         return entry
       })
 

package/assets/js/phoenix_live_view/upload_entry.js

@@ -10,15 +10,13 @@ import {
 } from "./utils"
 
 import LiveUploader from "./live_uploader"
-import DOM from "./dom"
 
 export default class UploadEntry {
   static isActive(fileEl, file){
     let isNew = file._phxRef === undefined
-    let isPreflightInProgress = UploadEntry.isPreflightInProgress(file)
     let activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",")
     let isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0
-    return file.size > 0 && (isNew || isActive || !isPreflightInProgress)
+    return file.size > 0 && (isNew || isActive)
   }
 
   static isPreflighted(fileEl, file){
@@ -35,7 +33,7 @@ export default class UploadEntry {
     file._preflightInProgress = true
   }
 
-  constructor(fileEl, file, view){
+  constructor(fileEl, file, view, autoUpload){
     this.ref = LiveUploader.genFileRef(file)
     this.fileEl = fileEl
     this.file = file
@@ -45,9 +43,10 @@ export default class UploadEntry {
     this._isDone = false
     this._progress = 0
     this._lastProgressSent = -1
-    this._onDone = function (){ }
+    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 }
@@ -70,7 +69,10 @@ export default class UploadEntry {
     }
   }
 
+  isCancelled(){ return this._isCancelled }
+
   cancel(){
+    this.file._preflightInProgress = false
     this._isCancelled = true
     this._isDone = true
     this._onDone()
@@ -81,9 +83,11 @@ export default class UploadEntry {
   error(reason = "failed"){
     this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated)
     this.view.pushFileProgress(this.fileEl, this.ref, {error: reason})
-    if(!DOM.isAutoUpload(this.fileEl)){ LiveUploader.clearFiles(this.fileEl) }
+    if(!this.isAutoUpload()){ LiveUploader.clearFiles(this.fileEl) }
   }
 
+  isAutoUpload(){ return this.autoUpload }
+
   //private
 
   onDone(callback){
@@ -95,7 +99,10 @@ export default class UploadEntry {
 
   onElUpdated(){
     let activeRefs = this.fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",")
-    if(activeRefs.indexOf(this.ref) === -1){ this.cancel() }
+    if(activeRefs.indexOf(this.ref) === -1){
+      LiveUploader.untrackFile(this.fileEl, this.file)
+      this.cancel()
+    }
   }
 
   toPreflightPayload(){

package/assets/js/phoenix_live_view/view.js

@@ -120,6 +120,7 @@ export default class View {
     this.childJoins = 0
     this.loaderTimer = null
     this.pendingDiffs = []
+    this.pendingForms = new Set()
     this.redirect = false
     this.href = null
     this.joinCount = this.parent ? this.parent.joinCount - 1 : 0
@@ -282,12 +283,16 @@ export default class View {
       this.rendered = new Rendered(this.id, diff)
       let [html, streams] = this.renderContainer(null, "join")
       this.dropPendingRefs()
-      let forms = this.formsForRecovery(html)
+      let forms = this.formsForRecovery(html).filter(([form, newForm, newCid]) => {
+        return !this.pendingForms.has(form.id)
+      })
       this.joinCount++
 
       if(forms.length > 0){
         forms.forEach(([form, newForm, newCid], i) => {
+          this.pendingForms.add(form.id)
           this.pushFormRecovery(form, newCid, resp => {
+            this.pendingForms.delete(form.id)
             if(i === forms.length - 1){
               this.onJoinComplete(resp, html, streams, events)
             }
@@ -307,6 +312,9 @@ export default class View {
   }
 
   onJoinComplete({live_patch}, html, streams, events){
+    // we can clear pending form recoveries now that we've joined.
+    // They either all resolved or were abandoned
+    this.pendingForms.clear()
     // In order to provide a better experience, we want to join
     // all LiveViews first and only then apply their patches.
     if(this.joinCount > 1 || (this.parent && !this.parent.isJoinPending())){
@@ -1029,7 +1037,12 @@ export default class View {
     } else if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
       let [ref, els] = refGenerator()
       let proxyRefGen = () => [ref, els, opts]
-      this.uploadFiles(formEl, targetCtx, ref, cid, (_uploads) => {
+      this.uploadFiles(formEl, targetCtx, ref, cid, (uploads) => {
+        // if we still having pending preflights it means we have invalid entries
+        // and the phx-submit cannot be completed
+        if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
+          return this.undoRefs(ref)
+        }
         let meta = this.extractMeta(formEl)
         let formData = serializeForm(formEl, {submitter, ...meta})
         this.pushWithReply(proxyRefGen, "event", {
@@ -1065,7 +1078,7 @@ export default class View {
 
       let entries = uploader.entries().map(entry => entry.toPreflightPayload())
 
-      if (entries.length === 0) {
+      if(entries.length === 0) {
         numFileInputsInProgress--
         return
       }
@@ -1080,10 +1093,21 @@ export default class View {
 
       this.pushWithReply(null, "allow_upload", payload, resp => {
         this.log("upload", () => ["got preflight response", resp])
-        if(resp.error){
+        // the preflight will reject entries beyond the max entries
+        // so we error and cancel entries on the client that are missing from the response
+        uploader.entries().forEach(entry => {
+          if(resp.entries && !resp.entries[entry.ref]){
+            this.handleFailedEntryPreflight(entry.ref, "failed preflight", uploader)
+          }
+        })
+        // for auto uploas, we may have an empty entries response from the server
+        // for form submits that contain invalid entries
+        if(resp.error || Object.keys(resp.entries).length === 0){
           this.undoRefs(ref)
-          let [entry_ref, reason] = resp.error
-          this.log("upload", () => [`error for entry ${entry_ref}`, reason])
+          let errors = resp.error || []
+          errors.map(([entry_ref, reason]) => {
+            this.handleFailedEntryPreflight(entry_ref, reason, uploader)
+          })
         } else {
           let onError = (callback) => {
             this.channel.onError(() => {
@@ -1096,6 +1120,17 @@ export default class View {
     })
   }
 
+  handleFailedEntryPreflight(uploadRef, reason, uploader){
+    if(uploader.isAutoUpload()){
+      // uploadRef may be top level upload config ref or entry ref
+      let entry = uploader.entries().find(entry => entry.ref === uploadRef.toString())
+      if(entry){ entry.cancel() }
+    } else {
+      uploader.entries().map(entry => entry.cancel())
+    }
+    this.log("upload", () => [`error for entry ${uploadRef}`, reason])
+  }
+
   dispatchUploads(targetCtx, name, filesOrBlobs){
     let targetElement = this.targetCtxElement(targetCtx) || this.el
     let inputs = DOM.findUploadInputs(targetElement).filter(el => el.name === name)

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.9",
+  "version": "0.20.11",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "repository": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.20.9",
+  "version": "0.20.11",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",

package/priv/static/phoenix_live_view.cjs.js

@@ -1124,10 +1124,9 @@ var dom_default = DOM;
 var UploadEntry = class {
   static isActive(fileEl, file) {
     let isNew = file._phxRef === void 0;
-    let isPreflightInProgress = UploadEntry.isPreflightInProgress(file);
     let activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
     let isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
-    return file.size > 0 && (isNew || isActive || !isPreflightInProgress);
+    return file.size > 0 && (isNew || isActive);
   }
   static isPreflighted(fileEl, file) {
     let preflightedRefs = fileEl.getAttribute(PHX_PREFLIGHTED_REFS).split(",");
@@ -1140,7 +1139,7 @@ var UploadEntry = class {
   static markPreflightInProgress(file) {
     file._preflightInProgress = true;
   }
-  constructor(fileEl, file, view) {
+  constructor(fileEl, file, view, autoUpload) {
     this.ref = LiveUploader.genFileRef(file);
     this.fileEl = fileEl;
     this.file = file;
@@ -1154,6 +1153,7 @@ var UploadEntry = class {
     };
     this._onElUpdated = this.onElUpdated.bind(this);
     this.fileEl.addEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
+    this.autoUpload = autoUpload;
   }
   metadata() {
     return this.meta;
@@ -1175,7 +1175,11 @@ var UploadEntry = class {
       }
     }
   }
+  isCancelled() {
+    return this._isCancelled;
+  }
   cancel() {
+    this.file._preflightInProgress = false;
     this._isCancelled = true;
     this._isDone = true;
     this._onDone();
@@ -1186,10 +1190,13 @@ var UploadEntry = class {
   error(reason = "failed") {
     this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
     this.view.pushFileProgress(this.fileEl, this.ref, { error: reason });
-    if (!dom_default.isAutoUpload(this.fileEl)) {
+    if (!this.isAutoUpload()) {
       LiveUploader.clearFiles(this.fileEl);
     }
   }
+  isAutoUpload() {
+    return this.autoUpload;
+  }
   onDone(callback) {
     this._onDone = () => {
       this.fileEl.removeEventListener(PHX_LIVE_FILE_UPDATED, this._onElUpdated);
@@ -1199,6 +1206,7 @@ var UploadEntry = class {
   onElUpdated() {
     let activeRefs = this.fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
     if (activeRefs.indexOf(this.ref) === -1) {
+      LiveUploader.untrackFile(this.fileEl, this.file);
       this.cancel();
     }
   }
@@ -1285,7 +1293,7 @@ var LiveUploader = class {
   static trackFiles(inputEl, files, dataTransfer) {
     if (inputEl.getAttribute("multiple") !== null) {
       let newFiles = files.filter((file) => !this.activeFiles(inputEl).find((f) => Object.is(f, file)));
-      dom_default.putPrivate(inputEl, "files", this.activeFiles(inputEl).concat(newFiles));
+      dom_default.updatePrivate(inputEl, "files", [], (existing) => existing.concat(newFiles));
       inputEl.value = null;
     } else {
       if (dataTransfer && dataTransfer.files.length > 0) {
@@ -1312,24 +1320,35 @@ var LiveUploader = class {
     entries.forEach((entry) => UploadEntry.markPreflightInProgress(entry.file));
   }
   constructor(inputEl, view, onComplete) {
+    this.autoUpload = dom_default.isAutoUpload(inputEl);
     this.view = view;
     this.onComplete = onComplete;
-    this._entries = Array.from(LiveUploader.filesAwaitingPreflight(inputEl) || []).map((file) => new UploadEntry(inputEl, file, view));
+    this._entries = Array.from(LiveUploader.filesAwaitingPreflight(inputEl) || []).map((file) => new UploadEntry(inputEl, file, view, this.autoUpload));
     LiveUploader.markPreflightInProgress(this._entries);
     this.numEntriesInProgress = this._entries.length;
   }
+  isAutoUpload() {
+    return this.autoUpload;
+  }
   entries() {
     return this._entries;
   }
   initAdapterUpload(resp, onError, liveSocket) {
     this._entries = this._entries.map((entry) => {
-      entry.zipPostFlight(resp);
-      entry.onDone(() => {
+      if (entry.isCancelled()) {
         this.numEntriesInProgress--;
         if (this.numEntriesInProgress === 0) {
           this.onComplete();
         }
-      });
+      } else {
+        entry.zipPostFlight(resp);
+        entry.onDone(() => {
+          this.numEntriesInProgress--;
+          if (this.numEntriesInProgress === 0) {
+            this.onComplete();
+          }
+        });
+      }
       return entry;
     });
     let groupedEntries = this._entries.reduce((acc, entry) => {
@@ -2920,6 +2939,7 @@ var View = class {
     this.childJoins = 0;
     this.loaderTimer = null;
     this.pendingDiffs = [];
+    this.pendingForms = new Set();
     this.redirect = false;
     this.href = null;
     this.joinCount = this.parent ? this.parent.joinCount - 1 : 0;
@@ -3072,11 +3092,15 @@ var View = class {
       this.rendered = new Rendered(this.id, diff);
       let [html, streams] = this.renderContainer(null, "join");
       this.dropPendingRefs();
-      let forms = this.formsForRecovery(html);
+      let forms = this.formsForRecovery(html).filter(([form, newForm, newCid]) => {
+        return !this.pendingForms.has(form.id);
+      });
       this.joinCount++;
       if (forms.length > 0) {
         forms.forEach(([form, newForm, newCid], i) => {
+          this.pendingForms.add(form.id);
           this.pushFormRecovery(form, newCid, (resp2) => {
+            this.pendingForms.delete(form.id);
             if (i === forms.length - 1) {
               this.onJoinComplete(resp2, html, streams, events);
             }
@@ -3094,6 +3118,7 @@ var View = class {
     });
   }
   onJoinComplete({ live_patch }, html, streams, events) {
+    this.pendingForms.clear();
     if (this.joinCount > 1 || this.parent && !this.parent.isJoinPending()) {
       return this.applyJoinPatch(live_patch, html, streams, events);
     }
@@ -3813,7 +3838,10 @@ var View = class {
     } else if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
       let [ref, els] = refGenerator();
       let proxyRefGen = () => [ref, els, opts];
-      this.uploadFiles(formEl, targetCtx, ref, cid, (_uploads) => {
+      this.uploadFiles(formEl, targetCtx, ref, cid, (uploads) => {
+        if (LiveUploader.inputsAwaitingPreflight(formEl).length > 0) {
+          return this.undoRefs(ref);
+        }
         let meta = this.extractMeta(formEl);
         let formData = serializeForm(formEl, { submitter, ...meta });
         this.pushWithReply(proxyRefGen, "event", {
@@ -3858,10 +3886,17 @@ var View = class {
       this.log("upload", () => ["sending preflight request", payload]);
       this.pushWithReply(null, "allow_upload", payload, (resp) => {
         this.log("upload", () => ["got preflight response", resp]);
-        if (resp.error) {
+        uploader.entries().forEach((entry) => {
+          if (resp.entries && !resp.entries[entry.ref]) {
+            this.handleFailedEntryPreflight(entry.ref, "failed preflight", uploader);
+          }
+        });
+        if (resp.error || Object.keys(resp.entries).length === 0) {
           this.undoRefs(ref);
-          let [entry_ref, reason] = resp.error;
-          this.log("upload", () => [`error for entry ${entry_ref}`, reason]);
+          let errors = resp.error || [];
+          errors.map(([entry_ref, reason]) => {
+            this.handleFailedEntryPreflight(entry_ref, reason, uploader);
+          });
         } else {
           let onError = (callback) => {
             this.channel.onError(() => {
@@ -3875,6 +3910,17 @@ var View = class {
       });
     });
   }
+  handleFailedEntryPreflight(uploadRef, reason, uploader) {
+    if (uploader.isAutoUpload()) {
+      let entry = uploader.entries().find((entry2) => entry2.ref === uploadRef.toString());
+      if (entry) {
+        entry.cancel();
+      }
+    } else {
+      uploader.entries().map((entry) => entry.cancel());
+    }
+    this.log("upload", () => [`error for entry ${uploadRef}`, reason]);
+  }
   dispatchUploads(targetCtx, name, filesOrBlobs) {
     let targetElement = this.targetCtxElement(targetCtx) || this.el;
     let inputs = dom_default.findUploadInputs(targetElement).filter((el) => el.name === name);