fixes JakeHartnell#51 Eliminate invalid callbacks to onChange prop

src/component/index.js

@@ -33,55 +33,67 @@ class ReactImageUploadComponent extends React.Component {
 		this.inputElement.click();
 	}
 
-	/*
-	 Handle file validation
-	 */
-	onDropFile(e) {
-		const files = e.target.files;
-		const _this = this;
+    /*
+       Handle file validation
+       */
+    onDropFile(e) {
+        const files = e.target.files;
+        const allFilePromises = [];
 
-		// Iterate over all uploaded files
-		for (let i = 0; i < files.length; i++) {
-      let f = files[i];
-			// Check for file extension
-			if (!this.hasExtension(f.name)) {
-				const newArray = _this.state.notAcceptedFileType.slice();
-				newArray.push(f.name);
-				_this.setState({notAcceptedFileType: newArray});
-				continue;
-			}
-			// Check for file size
-			if(f.size > this.props.maxFileSize) {
-				const newArray = _this.state.notAcceptedFileSize.slice();
-				newArray.push(f.name);
-				_this.setState({notAcceptedFileSize: newArray});
-				continue;
-			}
+        // Iterate over all uploaded files
+        for (let i = 0; i < files.length; i++) {
+            let f = files[i];
+            // Check for file extension
+            if (!this.hasExtension(f.name)) {
+                const newArray = this.state.notAcceptedFileType.slice();
+                newArray.push(f.name);
+                this.setState({notAcceptedFileType: newArray});
+                continue;
+            }
+            // Check for file size
+            if(f.size > this.props.maxFileSize) {
+                const newArray = this.state.notAcceptedFileSize.slice();
+                newArray.push(f.name);
+                this.setState({notAcceptedFileSize: newArray});
+                continue;
+            }
 
-			const reader = new FileReader();
-			// Read the image via FileReader API and save image result in state.
-			reader.onload = (function () {
-				return function (e) {
-                    // Add the file name to the data URL
-                    let dataURL = e.target.result;
-                    dataURL = dataURL.replace(";base64", `;name=${f.name};base64`);
+            allFilePromises.push(this.readFile(f));
+        }
 
-                    if (_this.state.pictures.indexOf(dataURL) === -1) {
-                        const newArray = _this.state.pictures.slice();
-                        newArray.push(dataURL);
+        Promise.all(allFilePromises).then(newFilesData => {
+            const dataURLs = this.state.pictures.slice();
+            const files = this.state.files.slice();
 
-                        const newFiles = _this.state.files.slice();
-                        newFiles.push(f);
+            newFilesData.forEach(newFileData => {
+                dataURLs.push(newFileData.dataURL);
+                files.push(newFileData.file);
+            });
 
-                        _this.setState({pictures: newArray, files: newFiles}, () => {
-                            _this.props.onChange(_this.state.files, _this.state.pictures);
-                        });
-                    }
-				};
-			})(f);
-			reader.readAsDataURL(f);
-		}
-	}
+            this.setState({pictures: dataURLs, files: files}, () => {
+                this.props.onChange(this.state.files, this.state.pictures);
+            });
+        });
+    }
+
+    /*
+     Read a file and return a promise that when resolved gives the file itself and the data URL
+     */
+    readFile(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+
+            // Read the image via FileReader API and save image result in state.
+            reader.onload = function (e) {
+                // Add the file name to the data URL
+                let dataURL = e.target.result;
+                dataURL = dataURL.replace(";base64", `;name=${file.name};base64`);
+                resolve({file, dataURL});
+            };
+
+            reader.readAsDataURL(file);
+        });
+    }
 
   /*
    Render the upload icon