react-simple-file-input - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/FileInput.js

@@ -47,3 +47,3 @@ 'use strict';
     cancelIf: _reactAddons2['default'].PropTypes.func,
-    abortIf: _reactAddons2['default'].PropTypes.oneOf(_reactAddons2['default'].PropTypes.func, _reactAddons2['default'].PropTypes.boolean)
+    abortIf: _reactAddons2['default'].PropTypes.func
   },
@@ -101,10 +101,7 @@
       fileReader.onprogress = function (event) {
-
-        if (typeof abortIf === 'function' && abortIf(event) || abortIf) {
+        if (abortIf(event, file)) {
           fileReader.abort();
+        } else if (onProgress) {
+          onProgress(event, file);
         }
-
-        if (onProgress) {
-          onProgress(event);
-        }
       };
@@ -111,0 +108,0 @@ } else if (onProgress) {

package.json

 {
   "name": "react-simple-file-input",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Simple wrapper for the HTML input tag and HTML5 FileReader API",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -20,2 +20,4 @@ # react-simple-file-input
 
+#### FileReader events
+
 - onLoadStart
@@ -30,2 +32,20 @@ - onProgress
 
+#### Custom events
+
+- onCancel
+
+The `onCancel` handler receives the `File` object corresponding to the file the user attempted to read from the file system.
+
+### Aborting \& cancelling file reads
+
+react-simple-file-input provides two props for canceling and aborting file reads
+
+#### Cancelling the file read before it begins
+
+The `cancelIf` prop accepts a function that receives the `File` object. If the function is defined and returns a truthy value then the file upload will be cancelled before it begins reading from the filesystem and the `onCancel` handler is called with the file object. 
+ 
+### Aborting the file read once it has begun
+
+If defined the `abortIf` function is executed just before every time the `onProgress` handler is called. It is passed the native event and the file object as arguments, respectively and if it returns a truthy value it aborts the file read and calls the `onAbort` handler. The `onProgress` event is *not* called if the file read aborts. 
+ 
 ### Children
@@ -40,2 +60,12 @@
 
+var allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+function fileIsIncorrectFiletype(file){
+  if (allowedFileTypes.indexOf(file.type) === -1) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
 var Component = React.createClass({
@@ -53,2 +83,6 @@
             onProgress={this.updateProgressBar}
+            cancelIf={fileIsIncorrectFiletype}
+            onCancel={this.showInvalidFileTypeMessage}
+            abortIf={this.cancelButtonClicked}
+            onAbort={this.resetCancelButtonClicked}
             >
@@ -61,2 +95,14 @@ Click Here
   
+  cancelButtonClicked: function(){
+    return this.state.cancelButtonClicked;  
+  },
+  
+  resetCancelButtonClicked: function(){
+    this.setState({ cancelButtonClicked: false });
+  },
+  
+  showInvalidFileTypeMessage: function(file){
+    window.alert("Tried to upload invalid filetype " + file.type);
+  },
+  
   showProgressBar: function(){
@@ -63,0 +109,0 @@ this.setState({ progressBarVisible: true});

No alert changes

Improved metrics

Total package byte prevSize

8163

24.47%

Number of lines in readme file

119

63.01%

Worsened metrics

Lines of code

111

-0.89%

No dependency changes