Special handling for uploading files

package.json

@@ -43,6 +43,7 @@
     "exenv": "^1.2.1",
     "express": "^4.13.4",
     "file-saver": "^1.3.3",
+    "flat": "^4.0.0",
     "flow-bin": "^0.46.0",
     "global": "^4.3.1",
     "immutable": "^3.8.1",

src/redux/helpers/api/tools.js

@@ -1,5 +1,6 @@
 import statusCode from 'statuscode';
 import { addNotification } from '../../modules/notifications';
+import { flatten } from 'flat';
 
 import { logout } from '../../modules/auth';
 import { isTokenValid, decode } from '../../helpers/token';
@@ -24,23 +25,56 @@ const generateQuery = query =>
 export const assembleEndpoint = (endpoint, query = {}) =>
   endpoint + maybeQuestionMark(endpoint, query) + generateQuery(query);
 
-export const createRequest = (endpoint, query = {}, method, headers, body) =>
+export const flattenBody = body => {
+  const flattened = flatten(body, { delimiter: ':' });
+  body = {};
+
+  Object.keys(flattened).map(key => {
+    // 'a:b:c:d' => 'a[b][c][d]'
+    const bracketedKey = key.replace(/:([^:$]+)/g, '[$1]');
+    body[bracketedKey] = flattened[key];
+  });
+
+  return body;
+};
+
+const createFormData = body => {
+  const data = new FormData();
+  const flattened = flattenBody(body);
+  for (let key in flattened) {
+    data.append(key, flattened[key]);
+  }
+  return data;
+};
+
+export const createRequest = (
+  endpoint,
+  query = {},
+  method,
+  headers,
+  body,
+  uploadFiles
+) =>
   fetch(getUrl(assembleEndpoint(endpoint, query)), {
     method,
     headers,
-    body: body ? JSON.stringify(body) : undefined
+    body: body
+      ? uploadFiles ? createFormData(body) : JSON.stringify(body)
+      : undefined
   });
 
-export const getHeaders = (headers, accessToken) => {
-  const jsonHeaders = { 'Content-Type': 'application/json', ...headers };
+export const getHeaders = (headers, accessToken, skipContentType) => {
+  const usedHeaders = skipContentType
+    ? headers
+    : { 'Content-Type': 'application/json', ...headers };
   if (accessToken) {
     return {
       Authorization: `Bearer ${accessToken}`,
-      ...jsonHeaders
+      ...usedHeaders
     };
   }
 
-  return jsonHeaders;
+  return usedHeaders;
 };
 
 /**
@@ -57,11 +91,12 @@ export const createApiCallPromise = (
     accessToken = '',
     body = undefined,
     wasSuccessful = () => true,
-    doNotProcess = false
+    doNotProcess = false,
+    uploadFiles = false
   },
   dispatch = undefined
 ) => {
-  let call = createRequest(endpoint, query, method, headers, body)
+  let call = createRequest(endpoint, query, method, headers, body, uploadFiles)
     .catch(err => detectUnreachableServer(err, dispatch))
     .then(res => {
       if (

src/redux/middleware/apiMiddleware.js

@@ -18,7 +18,8 @@ export const apiCall = (
     body = undefined,
     meta = undefined,
     wasSuccessful = isTwoHundredCode,
-    doNotProcess = false
+    doNotProcess = false,
+    uploadFiles = false
   },
   dispatch = undefined
 ) => ({
@@ -29,10 +30,11 @@ export const apiCall = (
         endpoint,
         query,
         method,
-        headers: getHeaders(headers, accessToken),
+        headers: getHeaders(headers, accessToken, uploadFiles),
         body,
         wasSuccessful,
-        doNotProcess
+        doNotProcess,
+        uploadFiles
       },
       dispatch
     ),

src/redux/modules/additionalExerciseFiles.js

@@ -41,7 +41,8 @@ export const addAdditionalExerciseFiles = (exerciseId, files) =>
         tmpId: Math.random().toString(),
         file: uploaded.file
       }))
-    }
+    },
+    uploadFiles: true
   });
 
 export const removeAdditionalExerciseFile = (exerciseId, fileId) =>

src/redux/modules/pipelineFiles.js

@@ -39,7 +39,8 @@ export const addPipelineFiles = (pipelineId, files) =>
         tmpId: Math.random().toString(),
         file: uploaded.file
       }))
-    }
+    },
+    uploadFiles: true
   });
 
 /**

src/redux/modules/supplementaryFiles.js

@@ -41,7 +41,8 @@ export const addSupplementaryFiles = (exerciseId, files) =>
         tmpId: Math.random().toString(),
         file: uploaded.file
       }))
-    }
+    },
+    uploadFiles: true
   });
 
 export const removeSupplementaryFile = (exerciseId, fileId) =>

src/redux/modules/upload.js

@@ -21,7 +21,8 @@ export const uploadFile = (id, file, endpoint = '/uploaded-files') =>
     method: 'POST',
     endpoint,
     body: { [file.name]: file },
-    meta: { id, fileName: file.name }
+    meta: { id, fileName: file.name },
+    uploadFiles: true
   });
 
 const wrapWithName = (id, file) => ({ [file.name]: file });

yarn.lock

@@ -2991,6 +2991,12 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-4.0.0.tgz#3abc7f3b588e64ce77dc42fd59aa35806622fea8"
+  dependencies:
+    is-buffer "~1.1.5"
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
@@ -3859,6 +3865,10 @@ is-buffer@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
+is-buffer@~1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+
 is-builtin-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"