* Fixing `Chunk upload` problems:

* Use of `FormData` to send the content of the chunks
  * Better handle of errors from server
master
José Cámara 8 years ago
parent 5604efe979
commit 699c7476bf

@ -1,4 +1,8 @@
import { default as request, createRequest, sendRequest } from '../utils/request' import {
default as request,
createRequest,
sendFormRequest
} from '../utils/request'
export default class ChunkUploadHandler { export default class ChunkUploadHandler {
/** /**
@ -204,7 +208,9 @@ export default class ChunkUploadHandler {
start () { start () {
request({ request({
method: 'POST', method: 'POST',
headers: this.headers, headers: Object.assign(this.headers, {
'Content-Type': 'application/json'
}),
url: this.action, url: this.action,
body: Object.assign(this.startBody, { body: Object.assign(this.startBody, {
phase: 'start', phase: 'start',
@ -213,7 +219,8 @@ export default class ChunkUploadHandler {
}) })
}).then(res => { }).then(res => {
if (res.status !== 'success') { if (res.status !== 'success') {
return this.reject(res.message) this.file.response = res
return this.reject('server')
} }
this.sessionId = res.data.session_id this.sessionId = res.data.session_id
@ -221,7 +228,10 @@ export default class ChunkUploadHandler {
this.createChunks() this.createChunks()
this.startChunking() this.startChunking()
}).catch(error => this.reject(error)) }).catch(res => {
this.file.response = res
this.reject('server')
})
} }
/** /**
@ -265,17 +275,19 @@ export default class ChunkUploadHandler {
this.updateFileProgress() this.updateFileProgress()
chunk.xhr = createRequest({ chunk.xhr = createRequest({
method: 'POST', method: 'POST',
headers: this.headers, headers: Object.assign(this.headers, {
'Content-Type': 'multipart/form-data'
}),
url: this.action url: this.action
}) })
chunk.xhr.upload.addEventListener('progress', function(evt) { chunk.xhr.upload.addEventListener('progress', function (evt) {
if (evt.lengthComputable) { if (evt.lengthComputable) {
chunk.progress = Math.round(evt.loaded / evt.total * 100) chunk.progress = Math.round(evt.loaded / evt.total * 100)
} }
}, false) }, false)
sendRequest(chunk.xhr, Object.assign(this.uploadBody, { sendFormRequest(chunk.xhr, Object.assign(this.uploadBody, {
phase: 'upload', phase: 'upload',
session_id: this.sessionId, session_id: this.sessionId,
start_offset: chunk.startOffset, start_offset: chunk.startOffset,
@ -287,7 +299,7 @@ export default class ChunkUploadHandler {
} else { } else {
if (chunk.retries-- <= 0) { if (chunk.retries-- <= 0) {
this.pause() this.pause()
return this.reject('File upload failed') return this.reject('upload')
} }
} }
@ -296,7 +308,7 @@ export default class ChunkUploadHandler {
chunk.active = false chunk.active = false
if (chunk.retries-- <= 0) { if (chunk.retries-- <= 0) {
this.pause() this.pause()
return this.reject('File upload failed') return this.reject('upload')
} }
this.uploadNextChunk() this.uploadNextChunk()
@ -312,18 +324,24 @@ export default class ChunkUploadHandler {
request({ request({
method: 'POST', method: 'POST',
headers: this.headers, headers: Object.assign(this.headers, {
'Content-Type': 'application/json'
}),
url: this.action, url: this.action,
body: Object.assign(this.finishBody, { body: Object.assign(this.finishBody, {
phase: 'finish', phase: 'finish',
session_id: this.sessionId session_id: this.sessionId
}) })
}).then(res => { }).then(res => {
this.file.response = res
if (res.status !== 'success') { if (res.status !== 'success') {
return this.reject(res.message) return this.reject('server')
} }
this.resolve(res) this.resolve(res)
}).catch(error => this.reject(error)) }).catch(res => {
this.file.response = res
this.reject('server')
})
} }
} }

@ -42,6 +42,10 @@ const chunkUploadFinish = (req, res) => {
} }
module.exports = (req, res) => { module.exports = (req, res) => {
if (!req.body.phase) {
return chunkUploadPart(req, res)
}
switch (req.body.phase) { switch (req.body.phase) {
case 'start': case 'start':
return chunkUploadStart(req, res) return chunkUploadStart(req, res)

@ -28,14 +28,39 @@ export const sendRequest = (xhr, body) => {
if (xhr.status >= 200 && xhr.status < 300) { if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response) resolve(xhr.response)
} else { } else {
reject(xhr.statusText) reject(xhr.response)
} }
} }
xhr.onerror = () => reject(xhr.statusText) xhr.onerror = () => reject(xhr.response)
xhr.send(JSON.stringify(body)) 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) {
resolve(xhr.response)
} else {
reject(xhr.response)
}
}
xhr.onerror = () => reject(xhr.response)
xhr.send(body)
})
}
/** /**
* Creates and sends XHR request * Creates and sends XHR request
* *

Loading…
Cancel
Save