refactor uploadFile

appirio-tech · Jan 29, 2016 · 9051770 · 9051770
1 parent 017249e
commit 9051770
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "jwt-decode": "^1.4.0",
     "lodash": "^4.0.0",
     "normalizr": "^1.0.0",
+    "q": "^1.4.1",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-redux": "^4.0.0",

diff --git a/src/actions/postAttachment.js b/src/actions/postAttachment.js
@@ -5,10 +5,10 @@ export const POST_ATTACHMENT_REQUEST = 'POST_ATTACHMENT_REQUEST'
 export const POST_ATTACHMENT_SUCCESS = 'POST_ATTACHMENT_SUCCESS'
 export const POST_ATTACHMENT_FAILURE = 'POST_ATTACHMENT_FAILURE'
 
-export default function postAttachment({
-  id, assetType, category, fileType, fileSize, filePath, fileName
-}) {
+export default function postAttachment(attachment) {
   return dispatch => {
+    const { id, assetType, category, fileType, fileSize, filePath, fileName } = attachment
+
     dispatch({
       type: POST_ATTACHMENT_REQUEST
     })
@@ -17,7 +17,7 @@ export default function postAttachment({
       endpoint: '/v3/attachments',
       method  : 'POST',
       schema  : Schemas.ATTACHMENT,
-      body: {
+      data: {
         param: {
           id       : id,
           fileName : fileName,

diff --git a/src/actions/postUploadUrl.js b/src/actions/postUploadUrl.js
@@ -5,8 +5,10 @@ export const POST_UPLOAD_URL_REQUEST = 'POST_UPLOAD_URL_REQUEST'
 export const POST_UPLOAD_URL_SUCCESS = 'POST_UPLOAD_URL_SUCCESS'
 export const POST_UPLOAD_URL_FAILURE = 'POST_UPLOAD_URL_FAILURE'
 
-export default function postUploadUrl({ id, assetType, category, name, type }) {
+export default function postUploadUrl(attachment) {
   return dispatch => {
+    const { id, assetType, category, fileName, fileType } = attachment
+
     dispatch({
       type: POST_UPLOAD_URL_REQUEST
     })
@@ -15,12 +17,12 @@ export default function postUploadUrl({ id, assetType, category, name, type }) {
       endpoint: '/v3/attachments/uploadurl',
       method  : 'POST',
       schema  : Schemas.UPLOAD_URL_ARRAY,
-      body: {
+      data: {
         param: {
           id       : id,
-          fileName : name,
+          fileName : fileName,
           assetType: assetType,
-          fileType : type,
+          fileType : fileType,
           category : category
         }
       }
@@ -35,9 +37,7 @@ export default function postUploadUrl({ id, assetType, category, name, type }) {
     }
 
     const error = res => {
-      dispatch({
-        type: POST_UPLOAD_URL_FAILURE
-      })
+      dispatch({ type: POST_UPLOAD_URL_FAILURE })
 
       return res
     }

diff --git a/src/actions/uploadFile.js b/src/actions/uploadFile.js
@@ -1,10 +1,14 @@
 import postUploadUrl from './postUploadUrl'
 import uploadToS3 from './uploadToS3'
+import postAttachment from './postAttachment'
+import { merge } from 'lodash'
 
-export const READ_FILE_REQUEST  = 'READ_FILE_REQUEST'
-export const READ_FILE_SUCCESS  = 'READ_FILE_SUCCESS'
-export const READ_FILE_FAILURE  = 'READ_FILE_FAILURE'
-export const UPLOAD_FILE_REQUEST  = 'UPLOAD_FILE_REQUEST'
+export const READ_FILE_REQUEST   = 'READ_FILE_REQUEST'
+export const READ_FILE_SUCCESS   = 'READ_FILE_SUCCESS'
+export const READ_FILE_FAILURE   = 'READ_FILE_FAILURE'
+export const UPLOAD_FILE_REQUEST = 'UPLOAD_FILE_REQUEST'
+export const UPLOAD_FILE_SUCCESS = 'UPLOAD_FILE_SUCCESS'
+export const UPLOAD_FILE_FAILURE = 'UPLOAD_FILE_FAILURE'
 
 export function getTempId({ assetType, category, id, fileName }) {
   return assetType + category + id + fileName
@@ -28,30 +32,48 @@ export function uploadFile({ id, assetType, category, file }) {
 
     let tempId = getTempId(temporaryAttachment)
 
-    dispatch({
-      type: UPLOAD_FILE_REQUEST,
-      attachments: {
-        [tempId]: temporaryAttachment
-      }
-    })
+    const postUploadUrlGo = () => {
+      const error = res => {
+        dispatch({
+          type: UPLOAD_FILE_FAILURE,
+          attachments: {
+            [tempId]: temporaryAttachment
+          }
+        })
 
-    const postUploadUrlSuccess = res => {
-      const { filePath, preSignedURL } = res.result
+        return res
+      }
 
-      temporaryAttachment.filePath     = filePath
-      temporaryAttachment.preSignedURL = preSignedURL
+      postUploadUrl(temporaryAttachment)(dispatch).then(res => {
+        const { filePath, preSignedURL } = res.result
+        const signedAttachment = merge({}, temporaryAttachment, { filePath, preSignedURL })
 
-      uploadToS3(temporaryAttachment)(dispatch)
+        uploadToS3(signedAttachment)(dispatch).then(res => {
+          postAttachment(signedAttachment)(dispatch).then(res => {
+            if (!res.entities) { // false positive, i.e status: 500
+              error()
+            }
+            else {
+              dispatch({ type: UPLOAD_FILE_SUCCESS })
+            }
 
-      return res
-    }
+            return res
+          }).catch(error)
 
-    const postUploadUrlGo = () => {
-      const postUploadUrlParams = { id, assetType, category, name, type }
+          return res
+        }).catch(error)
 
-      postUploadUrl(postUploadUrlParams)(dispatch).then(postUploadUrlSuccess)
+        return res
+      }).catch(error)
     }
 
+    dispatch({
+      type: UPLOAD_FILE_REQUEST,
+      attachments: {
+        [tempId]: temporaryAttachment
+      }
+    })
+
     const readFile = () => {
       let reader = new FileReader()
 

diff --git a/src/actions/uploadToS3.js b/src/actions/uploadToS3.js
@@ -1,5 +1,6 @@
-import postAttachment from './postAttachment'
 import { getTempId } from '../actions/uploadFile'
+import Q from 'q'
+export { merge } from 'lodash'
 
 export const S3_UPLOAD_REQUEST  = 'S3_UPLOAD_REQUEST'
 export const S3_UPLOAD_PROGRESS = 'S3_UPLOAD_PROGRESS'
@@ -10,6 +11,7 @@ export default function uploadToS3(attachment) {
   return dispatch => {
     const { data, preSignedURL, fileType, tempId } = attachment
 
+    let deferred = Q.defer()
     let putFileToS3 = new XMLHttpRequest()
 
     dispatch({ type: S3_UPLOAD_REQUEST })
@@ -18,36 +20,35 @@ export default function uploadToS3(attachment) {
       if (res.target.status == 200) {
         dispatch({ type: S3_UPLOAD_SUCCESS })
 
-        postAttachment(attachment)(dispatch)
+        deferred.resolve(res)
       }
       else {
-        attachment.errors = [res.target.status]
-
-        dispatch({
-          type: S3_UPLOAD_FAILURE,
-          attachments: {
-            [tempId]: attachment
-          }
-        })
+        const error = new Error(S3_UPLOAD_FAILURE)
+
+        dispatch({ type: S3_UPLOAD_FAILURE })
+
+        deferred.reject(res)
       }
     }
 
     putFileToS3.onprogress = res => {
+      // TODO, move this out
       const { lengthComputable, loaded, total } = res
       const tempId = getTempId(attachment)
-
-      attachment.progress = Math.round(lengthComputable ? loaded * 100 / total : 0)
+      const progress = Math.round(lengthComputable ? loaded * 100 / total : 0)
 
       dispatch({
         type: S3_UPLOAD_PROGRESS,
         attachments: {
-          [tempId]: attachment
+          [tempId]: merge({}, attachment, { progress })
         }
       })
     }
 
     putFileToS3.open('PUT', preSignedURL, true)
     putFileToS3.setRequestHeader('Content-Type', fileType)
     putFileToS3.send(data)
+
+    return deferred.promise
   }
 }
diff --git a/src/middleware/api.js b/src/middleware/api.js
@@ -28,7 +28,7 @@ export default function callApi({ schema, endpoint, ignoreResult, method, data }
       config.data = JSON.stringify(data)
     }
 
-    return axios(config) 
+    return axios(config)
   }
 
   const handleResponse = (res) => {

diff --git a/src/reducers/attachments.js b/src/reducers/attachments.js
@@ -4,7 +4,13 @@ import { GET_ATTACHMENTS_SUCCESS } from '../actions/getAttachments'
 import { POST_ATTACHMENT_SUCCESS } from '../actions/postAttachment'
 import { DELETE_ATTACHMENT_SUCCESS } from '../actions/deleteAttachment'
 import { S3_UPLOAD_PROGRESS } from '../actions/uploadToS3'
-import { UPLOAD_FILE_REQUEST, READ_FILE_SUCCESS, getTempId } from '../actions/uploadFile'
+import { POST_UPLOAD_URL_FAILURE } from '../actions/postUploadUrl'
+import {
+  UPLOAD_FILE_REQUEST,
+  READ_FILE_SUCCESS,
+  getTempId,
+  UPLOAD_FILE_FAILURE
+} from '../actions/uploadFile'
 import { merge, mapValues, omit, map } from 'lodash'
 
 export default function attachments(state = [], action) {
@@ -42,6 +48,16 @@ export default function attachments(state = [], action) {
       return merge(cleanedAttachments, previewAttachments)
     break;
 
+    case UPLOAD_FILE_FAILURE:
+      const errorAttachments = mapValues(action.attachments, attachment => {
+        attachment.errors = ['something happened']
+
+        return attachment
+      })
+
+      return merge({}, state, errorAttachments)
+    break;
+
     case DELETE_ATTACHMENT_SUCCESS:
       const deleteId = action.attachment.fileId || getTempId(action.attachment)