From d4e36bc89fcebc09c85cfb4aaf00b10f2e11f49f Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Wed, 24 Mar 2021 09:41:11 -0400
Subject: [PATCH] Percent-encode X-XlsForm-FormId-Fallback header

Closes getodk/central#196.
---
 src/components/form/new.vue      | 11 ++++++-----
 test/components/form/new.spec.js | 28 ++++++++++++++++------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/form/new.vue b/src/components/form/new.vue
index b5b4044dd..99cf186fe 100644
--- a/src/components/form/new.vue
+++ b/src/components/form/new.vue
@@ -122,10 +122,9 @@ export default {
     // but that didn't work in Edge.)
     contentType() {
       const { name } = this.file;
-      if (name.length >= 5 && name.slice(-5) === '.xlsx')
+      if (name.endsWith('.xlsx'))
         return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-      if (name.length >= 4 && name.slice(-4) === '.xls')
-        return 'application/vnd.ms-excel';
+      if (name.endsWith('.xls')) return 'application/vnd.ms-excel';
       return 'application/xml';
     }
   },
@@ -165,8 +164,10 @@ export default {
 
       const query = ignoreWarnings ? { ignoreWarnings } : null;
       const headers = { 'Content-Type': this.contentType };
-      if (this.contentType !== 'application/xml')
-        headers['X-XlsForm-FormId-Fallback'] = this.file.name.replace(/\.xlsx?$/, '');
+      if (this.contentType !== 'application/xml') {
+        const fallback = this.file.name.replace(/\.xlsx?$/, '');
+        headers['X-XlsForm-FormId-Fallback'] = encodeURIComponent(fallback);
+      }
       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
index 7a1a02af9..71363ee28 100644
--- a/test/components/form/new.spec.js
+++ b/test/components/form/new.spec.js
@@ -244,11 +244,15 @@ describe('FormNew', () => {
             project: testData.extendedProjects.createPast(1).last()
           }
         })
-        .request(modal => selectFileByInput(modal, xlsForm())
-          .then(trigger.click('#form-new-upload-button')))
-        .beforeEachResponse((modal, config) => {
-          config.headers['Content-Type'].should.equal('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-          config.headers['X-XlsForm-FormId-Fallback'].should.equal('my_form');
+        .request(async (modal) => {
+          const type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+          const file = new File([''], 'formulář.xlsx', { type });
+          await selectFileByInput(modal, file);
+          return trigger.click(modal, '#form-new-upload-button');
+        })
+        .beforeEachResponse((_, { headers }) => {
+          headers['Content-Type'].should.equal('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+          headers['X-XlsForm-FormId-Fallback'].should.equal('formul%C3%A1%C5%99');
         })
         .respondWithProblem());
 
@@ -260,15 +264,15 @@ describe('FormNew', () => {
             project: testData.extendedProjects.createPast(1).last()
           }
         })
-        .request(modal => {
+        .request(async (modal) => {
           const type = 'application/vnd.ms-excel';
-          const file = new File([''], 'my_form.xls', { type });
-          return selectFileByInput(modal, file)
-            .then(trigger.click('#form-new-upload-button'));
+          const file = new File([''], 'formulář.xls', { type });
+          await selectFileByInput(modal, file);
+          return trigger.click(modal, '#form-new-upload-button');
         })
-        .beforeEachResponse((modal, config) => {
-          config.headers['Content-Type'].should.equal('application/vnd.ms-excel');
-          config.headers['X-XlsForm-FormId-Fallback'].should.equal('my_form');
+        .beforeEachResponse((_, { headers }) => {
+          headers['Content-Type'].should.equal('application/vnd.ms-excel');
+          headers['X-XlsForm-FormId-Fallback'].should.equal('formul%C3%A1%C5%99');
         })
         .respondWithProblem());