From 8ea530e70a1928a72bf11c2e9f3a0af7ea3c0e1f Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bieli@gmail.com>
Date: Sat, 5 Jan 2019 09:02:39 +0100
Subject: [PATCH 01/11] chunked upload callbacks freature

---
 src/chunk/ChunkUploadHandler.js | 57 +++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 97f21de..7701b44 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -16,6 +16,38 @@ export default class ChunkUploadHandler {
     this.options = options
   }
 
+  get startPhaseSuccessResponseCallback () {
+    let callbacks = this.options.chunkedUploadCallbacks || null
+    if (callbacks && !this.options.callbacks.startPhaseSuccessResponse instanceof Function) {
+      throw new TypeError('Function type is required in "startPhaseSuccessResponse" callback', "ChunkUploadHandler", 22);
+    }
+    return this.options.callbacks.startPhaseSuccessResponse
+  }
+
+  get uploadPhaseSuccessResponseCallback () {
+    let callbacks = this.options.chunkedUploadCallbacks || null
+    if (callbacks && !this.options.callbacks.uploadPhaseSuccessResponse instanceof Function) {
+      throw new TypeError('Function type is required in "uploadPhaseSuccessResponse" callback', "ChunkUploadHandler", 31);
+    }
+    return this.options.callbacks.uploadPhaseSuccessResponse
+  }
+
+  get finishPhaseBeforeRequestCallback () {
+    let callbacks = this.options.chunkedUploadCallbacks || null
+    if (callbacks && !this.options.callbacks.finishPhaseBeforeRequest instanceof Function) {
+      throw new TypeError('Function type is required in "finishPhaseBeforeRequest" callback', "ChunkUploadHandler", 39);
+    }
+    return this.options.callbacks.finishPhaseBeforeRequest
+  }
+
+  get finishPhaseSuccessResponseCallback () {
+    let callbacks = this.options.chunkedUploadCallbacks || null
+    if (callbacks && !this.options.callbacks.finishPhaseSuccessResponse instanceof Function) {
+      throw new TypeError('Function type is required in "finishPhaseSuccessResponse" callback', "ChunkUploadHandler", 31);
+    }
+    return this.options.callbacks.finishPhaseSuccessResponse
+  }
+
   /**
    * Gets the max retries from options
    */
