diff --git a/index.html b/index.html index 86760e6..55b6cf6 100644 --- a/index.html +++ b/index.html @@ -203,12 +203,39 @@

Clipboard

Usage

- There is no jQuery or any other library dependancy for FileReader.js. It will work with a simple call to + There is no jQuery or any other library dependancy for FileReader.js. + +

Markup

 <script type='text/javascript' src='filereader.js'></script>
 
+

Usage

+

+ You don't need any other libraries. It can be called after adding the script with: +

+
+// Accept files from the specified input[type=file]
+FileReaderJS.setupInput(document.getElementById('file-input'), options);
+
+// Accept dropped files on the specified file
+FileReaderJS.setupDrop(document.getElementById('dropzone'), options);
+
+// Accept paste events if available
+FileReaderJS.setupClipboard(document.body, options);
+
+// Attempt to use FileReaderSync in a worker if available.
+FileReaderJS.setSync(true/false);
+
+

+ If you use jQuery, you could use it as such: +

+
+$("#file-input, #dropzone").fileReaderJS(opts);
+$("body").fileClipboard(opts);
+
+

Options

-var opts = {
+var options = {
   // CSS Class to add to the drop element when a drag is active
   dragClass: "drag",
 
@@ -252,26 +279,23 @@ 

Usage

} };
+

Simple Example

+

+ Ready to get started? Here is a sample that reads all files dropped on the body as data URLs. You can also check out this sample on jsfiddle. +

-// Accept files from the specified input[type=file]
-FileReaderJS.setupInput(document.getElementById('file-input'), opts);
-
-// Accept dropped files on the specified file
-FileReaderJS.setupDrop(document.getElementById('dropzone'), opts);
-
-// Accept paste events if available
-FileReaderJS.setupClipboard(document.body, opts);
-
-// Attempt to use FileReaderSync in a worker if available.
-FileReaderJS.setSync(true/false);
-
-

-

- If you do use jQuery, you could use it as such: -

-
-$("#file-input, #dropzone").fileReaderJS(opts);
-$("body").fileClipboard(opts);
+FileReaderJS.setupDrop(document.body, {
+  readAsDefault: "DataURL",
+  on: {
+    load: function(e, file) {
+      var img = new Image();
+      img.onload = function() {
+        document.body.appendChild(img);
+      };
+      img.src = e.target.result;
+    }
+  }
+});