fix: import api to chunk file (#734)

src/import-page/data/api.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -14,9 +13,42 @@ export const getImportStatusApiUrl = (courseId, fileName) => `${getApiBaseUrl()}
  * @returns {Promise<Object>}
  */
 export async function startCourseImporting(courseId, fileData, requestConfig) {
-  const { data } = await getAuthenticatedHttpClient()
-    .post(postImportCourseApiUrl(courseId), { 'course-data': fileData }, { headers: { 'content-type': 'multipart/form-data' }, ...requestConfig });
-  return camelCaseObject(data);
+  const chunkSize = 20 * 1000000; // 20 MB
+  const fileSize = fileData.size || 0;
+  const chunkLength = Math.ceil(fileSize / chunkSize);
+  let resp;
+
+  const upload = async (blob, start, stop) => {
+    const contentRange = `bytes ${start}-${stop}/${fileSize}`;
+    const contentDisposition = `attachment; filename="${fileData.name}"`;
+    const headers = {
+      'Content-Range': contentRange,
+      'Content-Disposition': contentDisposition,
+    };
+    const formData = new FormData();
+    formData.append('course-data', blob, fileData.name);
+    const { data } = await getAuthenticatedHttpClient()
+      .post(
+        postImportCourseApiUrl(courseId),
+        formData,
+        { headers, ...requestConfig },
+      );
+    resp = camelCaseObject(data);
+  };
+
+  const chunkUpload = async (file, index) => {
+    const start = index * chunkSize;
+    const stop = start + chunkSize < fileSize ? start + chunkSize : fileSize;
+    const blob = file.slice(start, stop, file.type);
+    await upload(blob, start, stop - 1);
+  };
+
+  /* eslint-disable no-await-in-loop */
+  for (let i = 0; i < chunkLength; i++) {
+    await chunkUpload(fileData, i);
+  }
+
+  return resp;
 }
 
 /**

src/import-page/data/api.test.jsx

@@ -25,11 +25,11 @@ describe('API Functions', () => {
   });
 
   it('should fetch status on start importing', async () => {
+    const file = new File(['(⌐□_□)'], 'download.tar.gz', { size: 20 });
     const data = { importStatus: 1 };
     axiosMock.onPost(postImportCourseApiUrl(courseId)).reply(200, data);
 
-    const result = await startCourseImporting(courseId);
-
+    const result = await startCourseImporting(courseId, file);
     expect(axiosMock.history.post[0].url).toEqual(postImportCourseApiUrl(courseId));
     expect(result).toEqual(data);
   });

src/import-page/import-sidebar/ImportSidebar.jsx

@@ -42,7 +42,6 @@ const ImportSidebar = ({ intl, courseId }) => {
         className="small"
         href={importLearnMoreUrl}
         target="_blank"
-        variant="outline-primary"
       >
         {intl.formatMessage(messages.learnMoreButtonTitle)}
       </Hyperlink>