Files and JavaScript

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?