Uploading a big image file is freezing an app for few seconds

[etherreals]

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

Reproduction link

Steps to reproduce

Try to upload image file with 20mb size

What is expected?

The app should work as before

What is actually happening?

The app is freezing for 4 seconds (between 10 and 14 seconds on the screenshot) on my mac (i5-7360U 2.3GHz)

Environment	Info
antd	3.16.1
React	16.8.4
System	macOS Mojave 10.14.2 (18C54)
Browser	Chrome Version 72.0.3626.121 (Official Build) (64-bit)

---

It happens because Upload component tries to make thumbnail from image file. It calls FileReader for it and if file is big it will freeze the app
I think we should add size check, for example don't make thumbnail preview if image size is bigger than 10mb.

If it ok, I can do PR

[zombieJ]

Maybe we can provide previewFile prop to developer for customize the preview implement. (for example: Upload image / video files to the server and let server return to preview thumbnail)

cc @ztplz @afc163

ref: https://github.com/ant-design/ant-design/blob/master/components/upload/UploadList.tsx#L66

GitHub

ant-design/ant-design

🌈 A UI Design Language. Contribute to ant-design/ant-design development by creating an account on GitHub.

[ycjcl868]

readAsDataURL doesn't work well in a big image.

[etherreals]

Maybe it will be better if we add previewFile prop, if prop isn't passed there are 2 options: if file less than 1mb - call readAsDataURL, if bigger - show default icon.
What do you think?

[kanweiwei]

Data URI Limits
The data URI spec does not define a size limit but says applications may impose their own.

Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).
Firefox - unlimited
IE ≥ 9 & Edge - 4GB
Oprea - 65529 characters

reference:
https://bugs.chromium.org/p/chromium/issues/detail?id=44820#c1
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

44820 - Chrome crashed when dragging a image composed by data URI -

chromium -

Monorail

MDN Web Docs

Data URLs

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.