files and javascript
TRANSCRIPT
Files and JavascriptDASHUKEVICH 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";
ExcelSheet.SaveAs("C:\\TEST.XLS");
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 browsers.
<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“ event2.Take a look at “clipboardData”
property
Copy XLS
CTRL+C and CTRL+V (All browsers)1. Create <div contenteditable ></div>2. Catch “paste“ event3. After timeout take the content from the
div element (base64)
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("DownloadURL", "application/pdf:doc.pdf:http://you.com");
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);
3. localStorage4. indexDB
File System API
World without bugs
High salaries
Everything is great
Article
http://tinyurl.com/lusagk5
Your questions?