Fix image when file.url has query or hash

close #10102
ant-design · Apr 17, 2018 · 3b00cf8 · afc163 · Apr 17, 2018 · 3b00cf8
1 parent 7e82957
commit 3b00cf8
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 3 deletions.
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
@@ -19,15 +19,17 @@ const extname = (url: string) => {
   }
   const temp = url.split('/');
   const filename = temp[temp.length - 1];
-  return (/\.[^./\\]*$/.exec(filename) || [''])[0];
+  const filenameWithoutSuffix = filename.split(/\#|\?/)[0];
+  return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
 };
 
 const isImageUrl = (url: string): boolean => {
-  if (/^data:image\//.test(url) || /\.(webp|svg|png|gif|jpg|jpeg)$/.test(url)) {
+  const extension = extname(url);
+  if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg)$/.test(extension)) {
     return true;
   } else if (/^data:/.test(url)) { // other file types of base64
     return false;
-  } else if (extname(url)) { // other file types which have extension
+  } else if (extension) { // other file types which have extension
     return false;
   }
   return true;

diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
@@ -448,6 +448,108 @@ exports[`Upload List should non-image format file preview 1`] = `
         title="Remove file"
       />
     </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
+    <div
+      class="ant-upload-list-item ant-upload-list-item-done"
+    >
+      <div
+        class="ant-upload-list-item-info"
+      >
+        <span>
+          <a
+            class="ant-upload-list-item-thumbnail"
+            href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="image"
+              src="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
+            />
+          </a>
+          <a
+            class="ant-upload-list-item-name"
+            href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="image"
+          >
+            image
+          </a>
+        </span>
+      </div>
+      <i
+        class="anticon anticon-cross"
+        title="Remove file"
+      />
+    </div>
   </div>
 </span>
 `;
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
@@ -303,6 +303,24 @@ describe('Upload List', () => {
         url: 'https://cdn.xxx.com/xx.xx/aaa.png',
         thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
       },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -9,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=123',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -10,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png#anchor',
+      },
+      {
+        name: 'image',
+        status: 'done',
+        uid: -11,
+        url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot',
+      },
     ];
 
     const wrapper = mount(