Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Files and
Javascript
DASHUKEVICH VLADIMIR
21.05.2014
Files like a forbidden fruit
What is a File in JS?
File and FileList API
What is a Blob?
Blob is a simple stuff)
What is a Blob?
How to get data from
it?
We have to read them!
Use FileReader!
Read data as a text
File and FileReader support
How to get files from
browser?
ActiveX as a solution
var ExcelSheet = new
ActiveXObject("Excel.Sheet");
ExcelSheet.ActiveSheet.Cells(1,1).Value = "A";
Ex...
Ooooops!
NPAPI as a solution
You are really COOL!
How to get files from
browser?
 Input with “file“ type
 Catch “drop“ event
 CTRL+C -> CTRL+V
 Get them from server
Input with “file“ type
1. <input type="file" />
2. Listen to “change”event
3. Look at “files“ property in IE10+ and other
...
<input type="file" multiple />
<input type="file" webkitdirectory />
Drag and
drop
Drag and drop
Catch drop and dragover
Take a look at “dataTransfer”
property of the event object
event.dataTransfer.files
event.dataTransfer.items
Webdrivers and Input
Send custom drop event
Copy/paste
CTRL+C и CTRL+V (Chrome)
1. Catch “paste“ event
2. Take a look at “clipboardData”
property
Copy XLS
CTRL+C and CTRL+V (All browsers)
1. Create <div contenteditable ></div>
2. Catch “paste“ event
3. After timeout take the c...
You are awesome!!!
Get files from server
Get them from server
Drag me out of browser
1. Catch dragstart
2. Create a link and set it like with “setDate”
method:
e.dataTransfer.setData("...
Mythbusters(
The end is close)
What can we do with files on
the client side?
Create a link to the
files)
Parse XSL and XSLX files
XLS - https://github.com/SheetJS/js-xls
XLSX - https://github.com/SheetJS/js-xlsx
XLSX.read(data, {type: 'binary'});
Browsers support
Browsers: IE6+ (base64)
Formats: ZIP, base64, binary,
XLSX, XLSM, XLSB.
Data
compression
JSZip
new JSZip(zipDataFromXHR, {base64:false});
zip.js
Safari 5 and IE9 (less than
4GB)
Parse PDF
PDF.js
https://github.com/mozilla/pdf.js
PDF.js
Other
Edit images
Edit sounds
Edit other formats
Saving files
Saving
1. Iframe with a link to the file (Chrome,
FireFox)
2. execCommand (IE < 10) and
msSaveOrOpenBlob(blob, defaultName...
File System API
World without
bugs
High salaries
Everything is great
Article
http://tinyurl.com/lusagk5
Your questions?
Files and JavaScript
Files and JavaScript
Upcoming SlideShare
Loading in …5
×

Files and JavaScript

1,082 views

Published on

how can we do with files in JavaScript.

Published in: Software, Technology
  • Be the first to comment

Files and JavaScript

  1. 1. Files and Javascript DASHUKEVICH VLADIMIR 21.05.2014
  2. 2. Files like a forbidden fruit
  3. 3. What is a File in JS?
  4. 4. File and FileList API
  5. 5. What is a Blob?
  6. 6. Blob is a simple stuff)
  7. 7. What is a Blob?
  8. 8. How to get data from it?
  9. 9. We have to read them!
  10. 10. Use FileReader!
  11. 11. Read data as a text
  12. 12. File and FileReader support
  13. 13. How to get files from browser?
  14. 14. ActiveX as a solution var ExcelSheet = new ActiveXObject("Excel.Sheet"); ExcelSheet.ActiveSheet.Cells(1,1).Value = "A"; ExcelSheet.SaveAs("C:TEST.XLS");
  15. 15. Ooooops!
  16. 16. NPAPI as a solution
  17. 17. You are really COOL!
  18. 18. How to get files from browser?
  19. 19.  Input with “file“ type  Catch “drop“ event  CTRL+C -> CTRL+V  Get them from server
  20. 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. 21. <input type="file" multiple />
  22. 22. <input type="file" webkitdirectory />
  23. 23. Drag and drop
  24. 24. Drag and drop Catch drop and dragover Take a look at “dataTransfer” property of the event object
  25. 25. event.dataTransfer.files
  26. 26. event.dataTransfer.items
  27. 27. Webdrivers and Input Send custom drop event
  28. 28. Copy/paste
  29. 29. CTRL+C и CTRL+V (Chrome) 1. Catch “paste“ event 2. Take a look at “clipboardData” property
  30. 30. Copy XLS
  31. 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. 32. You are awesome!!!
  33. 33. Get files from server
  34. 34. Get them from server
  35. 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. 36. Mythbusters(
  37. 37. The end is close)
  38. 38. What can we do with files on the client side?
  39. 39. Create a link to the files)
  40. 40. Parse XSL and XSLX files XLS - https://github.com/SheetJS/js-xls XLSX - https://github.com/SheetJS/js-xlsx
  41. 41. XLSX.read(data, {type: 'binary'});
  42. 42. Browsers support Browsers: IE6+ (base64) Formats: ZIP, base64, binary, XLSX, XLSM, XLSB.
  43. 43. Data compression
  44. 44. JSZip new JSZip(zipDataFromXHR, {base64:false});
  45. 45. zip.js Safari 5 and IE9 (less than 4GB)
  46. 46. Parse PDF
  47. 47. PDF.js https://github.com/mozilla/pdf.js
  48. 48. PDF.js
  49. 49. Other Edit images Edit sounds Edit other formats
  50. 50. Saving files
  51. 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. 52. File System API
  53. 53. World without bugs
  54. 54. High salaries
  55. 55. Everything is great
  56. 56. Article http://tinyurl.com/lusagk5
  57. 57. Your questions?

×