Skip to content

chunked upload callbacks features + axios instead of custom requests #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions docs/docs/en.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,67 @@ 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 {
async startPhaseSuccessResponse(sessionId) {
console.info('CALL startPhaseSuccessResponseCallback - sessionId: ', sessionId)
}

async uploadPhaseBeforeRequestCallback (sessionId, uploadBody) {
console.info('CALL uploadPhaseBeforeRequestCallback - sessionId: ', sessionId, ', uploadBody: ', uploadBody)
return uploadBody
}

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
}

async finishPhaseSuccessResponse(sessionId) {
console.info('CALL finishPhaseSuccessResponseCallback - sessionId: ', sessionId)
}
}

export default {
name: 'ComponentName',
components: {
// ...
FileUpload
},
data: () => {
return {
chunkCallbacks: new ExampleChunkUploadCallbacks()
}
}

// ...

}

```

### SSR (Server isomorphism)


Expand Down Expand Up @@ -650,6 +711,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 (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`

* **Default:** `undefined`

* **Usage:**
```html
<file-upload
:chunk-enabled="true"
:chunk-callbacks-enabled="true"
:chunk-callbacks="chunkCallbacksClassInstance"
></file-upload>
```


### drop

Drag and drop upload
Expand Down
16 changes: 15 additions & 1 deletion src/FileUpload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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() {
Expand Down
Loading