LG-3589: List supported MIME types for file input accept pattern

app/javascript/packages/document-capture/components/acuant-capture.jsx

@@ -200,7 +200,7 @@ function AcuantCapture(
         label={label}
         hint={hasCapture || !allowUpload ? undefined : t('doc_auth.tips.document_capture_hint')}
         bannerText={bannerText}
-        accept={isMockClient ? undefined : ['image/*']}
+        accept={isMockClient ? undefined : ['image/jpeg', 'image/png', 'image/bmp', 'image/tiff']}
         capture={capture}
         value={value}
         errorMessage={ownErrorMessage ?? errorMessage}

app/javascript/packages/document-capture/components/file-input.jsx

@@ -119,7 +119,7 @@ const FileInput = forwardRef((props, ref) => {
       if (isValidForAccepts(file.type, accept)) {
         onChange(file);
       } else {
-        const nextOwnErrorMessage = t('errors.doc_auth.selfie');
+        const nextOwnErrorMessage = t('errors.file_input.invalid_type');
         setOwnErrorMessage(nextOwnErrorMessage);
         onError(nextOwnErrorMessage);
       }

config/js_locale_strings.yml

@@ -54,6 +54,7 @@
 - errors.doc_auth.photo_blurry
 - errors.doc_auth.photo_glare
 - errors.doc_auth.selfie
+- errors.file_input.invalid_type
 - errors.messages.format_mismatch
 - errors.messages.missing_field
 - forms.buttons.continue

config/locales/errors/en.yml

@@ -71,6 +71,8 @@ en:
         Try taking a new picture.
       send_link_throttle: You tried too many times, please try again in 10 minutes.
         You can also click on Start Over and choose to use your computer instead.
+    file_input:
+      invalid_type: This file type is not accepted, please choose another file.
     invalid_authenticity_token: Oops, something went wrong. Please try again.
     invalid_totp: Invalid code. Please try again.
     max_password_attempts_reached: You've entered too many incorrect passwords. You

config/locales/errors/es.yml

@@ -72,6 +72,8 @@ es:
         Intente tomar una nueva foto.
       send_link_throttle: Lo intentaste muchas veces, vuelve a intentarlo en 10 minutos.
         También puedes hacer clic en comenzar de nuevo y elegir usar tu computadora.
+    file_input:
+      invalid_type: Este tipo de archivo no es aceptado, elija otro archivo.
     invalid_authenticity_token: "¡Oops! Algo salió mal. Inténtelo de nuevo."
     invalid_totp: El código es inválido. Vuelva a intentarlo.
     max_password_attempts_reached: Ha ingresado demasiadas contraseñas incorrectas.

config/locales/errors/fr.yml

@@ -73,6 +73,9 @@ fr:
       send_link_throttle: Vous avez essayé plusieurs fois, essayez à nouveau dans
         10 minutes. Vous pouvez également cliquer sur recommencer et choisir d'utiliser
         votre ordinateur.
+    file_input:
+      invalid_type: Ce type de fichier n'est pas accepté, veuillez choisir un autre
+        fichier.
     invalid_authenticity_token: Oups, une erreur s'est produite. Veuillez essayer
       de nouveau.
     invalid_totp: Code non valide. Veuillez essayer de nouveau.

spec/javascripts/packages/document-capture/components/acuant-capture-spec.jsx

@@ -335,13 +335,13 @@ describe('document-capture/components/acuant-capture', () => {
       const input = getByLabelText('Image');
       userEvent.upload(input, file);
 
-      expect(await findByText('errors.doc_auth.selfie')).to.be.ok();
+      expect(await findByText('errors.file_input.invalid_type')).to.be.ok();
 
       const button = getByText('doc_auth.buttons.take_picture');
       fireEvent.click(button);
 
       expect(getByText('errors.doc_auth.photo_blurry')).to.be.ok();
-      expect(() => getByText('errors.doc_auth.selfie')).to.throw();
+      expect(() => getByText('errors.file_input.invalid_type')).to.throw();
     });
 
     it('removes error message once image is corrected', async () => {
@@ -592,6 +592,6 @@ describe('document-capture/components/acuant-capture', () => {
 
     const input = getByLabelText('Image');
 
-    expect(input.getAttribute('accept')).to.equal('image/*');
+    expect(input.getAttribute('accept')).to.equal('image/jpeg,image/png,image/bmp,image/tiff');
   });
 });

spec/javascripts/packages/document-capture/components/file-input-spec.jsx

@@ -44,11 +44,11 @@ describe('document-capture/components/file-input', () => {
     });
 
     it('returns a pattern for mime type matching', () => {
-      const accept = 'image/jpg';
+      const accept = 'image/jpeg';
       const pattern = getAcceptPattern(accept);
 
-      expect(pattern.test('image/jpg')).to.be.true();
-      expect(pattern.test('ximage/jpg')).to.be.false();
+      expect(pattern.test('image/jpeg')).to.be.true();
+      expect(pattern.test('ximage/jpeg')).to.be.false();
       expect(pattern.test('audio/mp3')).to.be.false();
       expect(pattern.test('video/mp4')).to.be.false();
     });
@@ -299,8 +299,8 @@ describe('document-capture/components/file-input', () => {
     const input = getByLabelText('File');
     userEvent.upload(input, file);
 
-    expect(getByText('errors.doc_auth.selfie')).to.be.ok();
-    expect(onError.getCall(0).args[0]).to.equal('errors.doc_auth.selfie');
+    expect(getByText('errors.file_input.invalid_type')).to.be.ok();
+    expect(onError.getCall(0).args[0]).to.equal('errors.file_input.invalid_type');
   });
 
   it('shows an error from rendering parent', () => {
@@ -313,13 +313,13 @@ describe('document-capture/components/file-input', () => {
     const input = getByLabelText('File');
     userEvent.upload(input, file);
 
-    expect(getByText('errors.doc_auth.selfie')).to.be.ok();
-    expect(onError.getCall(0).args[0]).to.equal('errors.doc_auth.selfie');
+    expect(getByText('errors.file_input.invalid_type')).to.be.ok();
+    expect(onError.getCall(0).args[0]).to.equal('errors.file_input.invalid_type');
 
     rerender(<FileInput {...props} errorMessage="Oops!" />);
 
     expect(getByText('Oops!')).to.be.ok();
-    expect(() => getByText('errors.doc_auth.selfie')).to.throw();
+    expect(() => getByText('errors.file_input.invalid_type')).to.throw();
     expect(onError.callCount).to.equal(1);
   });