how can we do with files in JavaScript.

1. Files and
Javascript
DASHUKEVICH VLADIMIR
21.05.2014

2. Files like a forbidden fruit

3. What is a File in JS?

4. File and FileList API

5. What is a Blob?

6. Blob is a simple stuff)

7. What is a Blob?

8. How to get data from
it?

9. We have to read them!

10. Use FileReader!

11. Read data as a text

12. File and FileReader support

13. How to get files from
browser?

14. ActiveX as a solution
var ExcelSheet = new
ActiveXObject("Excel.Sheet");
ExcelSheet.ActiveSheet.Cells(1,1).Value = "A";
ExcelSheet.SaveAs("C:TEST.XLS");

15. Ooooops!

16. NPAPI as a solution

17. You are really COOL!

18. How to get files from
browser?

19.  Input with “file“ type
 Catch “drop“ event
 CTRL+C -> CTRL+V
 Get them from server

20. Input with “file“ type
1. <input type="file" />
2. Listen to “change”event
3. Look at “files“ property in IE10+ and other
browsers.

21. <input type="file" multiple />

22. <input type="file" webkitdirectory />

23. Drag and
drop

24. Drag and drop
Catch drop and dragover
Take a look at “dataTransfer”
property of the event object

25. event.dataTransfer.files

26. event.dataTransfer.items

27. Webdrivers and Input
Send custom drop event

28. Copy/paste

29. CTRL+C и CTRL+V (Chrome)
1. Catch “paste“ event
2. Take a look at “clipboardData”
property

30. Copy XLS

31. CTRL+C and CTRL+V (All browsers)
1. Create <div contenteditable ></div>
2. Catch “paste“ event
3. After timeout take the content from the
div element (base64)

32. You are awesome!!!

33. Get files from server

34. Get them from server

35. Drag me out of browser
1. Catch dragstart
2. Create a link and set it like with “setDate”
method:
e.dataTransfer.setData("DownloadURL",
"application/pdf:doc.pdf:http://you.com");

36. Mythbusters(

37. The end is close)

38. What can we do with files on
the client side?

39. Create a link to the
files)

40. Parse XSL and XSLX files
XLS - https://github.com/SheetJS/js-xls
XLSX - https://github.com/SheetJS/js-xlsx

41. XLSX.read(data, {type: 'binary'});

42. Browsers support
Browsers: IE6+ (base64)
Formats: ZIP, base64, binary,
XLSX, XLSM, XLSB.

43. Data
compression

44. JSZip
new JSZip(zipDataFromXHR, {base64:false});

45. zip.js
Safari 5 and IE9 (less than
4GB)

46. Parse PDF

47. PDF.js
https://github.com/mozilla/pdf.js

48. PDF.js

49. Other
Edit images
Edit sounds
Edit other formats

50. Saving files

51. Saving
1. Iframe with a link to the file (Chrome,
FireFox)
2. execCommand (IE < 10) and
msSaveOrOpenBlob(blob, defaultName);
3. localStorage
4. indexDB

52. File System API

55. World without
bugs

56. High salaries

57. Everything is great

58. Article
http://tinyurl.com/lusagk5

59. Your questions?