fix: escape regex operators in upload accept pattern (#4641)

vaadin · Sep 28, 2022 · 247920e · 247920e
1 parent a700eb3
commit 247920e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/upload/src/vaadin-upload.js b/packages/upload/src/vaadin-upload.js
@@ -99,7 +99,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
           <slot name="drop-label-icon">
             <div part="drop-label-icon"></div>
           </slot>
-          <slot name="drop-label" id="dropLabel"> [[_i18nPlural(maxFiles, i18n.dropFiles, i18n.dropFiles.*)]] </slot>
+          <slot name="drop-label" id="dropLabel"> [[_i18nPlural(maxFiles, i18n.dropFiles, i18n.dropFiles.*)]]</slot>
         </div>
       </div>
       <slot name="file-list">
@@ -780,7 +780,10 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       return;
     }
     const fileExt = file.name.match(/\.[^.]*$|$/)[0];
-    const re = new RegExp(`^(${this.accept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*')})$`, 'i');
+    // Escape regex operators common to mime types
+    const escapedAccept = this.accept.replace(/[+.]/g, '\\$&');
+    // Create accept regex that can match comma separated patterns, star (*) wildcards
+    const re = new RegExp(`^(${escapedAccept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*')})$`, 'i');
     if (this.accept && !(re.test(file.type) || re.test(fileExt))) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {

diff --git a/packages/upload/test/adding-files.test.js b/packages/upload/test/adding-files.test.js
@@ -268,5 +268,19 @@ describe('file list', () => {
       upload._addFiles([file]);
       expect(upload.files.length).to.equal(1);
     });
+
+    it('should allow files when using regex operators in accept string', () => {
+      file = createFile(testFileSize, 'image/svg+xml');
+      upload.accept = 'image/svg+xml';
+      upload._addFiles([file]);
+      expect(upload.files.length).to.equal(1);
+    });
+
+    it('should reject files when accept contains regex single character wildcard and file type is not an exact match', () => {
+      file = createFile(testFileSize, 'application/vndxms-excel');
+      upload.accept = 'application/vnd.ms-excel';
+      upload._addFiles([file]);
+      expect(upload.files.length).to.equal(0);
+    });
   });
 });