@@ -241,6 +273,12 @@ export default class ChunkUploadHandler {
       this.sessionId = res.data.session_id
       this.chunkSize = res.data.end_offset
 
+      if (this.startPhaseSuccessResponseCallback) {
+        this.startPhaseSuccessResponseCallback(
+          this.sessionId
+        )
+      }
+
       this.createChunks()
       this.startChunking()
     }).catch(res => {
@@ -308,6 +346,12 @@ export default class ChunkUploadHandler {
     })).then(res => {
       chunk.active = false
       if (res.status === 'success') {
+        if (this.uploadPhaseSuccessResponseCallback) {
+          this.uploadPhaseSuccessResponseCallback(
+            this.sessionId,
+            res.data !== null ? res.data : null
+          )
+        }
         chunk.uploaded = true
       } else {
         if (chunk.retries-- <= 0) {
@@ -335,6 +379,13 @@ export default class ChunkUploadHandler {
   finish () {
     this.updateFileProgress()
 
+    if (this.finishPhaseBeforeRequestCallback) {
+      this.finishBody = this.finishPhaseBeforeRequestCallback(
+        this.sessionId,
+        this.finishBody
+      )
+    }
+
     request({
       method: 'POST',
       headers: Object.assign({}, this.headers, {
@@ -351,6 +402,11 @@ export default class ChunkUploadHandler {
         return this.reject('server')
       }
 
+      if (this.finishPhaseSuccessResponseCallback) {
+        this.finishBody = this.finishPhaseSuccessResponseCallback(
+          this.sessionId
+        )
+      }
       this.resolve(res)
     }).catch(res => {
       this.file.response = res
@@ -358,3 +414,4 @@ export default class ChunkUploadHandler {
     })
   }
 }
+

From db757a3c18a4caf92435fadb5ee4defdc2592290 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Sat, 5 Jan 2019 14:05:56 +0100
Subject: [PATCH 02/11] chunked upload feature update after tests + adding
 documentaion

---
 docs/docs/en.md                 |  95 +++++++++++++++++++++++++
 src/FileUpload.vue              |  16 ++++-
 src/chunk/ChunkUploadHandler.js | 118 +++++++++++++++++---------------
 3 files changed, 172 insertions(+), 57 deletions(-)

diff --git a/docs/docs/en.md b/docs/docs/en.md
index 04615c2..9c8fa62 100644
--- a/docs/docs/en.md
+++ b/docs/docs/en.md
@@ -209,6 +209,62 @@ Use the `handler` parameter to use a different Handler
  }
 ```
 
+##### Extending the handler using callbacks properties
+
+Another option for extending handler is possible with below dedicated peperties:
+ * chunk-enabled - must be `true`
+ * chunk-callbacks-enabled - must be `true`
+ * chunk-callbacks - nust be `Object` with interface based on `DefaultChunkUploadCallbacks`
+
+###### How to use calbacks in Vue template and script
+
+```html
+  <file-upload
+    :chunk-enabled="true"
+    :chunk-callbacks-enabled="true"
+    :chunk-callbacks="chunkCallbacksClassInstance"
+    ></file-upload>
+
+<script>
+    // ...
+
+    class ExampleChunkUploadCallbacks {
+        startPhaseSuccessResponse(sessionId) {
+            console.info('CALL startPhaseSuccessResponseCallback - sessionId: ', sessionId);
+        }
+
+        uploadPhaseSuccessResponse(sessionId, data) {
+            console.info('CALL uploadPhaseSuccessResponseCallback - sessionId: ', sessionId, ', data:', data);
+        }
+
+        finishPhaseBeforeRequest(sessionId, finishBody) {
+            console.info('CALL finishPhaseBeforeRequestCallback - sessionId: ', sessionId, ', finishBody: ', finishBody);
+            return finishBody
+        }
+
+        finishPhaseSuccessResponse(sessionId) {
+            console.info('CALL finishPhaseSuccessResponseCallback - sessionId: ', sessionId);
+        }
+    }
+
+    export default {
+        name: 'ComponentName',
+        components: {
+            // ...
+            FileUpload
+        },
+        data: () => {
+            return {
+                chunkCallbacks: new ExampleChunkUploadCallbacks()
+            }
+        }
+
+        // ...
+
+     }
+
+```
+
 ### SSR (Server isomorphism)
 
 
@@ -650,6 +706,45 @@ All the options to handle chunk uploads
 }
 ```
 
+### chunk-callbacks-enabled
+
+Whether chunk uploads callbacks is enabled or not
+
+* **Type:** `Boolean`
+
+* **Default:** `false`
+
+* **Usage:**
+  ```html
+  <file-upload :chunk-callbacks-enabled="true"></file-upload>
+  <file-upload chunk-callbacks-enabled></file-upload>
+  ```
+
+### chunk-callbacks
+
+Ready to use only when chunk-callbacks-enabled property is enabled or set true.
+Chunk callbacks it is class based on `DefaultChunkUploadCallbacks` example.
+Extend behaviours in few specific chunked upload phases by dedicated functions/callbacks:
+ startPhaseSuccessResponse,
+ uploadPhaseSuccessResponse,
+ finishPhaseBeforeRequest,
+ finishPhaseSuccessResponse.
+
+
+* **Type:** `Object`
+
+* **Default:** `undefined`
+
+* **Usage:**
+  ```html
+  <file-upload
+    :chunk-enabled="true"
+    :chunk-callbacks-enabled="true"
+    :chunk-callbacks="chunkCallbacksClassInstance"
+    ></file-upload>
+  ```
+
+
 ### drop
 
 Drag and drop upload
diff --git a/src/FileUpload.vue b/src/FileUpload.vue
index d47f681..5938b51 100644
--- a/src/FileUpload.vue
+++ b/src/FileUpload.vue
@@ -157,6 +157,17 @@ export default {
       default: false
     },
 
+    // Chunk upload callbacks enabled
+    chunkCallbacksEnabled: {
+      type: Boolean,
+      default: false
+    },
+
+    // Chunk upload callbacks (optional)
+    chunkCallbacks: {
+      type: Object
+    },
+
     // Chunk upload properties
     chunk: {
       type: Object,
@@ -264,7 +275,10 @@ export default {
     },
 
     chunkOptions () {
-      return Object.assign(CHUNK_DEFAULT_OPTIONS, this.chunk)
+      return Object.assign(CHUNK_DEFAULT_OPTIONS, this.chunk, {
+        chunkCallbacksEnabled: this.chunkCallbacksEnabled,
+        chunkCallbacks: this.chunkCallbacks
+      })
     },
 
     className() {
diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 7701b44..2678ae9 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -4,6 +4,23 @@ import {
   sendFormRequest
 } from '../utils/request'
 
+
+export class DefaultChunkUploadCallbacks {
+  startPhaseSuccessResponse (sessionId) {
+  }
+
+  uploadPhaseSuccessResponse (sessionId, data) {
+  }
+
+  finishPhaseBeforeRequest (sessionId, finishBody) {
+    return finishBody
+  }
+
+  finishPhaseSuccessResponse (sessionId) {
+  }
+}
+
+
 export default class ChunkUploadHandler {
   /**
    * Constructor
@@ -14,38 +31,8 @@ export default class ChunkUploadHandler {
   constructor (file, options) {
     this.file = file
     this.options = options
-  }
-
-  get startPhaseSuccessResponseCallback () {
-    let callbacks = this.options.chunkedUploadCallbacks || null
-    if (callbacks && !this.options.callbacks.startPhaseSuccessResponse instanceof Function) {
-      throw new TypeError('Function type is required in "startPhaseSuccessResponse" callback', "ChunkUploadHandler", 22);
-    }
-    return this.options.callbacks.startPhaseSuccessResponse
-  }
-
-  get uploadPhaseSuccessResponseCallback () {
-    let callbacks = this.options.chunkedUploadCallbacks || null
-    if (callbacks && !this.options.callbacks.uploadPhaseSuccessResponse instanceof Function) {
-      throw new TypeError('Function type is required in "uploadPhaseSuccessResponse" callback', "ChunkUploadHandler", 31);
-    }
-    return this.options.callbacks.uploadPhaseSuccessResponse
-  }
-
-  get finishPhaseBeforeRequestCallback () {
-    let callbacks = this.options.chunkedUploadCallbacks || null
-    if (callbacks && !this.options.callbacks.finishPhaseBeforeRequest instanceof Function) {
-      throw new TypeError('Function type is required in "finishPhaseBeforeRequest" callback', "ChunkUploadHandler", 39);
-    }
-    return this.options.callbacks.finishPhaseBeforeRequest
-  }
-
-  get finishPhaseSuccessResponseCallback () {
-    let callbacks = this.options.chunkedUploadCallbacks || null
-    if (callbacks && !this.options.callbacks.finishPhaseSuccessResponse instanceof Function) {
-      throw new TypeError('Function type is required in "finishPhaseSuccessResponse" callback', "ChunkUploadHandler", 31);
-    }
-    return this.options.callbacks.finishPhaseSuccessResponse
+    this.chunkCallbacksEnabled = this.options.chunkCallbacksEnabled || null
+    this.chunkCallbacks = this.options.chunkCallbacks || null
   }
 
   /**
@@ -273,11 +260,9 @@ export default class ChunkUploadHandler {
       this.sessionId = res.data.session_id
       this.chunkSize = res.data.end_offset
 
-      if (this.startPhaseSuccessResponseCallback) {
-        this.startPhaseSuccessResponseCallback(
-          this.sessionId
-        )
-      }
+      this.startPhaseSuccessResponseCallback(
+        this.sessionId
+      )
 
       this.createChunks()
       this.startChunking()
@@ -346,12 +331,10 @@ export default class ChunkUploadHandler {
     })).then(res => {
       chunk.active = false
       if (res.status === 'success') {
-        if (this.uploadPhaseSuccessResponseCallback) {
-          this.uploadPhaseSuccessResponseCallback(
-            this.sessionId,
-            res.data !== null ? res.data : null
-          )
-        }
+        this.uploadPhaseSuccessResponseCallback(
+          this.sessionId,
+          res.data !== null ? res.data : null
+        )
         chunk.uploaded = true
       } else {
         if (chunk.retries-- <= 0) {
@@ -379,12 +362,10 @@ export default class ChunkUploadHandler {
   finish () {
     this.updateFileProgress()
 
-    if (this.finishPhaseBeforeRequestCallback) {
-      this.finishBody = this.finishPhaseBeforeRequestCallback(
-        this.sessionId,
-        this.finishBody
-      )
-    }
+    let finishBody = this.finishPhaseBeforeRequestCallback(
+      this.sessionId,
+      this.finishBody
+    )
 
     request({
       method: 'POST',
@@ -392,7 +373,7 @@ export default class ChunkUploadHandler {
         'Content-Type': 'application/json'
       }),
       url: this.action,
-      body: Object.assign(this.finishBody, {
+      body: Object.assign(finishBody, {
         phase: 'finish',
         session_id: this.sessionId
       })
@@ -402,16 +383,41 @@ export default class ChunkUploadHandler {
         return this.reject('server')
       }
 
-      if (this.finishPhaseSuccessResponseCallback) {
-        this.finishBody = this.finishPhaseSuccessResponseCallback(
-          this.sessionId
-        )
-      }
+      this.finishPhaseSuccessResponseCallback(
+        this.sessionId
+      )
       this.resolve(res)
     }).catch(res => {
       this.file.response = res
       this.reject('server')
     })
   }
-}
 
+  startPhaseSuccessResponseCallback (sessionId) {
+    if (!this.chunkCallbacksEnabled || this.chunkCallbacks.startPhaseSuccessResponse instanceof Function === false) {
+      return false
+    }
+    return this.chunkCallbacks.startPhaseSuccessResponse(sessionId)
+  }
+
+  uploadPhaseSuccessResponseCallback (sessionId, data) {
+    if (!this.chunkCallbacksEnabled || this.chunkCallbacks.uploadPhaseSuccessResponse instanceof Function === false) {
+      return false
+    }
+    return this.chunkCallbacks.uploadPhaseSuccessResponse(sessionId, data)
+  }
+
+  finishPhaseBeforeRequestCallback (sessionId, finishBody) {
+    if (!this.chunkCallbacksEnabled || this.chunkCallbacks.finishPhaseBeforeRequest instanceof Function === false) {
+      return finishBody
+    }
+    return this.chunkCallbacks.finishPhaseBeforeRequest(sessionId, finishBody)
+  }
+
+  finishPhaseSuccessResponseCallback (sessionId) {
+    if (!this.chunkCallbacksEnabled || this.chunkCallbacks.finishPhaseSuccessResponse instanceof Function === false) {
+      return false
+    }
+    return this.chunkCallbacks.finishPhaseSuccessResponse(sessionId)
+  }
+}

From c1ccea8a38b60d4f8dc86aaa7bc4a3c36d001770 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Sat, 5 Jan 2019 14:35:20 +0100
Subject: [PATCH 03/11] updaing documentaion

---
 docs/docs/en.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/docs/en.md b/docs/docs/en.md
index 9c8fa62..4e92ab5 100644
--- a/docs/docs/en.md
+++ b/docs/docs/en.md
@@ -725,10 +725,10 @@ Whether chunk uploads callbacks is enabled or not
 Ready to use only when chunk-callbacks-enabled property is enabled or set true.
 Chunk callbacks it is class based on `DefaultChunkUploadCallbacks` example.
 Extend behaviours in few specific chunked upload phases by dedicated functions/callbacks:
- startPhaseSuccessResponse,
- uploadPhaseSuccessResponse,
- finishPhaseBeforeRequest,
- finishPhaseSuccessResponse.
+ startPhaseSuccessResponse (called in success response start phase),
+ uploadPhaseSuccessResponse (called in success response upload phase),
+ finishPhaseBeforeRequest (MUST returns optional modified or original body for finish phase request),
+ finishPhaseSuccessResponse (called in success response finished phase).
 
 
 * **Type:** `Object`

From f57f2be9594369e8046a388e4556948aecd426f0 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Sat, 5 Jan 2019 15:40:36 +0100
Subject: [PATCH 04/11] updating uploadPhaseSuccessResponseCallback second 
 arg. value to full response obj.

---
 src/chunk/ChunkUploadHandler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 2678ae9..ffff501 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -333,7 +333,7 @@ export default class ChunkUploadHandler {
       if (res.status === 'success') {
         this.uploadPhaseSuccessResponseCallback(
           this.sessionId,
-          res.data !== null ? res.data : null
+          res
         )
         chunk.uploaded = true
       } else {

From 99b6e6da7f68bb221b57ee8683ae6548b664efc5 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Mon, 7 Jan 2019 14:08:35 +0100
Subject: [PATCH 05/11] fixing finishPhaseBeforeRequestCallback to async

---
 src/chunk/ChunkUploadHandler.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index ffff501..14f934d 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -12,7 +12,7 @@ export class DefaultChunkUploadCallbacks {
   uploadPhaseSuccessResponse (sessionId, data) {
   }
 
-  finishPhaseBeforeRequest (sessionId, finishBody) {
+  async finishPhaseBeforeRequest (sessionId, finishBody) {
     return finishBody
   }
 
@@ -307,7 +307,7 @@ export default class ChunkUploadHandler {
    *
    * @param {Object} chunk
    */
-  uploadChunk (chunk) {
+  async uploadChunk (chunk) {
     chunk.progress = 0
     chunk.active = true
     this.updateFileProgress()
@@ -359,12 +359,17 @@ export default class ChunkUploadHandler {
    * Finish phase
    * Sends a request to the backend to finish the process
    */
-  finish () {
+  async finish () {
     this.updateFileProgress()
 
-    let finishBody = this.finishPhaseBeforeRequestCallback(
+    let finishBody = Object.assign(this.finishBody, {
+      phase: 'finish',
+      session_id: this.sessionId
+    })
+
+    let newBody = await this.finishPhaseBeforeRequestCallback(
       this.sessionId,
-      this.finishBody
+      finishBody
     )
 
     request({
@@ -373,10 +378,7 @@ export default class ChunkUploadHandler {
         'Content-Type': 'application/json'
       }),
       url: this.action,
-      body: Object.assign(finishBody, {
-        phase: 'finish',
-        session_id: this.sessionId
-      })
+      body: newBody
     }).then(res => {
       this.file.response = res
       if (res.status !== 'success') {
@@ -407,7 +409,7 @@ export default class ChunkUploadHandler {
     return this.chunkCallbacks.uploadPhaseSuccessResponse(sessionId, data)
   }
 
-  finishPhaseBeforeRequestCallback (sessionId, finishBody) {
+  async finishPhaseBeforeRequestCallback (sessionId, finishBody) {
     if (!this.chunkCallbacksEnabled || this.chunkCallbacks.finishPhaseBeforeRequest instanceof Function === false) {
       return finishBody
     }

From d91da7673156ca27708e4c6c9f3e4383552d6fc0 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Mon, 7 Jan 2019 19:55:14 +0100
Subject: [PATCH 06/11] changing data property from session_id to upload_id in
 response (start phase)

---
 src/chunk/ChunkUploadHandler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 14f934d..6b63d37 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -257,7 +257,7 @@ export default class ChunkUploadHandler {
         return this.reject('server')
       }
 
-      this.sessionId = res.data.session_id
+      this.sessionId = res.data.upload_id
       this.chunkSize = res.data.end_offset
 
       this.startPhaseSuccessResponseCallback(

From c04a5ecf25cc94361a020776a7f67197e7e31b6c Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Tue, 8 Jan 2019 15:11:29 +0100
Subject: [PATCH 07/11] adding new uploadPhaseBeforeRequestCallback and
 updating startPhaseSuccessResponseCallback arg. list

---
 src/chunk/ChunkUploadHandler.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 6b63d37..409e54c 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -6,7 +6,7 @@ import {
 
 
 export class DefaultChunkUploadCallbacks {
-  startPhaseSuccessResponse (sessionId) {
+  startPhaseSuccessResponse (sessionId, filename) {
   }
 
   uploadPhaseSuccessResponse (sessionId, data) {
@@ -64,7 +64,7 @@ export default class ChunkUploadHandler {
   }
 
   /**
-   * Gets the file size
+   * Gets the file name
    */
   get fileName () {
     return this.file.name
@@ -261,7 +261,8 @@ export default class ChunkUploadHandler {
       this.chunkSize = res.data.end_offset
 
       this.startPhaseSuccessResponseCallback(
-        this.sessionId
+        this.sessionId,
+        this.fileName
       )
 
       this.createChunks()
@@ -323,12 +324,19 @@ export default class ChunkUploadHandler {
       }
     }, false)
 
-    sendFormRequest(chunk.xhr, Object.assign(this.uploadBody, {
+    let uploadBody = Object.assign(this.uploadBody, {
       phase: 'upload',
       session_id: this.sessionId,
       start_offset: chunk.startOffset,
       chunk: chunk.blob
-    })).then(res => {
+    })
+
+    let newBody = await this.uploadPhaseBeforeRequestCallback(
+      this.sessionId,
+      uploadBody
+    )
+
+    sendFormRequest(chunk.xhr, newBody).then(res => {
       chunk.active = false
       if (res.status === 'success') {
         this.uploadPhaseSuccessResponseCallback(
@@ -395,11 +403,18 @@ export default class ChunkUploadHandler {
     })
   }
 
-  startPhaseSuccessResponseCallback (sessionId) {
+  startPhaseSuccessResponseCallback (sessionId, fileName) {
     if (!this.chunkCallbacksEnabled || this.chunkCallbacks.startPhaseSuccessResponse instanceof Function === false) {
       return false
     }
-    return this.chunkCallbacks.startPhaseSuccessResponse(sessionId)
+    return this.chunkCallbacks.startPhaseSuccessResponse(sessionId, fileName)
+  }
+
+  async uploadPhaseBeforeRequestCallback (sessionId, uploadBody) {
+    if (!this.chunkCallbacksEnabled || this.chunkCallbacks.uploadPhaseBeforeRequest instanceof Function === false) {
+      return uploadBody
+    }
+    return this.chunkCallbacks.uploadPhaseBeforeRequest(sessionId, uploadBody)
   }
 
   uploadPhaseSuccessResponseCallback (sessionId, data) {

From 36313a97ddcf8a13dde463583b6b02b4c7dbdc9f Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Wed, 9 Jan 2019 16:07:37 +0100
Subject: [PATCH 08/11] refactoring from requests to axios + adding more async.
 to callbacks

---
 src/chunk/ChunkUploadHandler.js | 187 ++++++++++++++++++--------------
 src/utils/request.js            |  87 ---------------
 2 files changed, 107 insertions(+), 167 deletions(-)
 delete mode 100644 src/utils/request.js

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index 409e54c..a22ffd5 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -1,22 +1,17 @@
-import {
-  default as request,
-  createRequest,
-  sendFormRequest
-} from '../utils/request'
-
+import axios from 'axios'
 
 export class DefaultChunkUploadCallbacks {
-  startPhaseSuccessResponse (sessionId, filename) {
+  async startPhaseSuccessResponse (sessionId, filename) {
   }
 
-  uploadPhaseSuccessResponse (sessionId, data) {
+  async uploadPhaseSuccessResponse (sessionId, data) {
   }
 
   async finishPhaseBeforeRequest (sessionId, finishBody) {
     return finishBody
   }
 
-  finishPhaseSuccessResponse (sessionId) {
+  async finishPhaseSuccessResponse (sessionId) {
   }
 }
 
@@ -239,19 +234,21 @@ export default class ChunkUploadHandler {
    * Sends a request to the backend to initialise the chunks
    */
   start () {
-    request({
-      method: 'POST',
-      headers: Object.assign({}, this.headers, {
-        'Content-Type': 'application/json'
-      }),
-      url: this.action,
-      body: Object.assign(this.startBody, {
+    axios.post(
+      this.action,
+      Object.assign(this.startBody, {
         phase: 'start',
         mime_type: this.fileType,
         size: this.fileSize,
         name: this.fileName
-      })
-    }).then(res => {
+      }),
+      {
+        headers: Object.assign({}, this.headers, {
+          'Content-Type': 'application/json'
+        })
+      }
+    ).then(response => {
+      const res = response.data
       if (res.status !== 'success') {
         this.file.response = res
         return this.reject('server')
@@ -263,13 +260,17 @@ export default class ChunkUploadHandler {
       this.startPhaseSuccessResponseCallback(
         this.sessionId,
         this.fileName
-      )
-
-      this.createChunks()
-      this.startChunking()
-    }).catch(res => {
+      ).then(() => {
+        console.debug('[vue-upload-component] ChunkUploadHandler -- START createChunks')
+        this.createChunks()
+        console.debug('[vue-upload-component] ChunkUploadHandler -- START startChunking')
+        this.startChunking()
+      })
+    }).catch(response => {
+      const res = response.data
       this.file.response = res
       this.reject('server')
+      console.error('[vue-upload-component] ChunkUploadHandler -- START reject server - response:', response)
     })
   }
 
@@ -312,17 +313,6 @@ export default class ChunkUploadHandler {
     chunk.progress = 0
     chunk.active = true
     this.updateFileProgress()
-    chunk.xhr = createRequest({
-      method: 'POST',
-      headers: this.headers,
-      url: this.action
-    })
-
-    chunk.xhr.upload.addEventListener('progress', function (evt) {
-      if (evt.lengthComputable) {
-        chunk.progress = Math.round(evt.loaded / evt.total * 100)
-      }
-    }, false)
 
     let uploadBody = Object.assign(this.uploadBody, {
       phase: 'upload',
@@ -331,35 +321,64 @@ export default class ChunkUploadHandler {
       chunk: chunk.blob
     })
 
-    let newBody = await this.uploadPhaseBeforeRequestCallback(
+    this.uploadPhaseBeforeRequestCallback(
       this.sessionId,
       uploadBody
-    )
+    ).then(newBody => {
+      console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadPhaseBeforeRequestCallback then - newBody:', newBody)
+      const formData = new FormData()
+      for (var name in newBody) {
+        formData.append(name, newBody[name])
+      }
 
-    sendFormRequest(chunk.xhr, newBody).then(res => {
-      chunk.active = false
-      if (res.status === 'success') {
-        this.uploadPhaseSuccessResponseCallback(
-          this.sessionId,
-          res
-        )
-        chunk.uploaded = true
-      } else {
+      console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD formData:', formData)
+
+      axios.post(
+        this.action,
+        formData,
+        {
+          headers: Object.assign({}, this.headers, {
+            'Content-Type': 'multipart/form-data'
+          }),
+          onUploadProgress: function(progressEvent) {
+            if (progressEvent.lengthComputable) {
+              chunk.progress = Math.round(progressEvent.loaded / progressEvent.total * 100)
+            }
+          }
+        }
+      ).then(response => {
+        console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD response:', response)
+        const res = response.data
+        chunk.active = false
+        if (res.status === 'success') {
+          this.uploadPhaseSuccessResponseCallback(
+            this.sessionId,
+            res
+          )
+          console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD success')
+          chunk.uploaded = true
+        } else {
+          if (chunk.retries-- <= 0) {
+            this.stopChunks()
+            console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks if (chunk.retries-- <= 0) { - reject upload')
+            return this.reject('upload')
+          }
+        }
+
+        this.uploadNextChunk()
+      }).catch((response) => {
+        console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD catch - response:', response)
+        chunk.active = false
         if (chunk.retries-- <= 0) {
           this.stopChunks()
+          console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks - reject upload')
           return this.reject('upload')
         }
-      }
-
-      this.uploadNextChunk()
-    }).catch(() => {
-      chunk.active = false
-      if (chunk.retries-- <= 0) {
-        this.stopChunks()
-        return this.reject('upload')
-      }
-
-      this.uploadNextChunk()
+        console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadNextChunk')
+        this.uploadNextChunk()
+      })
+    }).catch((data) => {
+      console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadPhaseBeforeRequestCallback - data:', data)
     })
   }
 
@@ -375,35 +394,43 @@ export default class ChunkUploadHandler {
       session_id: this.sessionId
     })
 
-    let newBody = await this.finishPhaseBeforeRequestCallback(
+    this.finishPhaseBeforeRequestCallback(
       this.sessionId,
       finishBody
-    )
+    ).then(newBody => {
+      axios.post(
+        this.action,
+        newBody,
+        {
+          headers: Object.assign({}, this.headers, {
+            'Content-Type': 'application/json'
+          })
+        }
+      ).then(response => {
+        const res = response.data
+        this.file.response = res
+        if (res.status !== 'success') {
+          console.error('[vue-upload-component] ChunkUploadHandler -- FINISH reject server ' +
+                        '- IF res.status !== "success"- response:', response)
+          return this.reject('server')
+        }
 
-    request({
-      method: 'POST',
-      headers: Object.assign({}, this.headers, {
-        'Content-Type': 'application/json'
-      }),
-      url: this.action,
-      body: newBody
-    }).then(res => {
-      this.file.response = res
-      if (res.status !== 'success') {
-        return this.reject('server')
-      }
+        this.finishPhaseSuccessResponseCallback(
+          this.sessionId
+        )
 
-      this.finishPhaseSuccessResponseCallback(
-        this.sessionId
-      )
-      this.resolve(res)
-    }).catch(res => {
-      this.file.response = res
-      this.reject('server')
+        this.resolve(res)
+      }).catch(response => {
+        const res = response.data
+        this.file.response = res
+        this.reject('server')
+        console.error('[vue-upload-component] ChunkUploadHandler ' +
+                      '-- FINISH reject server - response:', response)
+      })
     })
   }
 
-  startPhaseSuccessResponseCallback (sessionId, fileName) {
+  async startPhaseSuccessResponseCallback (sessionId, fileName) {
     if (!this.chunkCallbacksEnabled || this.chunkCallbacks.startPhaseSuccessResponse instanceof Function === false) {
       return false
     }
@@ -417,7 +444,7 @@ export default class ChunkUploadHandler {
     return this.chunkCallbacks.uploadPhaseBeforeRequest(sessionId, uploadBody)
   }
 
-  uploadPhaseSuccessResponseCallback (sessionId, data) {
+  async uploadPhaseSuccessResponseCallback (sessionId, data) {
     if (!this.chunkCallbacksEnabled || this.chunkCallbacks.uploadPhaseSuccessResponse instanceof Function === false) {
       return false
     }
@@ -431,7 +458,7 @@ export default class ChunkUploadHandler {
     return this.chunkCallbacks.finishPhaseBeforeRequest(sessionId, finishBody)
   }
 
-  finishPhaseSuccessResponseCallback (sessionId) {
+  async finishPhaseSuccessResponseCallback (sessionId) {
     if (!this.chunkCallbacksEnabled || this.chunkCallbacks.finishPhaseSuccessResponse instanceof Function === false) {
       return false
     }
diff --git a/src/utils/request.js b/src/utils/request.js
deleted file mode 100644
index f63b44e..0000000
--- a/src/utils/request.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Creates a XHR request
- *
- * @param {Object} options
- */
-export const createRequest = (options) => {
-  const xhr = new XMLHttpRequest()
-  xhr.open(options.method || 'GET', options.url)
-  xhr.responseType = 'json'
-  if (options.headers) {
-    Object.keys(options.headers).forEach(key => {
-      xhr.setRequestHeader(key, options.headers[key])
-    })
-  }
-
-  return xhr
-}
-
-/**
- * Sends a XHR request with certain body
- *
- * @param {XMLHttpRequest} xhr
- * @param {Object} body
- */
-export const sendRequest = (xhr, body) => {
-  return new Promise((resolve, reject) => {
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        var response
-        try {
-          response = JSON.parse(xhr.response)
-        } catch (err) {
-          response = xhr.response
-        }
-        resolve(response)
-      } else {
-        reject(xhr.response)
-      }
-    }
-    xhr.onerror = () => reject(xhr.response)
-    xhr.send(JSON.stringify(body))
-  })
-}
-
-/**
- * Sends a XHR request with certain form data
- *
- * @param {XMLHttpRequest} xhr
- * @param {Object} data
- */
-export const sendFormRequest = (xhr, data) => {
-  const body = new FormData()
-  for (var name in data) {
-    body.append(name, data[name])
-  }
-
-  return new Promise((resolve, reject) => {
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        var response
-        try {
-          response = JSON.parse(xhr.response)
-        } catch (err) {
-          response = xhr.response
-        }
-        resolve(response)
-      } else {
-        reject(xhr.response)
-      }
-    }
-    xhr.onerror = () => reject(xhr.response)
-    xhr.send(body)
-  })
-}
-
-/**
- * Creates and sends XHR request
- *
- * @param {Object} options
- *
- * @returns Promise
- */
-export default function (options) {
-  const xhr = createRequest(options)
-
-  return sendRequest(xhr, options.body)
-}

From 9c7624f5336a9e35ecde8b6ca4375d7fa21a2b78 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bieli@gmail.com>
Date: Fri, 11 Jan 2019 15:36:17 +0100
Subject: [PATCH 09/11] updating callbacks documentation

---
 docs/docs/en.md | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/docs/docs/en.md b/docs/docs/en.md
index 4e92ab5..aaba42c 100644
--- a/docs/docs/en.md
+++ b/docs/docs/en.md
@@ -229,21 +229,26 @@ Another option for extending handler is possible with below dedicated peperties:
     // ...
 
     class ExampleChunkUploadCallbacks {
-        startPhaseSuccessResponse(sessionId) {
-            console.info('CALL startPhaseSuccessResponseCallback - sessionId: ', sessionId);
+        async startPhaseSuccessResponse(sessionId) {
+            console.info('CALL startPhaseSuccessResponseCallback - sessionId: ', sessionId)
         }
 
-        uploadPhaseSuccessResponse(sessionId, data) {
-            console.info('CALL uploadPhaseSuccessResponseCallback - sessionId: ', sessionId, ', data:', data);
+        async uploadPhaseBeforeRequestCallback (sessionId, uploadBody) {
+            console.info('CALL uploadPhaseBeforeRequestCallback - sessionId: ', sessionId, ', uploadBody: ', uploadBody)
+            return uploadBody
         }
 
-        finishPhaseBeforeRequest(sessionId, finishBody) {
-            console.info('CALL finishPhaseBeforeRequestCallback - sessionId: ', sessionId, ', finishBody: ', finishBody);
+        async uploadPhaseSuccessResponse(sessionId, data) {
+            console.info('CALL uploadPhaseSuccessResponseCallback - sessionId: ', sessionId, ', data:', data)
+        }
+
+        async finishPhaseBeforeRequest(sessionId, finishBody) {
+            console.info('CALL finishPhaseBeforeRequestCallback - sessionId: ', sessionId, ', finishBody: ', finishBody)
             return finishBody
         }
 
-        finishPhaseSuccessResponse(sessionId) {
-            console.info('CALL finishPhaseSuccessResponseCallback - sessionId: ', sessionId);
+        async finishPhaseSuccessResponse(sessionId) {
+            console.info('CALL finishPhaseSuccessResponseCallback - sessionId: ', sessionId)
         }
     }
 

From 996de22c662679a696b8a127522c558f7d4b6752 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bieli@gmail.com>
Date: Fri, 11 Jan 2019 16:24:31 +0100
Subject: [PATCH 10/11] adding uploadPhaseBeforeRequestCallback method in
 DefaultChunkUploadCallbacks

---
 src/chunk/ChunkUploadHandler.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index a22ffd5..c1d38f5 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -7,6 +7,10 @@ export class DefaultChunkUploadCallbacks {
   async uploadPhaseSuccessResponse (sessionId, data) {
   }
 
+  async uploadPhaseBeforeRequestCallback (sessionId, uploadBody) {
+    return uploadBody
+  }
+
   async finishPhaseBeforeRequest (sessionId, finishBody) {
     return finishBody
   }

From a5dc107a3e8d28c190118671566da0959fb65753 Mon Sep 17 00:00:00 2001
From: Marcin Bielak <marcin.bielak@allegro.pl>
Date: Tue, 29 Jan 2019 14:01:49 +0100
Subject: [PATCH 11/11] adding catch sections for callbacks with reject or
 retry strategy

---
 src/chunk/ChunkUploadHandler.js | 48 ++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/chunk/ChunkUploadHandler.js b/src/chunk/ChunkUploadHandler.js
index c1d38f5..1efe4da 100644
--- a/src/chunk/ChunkUploadHandler.js
+++ b/src/chunk/ChunkUploadHandler.js
@@ -269,6 +269,9 @@ export default class ChunkUploadHandler {
         this.createChunks()
         console.debug('[vue-upload-component] ChunkUploadHandler -- START startChunking')
         this.startChunking()
+      }).catch(ex => {
+        this.reject('server')
+        console.error('[vue-upload-component] ChunkUploadHandler -- START reject server - startPhaseSuccessResponseCallback exception:', ex)
       })
     }).catch(response => {
       const res = response.data
@@ -358,17 +361,27 @@ export default class ChunkUploadHandler {
           this.uploadPhaseSuccessResponseCallback(
             this.sessionId,
             res
-          )
-          console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD success')
-          chunk.uploaded = true
+          ).then(() => {
+            console.info('[vue-upload-component] ChunkUploadHandler -- UPLOAD success')
+            chunk.uploaded = true
+          }).catch(ex => {
+            this.reject('server')
+            chunk.active = false
+            if (chunk.retries-- <= 0) {
+              this.stopChunks()
+              console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks if (chunk.retries-- <= 0) { - reject upload - exception:', ex)
+              return this.reject('upload')
+            }
+          })
         } else {
+          chunk.active = false
           if (chunk.retries-- <= 0) {
             this.stopChunks()
             console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks if (chunk.retries-- <= 0) { - reject upload')
             return this.reject('upload')
           }
         }
-
+        console.warn('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadNextChunk')
         this.uploadNextChunk()
       }).catch((response) => {
         console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD catch - response:', response)
@@ -378,11 +391,18 @@ export default class ChunkUploadHandler {
           console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks - reject upload')
           return this.reject('upload')
         }
-        console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadNextChunk')
+        console.warn('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadNextChunk')
         this.uploadNextChunk()
       })
-    }).catch((data) => {
-      console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadPhaseBeforeRequestCallback - data:', data)
+    }).catch((ex) => {
+      chunk.active = false
+      if (chunk.retries-- <= 0) {
+        this.stopChunks()
+        console.error('[vue-upload-component] ChunkUploadHandler -- UPLOAD stopChunks - reject upload')
+        return this.reject('upload')
+      }
+      console.warn('[vue-upload-component] ChunkUploadHandler -- UPLOAD uploadPhaseBeforeRequestCallback - exception:', ex)
+      this.uploadNextChunk()
     })
   }
 
@@ -421,9 +441,13 @@ export default class ChunkUploadHandler {
 
         this.finishPhaseSuccessResponseCallback(
           this.sessionId
-        )
-
-        this.resolve(res)
+        ).then(() => {
+          this.resolve(res)
+        }).catch(ex => {
+          console.error('[vue-upload-component] ChunkUploadHandler ' +
+                        '-- FINISH reject server - exception:', ex)
+          this.reject('server')
+        })
       }).catch(response => {
         const res = response.data
         this.file.response = res
@@ -431,6 +455,10 @@ export default class ChunkUploadHandler {
         console.error('[vue-upload-component] ChunkUploadHandler ' +
                       '-- FINISH reject server - response:', response)
       })
+    }).catch(ex => {
+      this.reject('server')
+      console.error('[vue-upload-component] ChunkUploadHandler ' +
+                    '-- FINISH reject server - exception:', ex)
     })
   }