File API: Client-Side File Handling and Uploading to the Server

on YouTube ↗34m

" summary

A library replaces a Flash-only uploader with an HTML5 uploader that falls back to Flash when needed, providing APIs like GetFiles, AddInfoReader and a FileImage class for crop/scale/rotate/preview/toBlob. It uses FileReader to extract EXIF/ID3, creates previews via Data URLs or object URLs, performs client-side resizing to produce multiple transformed copies, and uploads files sequentially with progress via FormData or iframe transport for older browsers. Metrics showed Flash-only uploads failed ~10% (down to ~5% when co-hosted) and about 30% of users lacked required HTML5 features, supporting the hybrid approach.

AI-written summary · about

" chapters (22)

1. 0:00Introduction
2. 2:10Flash uploader problems
3. 6:05HTML5 vs Flash
4. 9:56File filtering metadata
5. 12:01Image preview
6. 15:17Image resizing
7. 16:19Upload methods
8. 20:34Parallel uploads validation
9. 22:39Drag-and-drop demo
10. 23:22Library updates plans
11. 24:03Q&A: Browser support
12. 26:13Q&A: Server validation
13. 27:17Q&A: IE6 resizing
14. 28:00Q&A: Flash stability
15. 28:49Q&A: Testing parts
16. 29:12Q&A: CDN performance
17. 29:32Q&A: Client validation
18. 30:16Q&A: Large file compression
19. 32:02Q&A: Server handling
20. 32:25Q&A: Compression features
21. 32:45Q&A: Library extensions
22. 33:05Q&A

" related talks

• 13mAn introduction to the File APICameron McCormack · Web Directions Code 2013
• 57mThe Naked Truth About FilesEhor Malkevych · HolyJS 2018 Moscow
• 24mImage uploads for mobile webAbinash Mohapatra · Fragments 2019
• 45mBytes and blobsDavid Flanagan · JSConf US 2011
• 43mperformance.now().reject(reasons) | Ilya GrigorikIlya Grigorik · performance.now() 2019
• 30mMultimedia file management in web applicationsMartina Lilla · jsday 2023
• 01h 01mThe 2021 edition of dealing with files on the WebThomas Steiner · HolyJS 2021 Moscow
• 36mTaking an Image Editor OfflineBradley Meck · HTML5.tx Texas 2013