Fixes: error handling on New Form when underlying file is changed.

e2e-tests/backend-client.js

@@ -110,6 +110,12 @@ export default class BackendClient {
     expect(response).toBeOK();
   };
 
+  deleteForm = async (xmlFormId) => {
+    const request = await this.#getRequest();
+    const response = await request.delete(`/v1/projects/${projectId}/forms/${xmlFormId}`);
+    expect(response).toBeOK();
+  };
+
   createFormAndChildren = async () => {
     const form = await this.createForm();
     const submission = await this.createSubmission(form.xmlFormId);

e2e-tests/data/form-without-meta.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms"
+  xmlns:h="http://www.w3.org/1999/xhtml"
+  xmlns:jr="http://openrosa.org/javarosa"
+  xmlns:odk="http://www.opendatakit.org/xforms"
+  xmlns:orx="http://openrosa.org/xforms">
+  <h:head>
+    <h:title>Missing meta element</h:title>
+    <model>
+      <instance>
+        <data id="missing-meta">
+          <firstname/>
+        </data>
+      </instance>
+      <bind nodeset="/data/firstname"/>
+    </model>
+  </h:head>
+  <h:body>
+    <input ref="/data/firstname">
+      <label>First Name</label>
+    </input>
+  </h:body>
+</h:html>

e2e-tests/tests/form-upload.spec.js

@@ -0,0 +1,117 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+import BackendClient from '../backend-client';
+
+const appUrl = process.env.ODK_URL;
+const user = process.env.ODK_USER;
+const password = process.env.ODK_PASSWORD;
+const projectId = process.env.PROJECT_ID;
+
+let publishedForm;
+
+test.beforeAll(async ({ playwright }, testInfo) => {
+  const backendClient = new BackendClient(playwright, `${testInfo.project.name}_form_upload`);
+  await backendClient.alwaysHideModal();
+  publishedForm = await backendClient.createForm();
+  await backendClient.dispose();
+});
+
+const login = async (page) => {
+  await page.goto(appUrl);
+  await expect(page.getByRole('heading', { name: 'Log in' })).toBeVisible();
+
+  await page.getByPlaceholder('email address').fill(user);
+  await page.getByPlaceholder('password').fill(password);
+
+  await page.getByRole('button', { name: 'Log in' }).click();
+
+  await page.waitForURL(appUrl);
+};
+
+test.describe('Form Upload', () => {
+  test('clears file input when server returns an error', async ({ page }) => {
+    await login(page);
+
+    // Navigate to create form page
+    await page.goto(`${appUrl}/#/projects/${projectId}`);
+    await page.getByRole('button', { name: 'New' }).click();
+
+    // Verify modal is open
+    await expect(page.locator('#form-new')).toBeVisible();
+
+    const formXml = path.join(__dirname, '../data/form-without-meta.xml');
+
+    await page.locator('#form-new input[type="file"]').setInputFiles(formXml);
+
+    // Verify filename is displayed
+    await expect(page.locator('#form-new-filename')).toContainText('form-without-meta');
+
+    // Click upload
+    await page.getByRole('button', { name: 'Upload' }).click();
+
+    // Wait for error alert to appear
+    await expect(page.locator('#form-new .red-alert')).toContainText("The form does not contain a 'meta' group");
+
+    // Verify file input is cleared (filename should not be visible)
+    await expect(page.locator('#form-new-filename')).not.toBeVisible();
+  });
+
+  test('shows error when file is modified before clicking upload anyway', async ({ page, playwright }, testInfo) => {
+    // Delete the form to put it in trash
+    const backendClient = new BackendClient(playwright, `${testInfo.project.name}_form_upload`);
+    await backendClient.deleteForm(publishedForm.xmlFormId);
+    await backendClient.dispose();
+
+    // Create a temp file with the same formId as the deleted form
+    const formTemplate = fs.readFileSync(
+      path.join(__dirname, '../data/form.template.xml'),
+      'utf8'
+    );
+    const formXml = formTemplate.replaceAll('{{ formId }}', publishedForm.xmlFormId);
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'form-upload-test-'));
+    const tempFilePath = path.join(tempDir, `${publishedForm.xmlFormId}.xml`);
+    fs.writeFileSync(tempFilePath, formXml);
+
+    try {
+      await login(page);
+
+      // Navigate to create form page
+      await page.goto(`${appUrl}/#/projects/${projectId}`);
+      await page.getByRole('button', { name: 'New' }).click();
+
+      // Verify modal is open
+      await expect(page.locator('#form-new')).toBeVisible();
+
+      // Upload the temp file
+      await page.locator('#form-new input[type="file"]').setInputFiles(tempFilePath);
+
+      // Verify filename is displayed
+      await expect(page.locator('#form-new-filename')).toContainText(publishedForm.xmlFormId);
+
+      // Click upload
+      await page.getByRole('button', { name: 'Upload' }).click();
+
+      // Expect a warning that form with the same ID exists in the trash
+      await expect(page.locator('.modal-warnings')).toBeVisible();
+      await expect(page.locator('.modal-warnings')).toContainText('Trash');
+
+      // Modify the temp file
+      fs.writeFileSync(tempFilePath, formXml.replaceAll(publishedForm.xmlFormId, `${publishedForm.xmlFormId}_new`));
+
+      // Click "Upload anyway"
+      await page.getByRole('button', { name: 'Upload anyway' }).click();
+
+      // Expect error that file has been modified
+      await expect(page.locator('#form-new .red-alert')).toContainText('could not be read');
+
+      // Verify file input and warnings are cleared
+      await expect(page.locator('#form-new-filename')).not.toBeVisible();
+      await expect(page.locator('.modal-warnings')).not.toBeVisible();
+    } finally {
+      // Clean up temp directory
+      // fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+});

src/components/form/new.vue

@@ -200,6 +200,21 @@ export default {
         return;
       }
 
+      // Assumption: If file is changed/deleted on the disk then it won't be readable
+      if (ignoreWarnings) {
+        const reader = new FileReader();
+        reader.onload = () => this.performUpload(ignoreWarnings);
+        reader.onerror = () => {
+          this.redAlert.show(this.$t('alert.fileNotReadable'));
+          this.file = null;
+          this.warnings = null;
+        };
+        reader.readAsArrayBuffer(this.file);
+      } else {
+        this.performUpload(ignoreWarnings);
+      }
+    },
+    performUpload(ignoreWarnings) {
       const query = ignoreWarnings ? { ignoreWarnings } : null;
       const headers = { 'Content-Type': this.contentType };
       if (this.contentType !== 'application/xml') {
@@ -242,7 +257,10 @@ export default {
           }
         })
         .catch(() => {
-          if (this.$route === initialRoute) this.warnings = null;
+          if (this.$route === initialRoute) {
+            this.warnings = null;
+            this.file = null;
+          }
         });
     },
     removeLearnMore(value) {
@@ -314,7 +332,8 @@ export default {
       "uploadAnyway": "Upload anyway"
     },
     "alert": {
-      "fileRequired": "Please choose a file."
+      "fileRequired": "Please choose a file.",
+      "fileNotReadable": "The file could not be read. It may have been modified or deleted. Please choose the file again."
     },
     "problem": {
       "400_8": "The Form definition you have uploaded does not appear to be for this Form. It has the wrong formId (expected “{expected}”, got “{actual}”).",

test/components/form/new.spec.js

@@ -623,7 +623,7 @@ describe('FormNew', () => {
           modal.should.alert('danger');
           modal.get('.modal-warnings').should.be.hidden();
         })
-        .request(modal => modal.get('#form-new-upload-button').trigger('click'))
+        .request(upload)
         .respondWithProblem(xlsFormWarning)
         .afterResponse(modal => {
           modal.should.not.alert();

transifex/strings_en.json

@@ -3431,6 +3431,9 @@
       "alert": {
         "fileRequired": {
           "string": "Please choose a file."
+        },
+        "fileNotReadable": {
+          "string": "The file could not be read. It may have been modified or deleted. Please choose the file again."
         }
       },
       "problem": {

vite.config.js

@@ -31,6 +31,7 @@ const proxyPaths = [
 ];
 const devServer = {
   port: 8989,
+  host: true,
   proxy: Object.fromEntries(proxyPaths.map(path => [path, 'http://localhost:8686'])),
   // Because we proxy to nginx, which itself proxies to Backend and other
   // things, the dev server doesn't need to allow CORS. CORS is already limited