Merge pull request #266 from opendatakit/content-type-from-extension

Determine content type of form based on file extension
getodk · Nov 28, 2019 · 4dc05d9 · 4dc05d9
2 parents dd0b710 + e739885
commit 4dc05d9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/src/components/form/new.vue b/src/components/form/new.vue
@@ -114,6 +114,17 @@ export default {
         'form-new-disabled': this.awaitingResponse,
         'form-new-dragover': this.fileIsOverDropZone
       };
+    },
+    // Returns the inferred content type of the file based on its extension. (We
+    // first tried using this.file.type rather than inferring the content type,
+    // but that didn't work in Edge.)
+    contentType() {
+      const { name } = this.file;
+      if (name.length >= 5 && name.slice(-5) === '.xlsx')
+        return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+      if (name.length >= 4 && name.slice(-4) === '.xls')
+        return 'application/vnd.ms-excel';
+      return 'application/xml';
     }
   },
   watch: {
@@ -151,18 +162,9 @@ export default {
 
       const queryString = ignoreWarnings ? '?ignoreWarnings=true' : '';
       const url = `/projects/${this.project.id}/forms${queryString}`;
-
-      const headers = {};
-      const isExcel = this.file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-        this.file.type === 'application/vnd.ms-excel';
-      if (isExcel) {
-        headers['Content-Type'] = this.file.type;
+      const headers = { 'Content-Type': this.contentType };
+      if (this.contentType !== 'application/xml')
         headers['X-XlsForm-FormId-Fallback'] = this.file.name.replace(/\.xlsx?$/, '');
-      // We assume that the file is XML if it is not an Excel file.
-      } else {
-        headers['Content-Type'] = 'application/xml';
-      }
-
       const { currentRoute } = this.$store.state.router;
       this.request({
         method: 'POST',

diff --git a/test/components/form/new.spec.js b/test/components/form/new.spec.js
@@ -127,7 +127,9 @@ describe('FormNew', () => {
       mockHttp()
         .mount(FormNew, {
           propsData: { state: true },
-          requestData: { project: testData.extendedProjects.createPast(1).last() }
+          requestData: {
+            project: testData.extendedProjects.createPast(1).last()
+          }
         })
         .request(modal => selectFileByInput(modal, xlsForm())
           .then(() => trigger.click(modal, '#form-new-create-button')))
@@ -136,6 +138,44 @@ describe('FormNew', () => {
           config.headers['X-XlsForm-FormId-Fallback'].should.equal('my_form');
         })
         .respondWithProblem());
+
+    it('sends the correct headers for an .xls file', () =>
+      mockHttp()
+        .mount(FormNew, {
+          propsData: { state: true },
+          requestData: {
+            project: testData.extendedProjects.createPast(1).last()
+          }
+        })
+        .request(modal => {
+          const type = 'application/vnd.ms-excel';
+          const file = new File([''], 'my_form.xls', { type });
+          return selectFileByInput(modal, file)
+            .then(() => trigger.click(modal, '#form-new-create-button'));
+        })
+        .beforeEachResponse((modal, config) => {
+          config.headers['Content-Type'].should.equal('application/vnd.ms-excel');
+          config.headers['X-XlsForm-FormId-Fallback'].should.equal('my_form');
+        })
+        .respondWithProblem());
+
+    it('determines the content type based on the file extension', () =>
+      mockHttp()
+        .mount(FormNew, {
+          propsData: { state: true },
+          requestData: {
+            project: testData.extendedProjects.createPast(1).last()
+          }
+        })
+        .request(modal => {
+          const file = new File([''], 'my_form.xlsx', { type: 'application/xml' });
+          return selectFileByInput(modal, file)
+            .then(() => trigger.click(modal, '#form-new-create-button'));
+        })
+        .beforeEachResponse((modal, config) => {
+          config.headers['Content-Type'].should.equal('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+        })
+        .respondWithProblem());
   });
 
   it('implements some standard button things', () => {