上传文件组件无法显示文件名 // Upload Component couldn't display file name

[jixunmoe]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.4

Environment

Chrome 66.0.3359.117 (Fedora x64), Firefox 59.0.2 (Fedora x64), Chrome 66.0.3359.139 (Win 10 x64)

Reproduction link

http://ant.design/components/upload

Steps to reproduce

1. 左侧，第二个例子。
2. 选择一个文件上传。

.

1. Left section, second example from top.
2. Select any file.

What is expected?

能显示文件名。

File name shown as expected.

What is actually happening?

无法显示文件名（文件属性未能正确拷贝，在 /antd/es/upload/utils 的 fileToObject 函数）。

Blank file name (file properties was not copied in /antd/es/upload/utils, method fileToObject).

---

在 onChange 回调设定断点进行调试，可以发现以下特性：

const { file } = info;

> JSON.stringify(file)
< "{"uid":"rc-upload-1525188854561-2","percent":0,"originFileObj":{"uid":"rc-upload-1525188854561-2"},"status":"uploading"}"

> Object.keys(file.originFileObj)
< ["uid"]

> Object.keys(file.originFileObj.__proto__)
< (4) ["name", "lastModified", "lastModifiedDate", "webkitRelativePath"]

临时解决方案（Monkey-patch workaround）

在引导文件加入或引用下述代码 // Add or reference the following code in app entry：

const uploadUtils = require('antd/es/upload/utils');
uploadUtils.fileToObject = function (file) {
  const fileDuplicated = {};
  if (file && file.__proto__) {
    Object.keys(file.__proto__).forEach(key => {
      fileDuplicated[key] = file[key];
    });
  }
  return {
    // file: uid
    ...file,
    // fileDuplicated: other `File` props.
    ...fileDuplicated,

    percent: 0,
    originFileObj: file,
  };
};

---

题外话：前两天还是正常的，今天突然显示不了了，应该是浏览器更新了。

[ant-design-bot]

Translation of this issue:

---

upload file can't display file name // Upload Component couldn't display file name

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.4

Environment

Chrome 66.0.3359.117, Firefox 59.0.2

Reproduction link

[http://ant.design/components/upload] (http://ant.design/components/upload)

Steps to reproduce

1. Left, second example.

2. Select a file to upload.

3. Left section, second example from top.

4. Select any file.

What is expected?

Can display the file name.

File name shown as expected.

What is actually happening?

Unable to display file name (file attribute was not copied correctly in fileToObject function of /antd/es/upload/utils).

Blank file name (file properties was not copied in /antd/es/upload/utils, method fileToObject).

---

To debug at the onChange callback setting breakpoint, you can find the following features:

Const { file } = info;

> JSON.stringify(file)
< "{"uid":"rc-upload-1525188854561-2","percent":0,"originFileObj":{"uid":"rc-upload-1525188854561-2"},"status":"uploading" }"

> Object.keys(file.originFileObj)
< ["uid"]

> Object.keys(file.originFileObj.__proto__)
< (4) ["name", "lastModified", "lastModifiedDate", "webkitRelativePath"]

Monkey-patch workaround

Add or reference the following code in the boot file // Add or reference the following code in app entry:

Const uploadUtils = require('antd/es/upload/utils');
uploadUtils.fileToObject = function (file) {
  Const fileDuplicated = {};
  If (file && file.__proto__) {
    Object.keys(file.__proto__).forEach(key => {
      fileDuplicated[key] = file[key];
    });
  }
  Return {
    // file: uid
    ...file,
    // fileDuplicated: other `File` props.
    ...fileDuplicated,

    Percent: 0,
    originFileObj: file,
  };
};

---

Digression: The first two days are still normal, and suddenly it cannot be displayed today. It should be a browser update.

[jixunmoe]

感觉把 issue 放到 react-component/upload 会比较好一些…

[yociduo]

应该是这个change引起的，可不可以回退回去？