fix missing file data while uploading

Author: vietnogi

src/actions/uploadFile.js

@@ -8,6 +8,7 @@ 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_PROGRESS = 'UPLOAD_FILE_PROGRESS'
 export const UPLOAD_FILE_FAILURE = 'UPLOAD_FILE_FAILURE'
 
 export function getTempId({ assetType, category, id, fileName }) {
@@ -32,6 +33,18 @@ export function uploadFile({ id, assetType, category, file }) {
 
     let tempId = getTempId(temporaryAttachment)
 
+    const onprogress = (res) => {
+      const { lengthComputable, loaded, total } = res
+      const progress = Math.round(lengthComputable ? loaded * 100 / total : 0)
+
+      dispatch({
+        type: UPLOAD_FILE_PROGRESS,
+        attachments: {
+          [tempId]: merge({}, temporaryAttachment, { progress })
+        }
+      })
+    }
+
     const postUploadUrlGo = () => {
       const error = res => {
         dispatch({
@@ -48,7 +61,7 @@ export function uploadFile({ id, assetType, category, file }) {
         const { filePath, preSignedURL } = res.result
         const signedAttachment = merge({}, temporaryAttachment, { filePath, preSignedURL })
 
-        uploadToS3(signedAttachment)(dispatch).then(res => {
+        uploadToS3(file, preSignedURL, onprogress)(dispatch).then(res => {
           postAttachment(signedAttachment)(dispatch).then(res => {
             if (!res.entities) { // false positive, i.e status: 500
               error()
@@ -74,6 +87,7 @@ export function uploadFile({ id, assetType, category, file }) {
       }
     })
 
+    // TODO: move read file out
     const readFile = () => {
       let reader = new FileReader()
 

src/actions/uploadToS3.js

@@ -1,16 +1,12 @@
-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'
 export const S3_UPLOAD_SUCCESS  = 'S3_UPLOAD_SUCCESS'
 export const S3_UPLOAD_FAILURE  = 'S3_UPLOAD_FAILURE'
 
-export default function uploadToS3(attachment) {
+export default function uploadToS3(file, preSignedURL, onprogress) {
   return dispatch => {
-    const { data, preSignedURL, fileType, tempId } = attachment
-
     let deferred = Q.defer()
     let putFileToS3 = new XMLHttpRequest()
 
@@ -31,24 +27,12 @@ export default function uploadToS3(attachment) {
       }
     }
 
-    putFileToS3.upload.onprogress = res => {
-      // TODO, move this out
-      const { lengthComputable, loaded, total } = res
-      const tempId = getTempId(attachment)
-      const progress = Math.round(lengthComputable ? loaded * 100 / total : 0)
-
-      dispatch({
-        type: S3_UPLOAD_PROGRESS,
-        attachments: {
-          [tempId]: merge({}, attachment, { progress })
-        }
-      })
-    }
+    putFileToS3.upload.onprogress = onprogress
 
     putFileToS3.open('PUT', preSignedURL, true)
-    putFileToS3.setRequestHeader('Content-Type', fileType)
-    putFileToS3.send(data)
+    putFileToS3.setRequestHeader('Content-Type', file.type)
+    putFileToS3.send(file)
 
     return deferred.promise
   }
-}
+}

src/reducers/attachments.js

@@ -3,13 +3,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 { POST_UPLOAD_URL_FAILURE } from '../actions/postUploadUrl'
 import {
   UPLOAD_FILE_REQUEST,
   READ_FILE_SUCCESS,
   getTempId,
-  UPLOAD_FILE_FAILURE
+  UPLOAD_FILE_FAILURE,
+  UPLOAD_FILE_PROGRESS
 } from '../actions/uploadFile'
 import { merge, mapValues, omit, map } from 'lodash'
 
@@ -18,7 +18,7 @@ export default function attachments(state = [], action) {
     case GET_ATTACHMENTS_SUCCESS:
     case UPLOAD_FILE_REQUEST:
     case READ_FILE_SUCCESS:
-    case S3_UPLOAD_PROGRESS:
+    case UPLOAD_FILE_PROGRESS:
       const isImageAttachments = mapValues(action.attachments, attachment => {
         attachment.isImage = attachment.fileType && attachment.fileType.match('image.*')