#2 Handle message when file is uploaded or not, disable upload button if there is no file to upload

Author: daniel.gomez

demo/Server.js

@@ -21,7 +21,6 @@ const storage = multer.diskStorage({
 
 const upload = multer({storage});
 
-
 const webpackCompiler = webpack(webpackConfig);
 
 require.extensions['.html'] = function (module, filename) {
@@ -53,15 +52,17 @@ router.get("/api/languages", (request, response) => {
     response.status(200).json(arr);
 });
 
-router.post("/upload", upload.array("fileData"), (request, response) => {
-   let files = request.files;
+router.post("/upload", (request, response) => {
 
+    upload.array("fileData")(request, response, (err) => {
+        if(err) {
+            response.json({status: false, message: "There was an error while uploading files."});
+            return;
+        }
 
-   files.forEach(file => {
-       console.log(JSON.stringify(file));
-   });
+        response.json({status: true, message: "Files correctly uploaded."});
 
-   response.end();
+    })
 
 });
 

src/components/common/GlyphButton.js

@@ -8,9 +8,14 @@ class GlyphButton extends Component {
         bsSize: PropTypes.string,
         text: PropTypes.string,
         glyph: PropTypes.string.isRequired,
-        onClick: PropTypes.func
+        onClick: PropTypes.func,
+        disabled: PropTypes.bool
     };
 
+    static defaultProps = {
+        disabled: false
+    }
+
     handleSave = () => {
         let { onClick } = this.props;
 
@@ -35,11 +40,11 @@ class GlyphButton extends Component {
     };
 
     render() {
-        let { bsSize, bsStyle,glyph } = this.props;
+        let { bsSize, bsStyle,glyph, disabled } = this.props;
         let text = this.getText();
 
         return (
-            <Button bsStyle={bsStyle} bsSize={bsSize} onClick={this.handleSave}>
+            <Button disabled={disabled} bsStyle={bsStyle} bsSize={bsSize} onClick={this.handleSave}>
                 <Glyphicon glyph={glyph}/>
                 { text }
             </Button>

src/components/field/FileUpload.js

@@ -12,15 +12,18 @@ export default class FileUpload extends Component {
 	};
 
 	state = {
-		files: []
+		files: [],
+        disableUpload: true
 	};
 
 	onDrop = (files) => {
 		//TODO filter to avoid duplicates
 		let fileArray = [...files, ...this.state.files];
 
-		this.setState({ files: fileArray });
-	};
+		this.setState({files: fileArray});
+        this.setState({disableUpload: false});
+
+    };
 
 	onClick = () => {
 		// TODO Handle response status for upload service
@@ -36,22 +39,26 @@ export default class FileUpload extends Component {
 		fetch(url, {
 			method: "POST",
 			body: fileData
-		});
+		})
+		.then(response => response.json())
+        .then(({message}) => alert(message));
 	};
 
 	deleteItem = (position) => {
 		let { files } = this.state;
 		files.splice(position, 1);
 
-		this.setState({ files: files });
+		this.setState({files: files});
+        this.setState({disableUpload: this.state.files.length == 0});
+
 	};
 
 	openDropZone = () => {
 		this.refs.dropzone.open();
 	};
 
 	render() {
-		let { files } = this.state;
+		let { files, disableUpload } = this.state;
 
 		const attachmentStyle = {
 			marginTop: "6px",
@@ -104,7 +111,7 @@ export default class FileUpload extends Component {
 					</Col>
 				</Row>
 				<Col>
-					<GlyphButton type="submit" glyph="cloud-upload" text="Upload" bsSize="sm" bsStyle="primary" onClick={this.onClick}/>
+					<GlyphButton disabled={disableUpload} type="submit" glyph="cloud-upload" text="Upload" bsSize="sm" bsStyle="primary" onClick={this.onClick}/>
 				</Col>
 			</div>
 		);