Apply allow_upload's chunk_timeout to push timeouts. Closes #3348

This is useful when you want to upload very large chunk sizes that risk timing
out slower connections.

assets/js/phoenix_live_view/entry_uploader.js

@@ -3,11 +3,14 @@ import {
 } from "./utils"
 
 export default class EntryUploader {
-  constructor(entry, chunkSize, liveSocket){
+  constructor(entry, config, liveSocket){
+    console.log(config)
+    let {chunk_size, chunk_timeout} = config
     this.liveSocket = liveSocket
     this.entry = entry
     this.offset = 0
-    this.chunkSize = chunkSize
+    this.chunkSize = chunk_size
+    this.chunkTimeout = chunk_timeout
     this.chunkTimer = null
     this.errored = false
     this.uploadChannel = liveSocket.channel(`lvu:${entry.ref}`, {token: entry.metadata()})
@@ -46,7 +49,7 @@ export default class EntryUploader {
 
   pushChunk(chunk){
     if(!this.uploadChannel.isJoined()){ return }
-    this.uploadChannel.push("chunk", chunk)
+    this.uploadChannel.push("chunk", chunk, this.chunkTimeout)
       .receive("ok", () => {
         this.entry.progress((this.offset / this.entry.file.size) * 100)
         if(!this.isDone()){

assets/js/phoenix_live_view/utils.js

@@ -57,7 +57,7 @@ export let maybe = (el, callback) => el && callback(el)
 
 export let channelUploader = function (entries, onError, resp, liveSocket){
   entries.forEach(entry => {
-    let entryUploader = new EntryUploader(entry, resp.config.chunk_size, liveSocket)
+    let entryUploader = new EntryUploader(entry, resp.config, liveSocket)
     entryUploader.upload()
   })
 }

lib/phoenix_live_view/upload.ex

@@ -350,7 +350,8 @@ defmodule Phoenix.LiveView.Upload do
     client_meta = %{
       max_file_size: conf.max_file_size,
       max_entries: conf.max_entries,
-      chunk_size: conf.chunk_size
+      chunk_size: conf.chunk_size,
+      chunk_timeout: conf.chunk_timeout
     }
 
     {new_socket, new_conf, new_entries} = mark_preflighted(socket, conf, refs)

priv/static/phoenix_live_view.js

@@ -150,11 +150,14 @@ var LiveView = (() => {
 
   // js/phoenix_live_view/entry_uploader.js
   var EntryUploader = class {
-    constructor(entry, chunkSize, liveSocket) {
+    constructor(entry, config, liveSocket) {
+      console.log(config);
+      let { chunk_size, chunk_timeout } = config;
       this.liveSocket = liveSocket;
       this.entry = entry;
       this.offset = 0;
-      this.chunkSize = chunkSize;
+      this.chunkSize = chunk_size;
+      this.chunkTimeout = chunk_timeout;
       this.chunkTimer = null;
       this.errored = false;
       this.uploadChannel = liveSocket.channel(`lvu:${entry.ref}`, { token: entry.metadata() });
@@ -192,7 +195,7 @@ var LiveView = (() => {
       if (!this.uploadChannel.isJoined()) {
         return;
       }
-      this.uploadChannel.push("chunk", chunk).receive("ok", () => {
+      this.uploadChannel.push("chunk", chunk, this.chunkTimeout).receive("ok", () => {
         this.entry.progress(this.offset / this.entry.file.size * 100);
         if (!this.isDone()) {
           this.chunkTimer = setTimeout(() => this.readNextChunk(), this.liveSocket.getLatencySim() || 0);
@@ -251,7 +254,7 @@ var LiveView = (() => {
   var maybe = (el, callback) => el && callback(el);
   var channelUploader = function(entries, onError, resp, liveSocket) {
     entries.forEach((entry) => {
-      let entryUploader = new EntryUploader(entry, resp.config.chunk_size, liveSocket);
+      let entryUploader = new EntryUploader(entry, resp.config, liveSocket);
       entryUploader.upload();
     });
   };