From 5c857e66d4b87f29a3686b141831f6423955f535 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 9 Apr 2018 10:20:35 +0530
Subject: [PATCH] Upload image from added

---
 .../AddToCanvasInput/AddToCanvasInput.tsx     | 10 ++--
 src/Components/CanvasArea/CanvasArea.tsx      |  2 +-
 .../UploadResourcesInput.tsx                  | 59 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx b/src/Components/AddToCanvasInput/AddToCanvasInput.tsx
index cbf8d7a..3849f9b 100644
--- a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx
+++ b/src/Components/AddToCanvasInput/AddToCanvasInput.tsx
@@ -35,14 +35,14 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
         fetch('http://localhost:8000/images/')
             .then((response: Response) => {
                 return response.json();
-            })
-            .then((responseJSON: string[]) => {
+            }).then((responseJSON: string[]) => {
                 this.setState({
                     imageURLs: responseJSON
                 });
-            })
-            // tslint:disable-next-line:no-console
-            .catch(error => console.error('Error loading image info:', error));
+            }).catch((error) => {
+                // tslint:disable-next-line:no-console
+                console.error('Error loading image info:', error);
+            });
 
     }
 
diff --git a/src/Components/CanvasArea/CanvasArea.tsx b/src/Components/CanvasArea/CanvasArea.tsx
index a201069..4b33d38 100644
--- a/src/Components/CanvasArea/CanvasArea.tsx
+++ b/src/Components/CanvasArea/CanvasArea.tsx
@@ -43,7 +43,7 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
             const tmpImageNode = this.props.nodes.image[nodeId];
             return (
                 <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
-                    <img draggable={false} src={tmpImageNode.url} width="100px" />
+                    <img draggable={false} src={tmpImageNode.url} style={{ maxWidth: '500px' }} />
                 </DraggableNode>
             );
         });
diff --git a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx
index 8789d00..fcfc318 100644
--- a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx
+++ b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx
@@ -5,14 +5,71 @@ interface UploadResourcesInputProps {
 
 }
 interface UploadResourcesInputState {
+    file: File | undefined;
 }
 
 export class UploadResourcesInput extends React.Component<UploadResourcesInputProps, UploadResourcesInputState> {
     constructor(props: UploadResourcesInputProps) {
         super(props);
+
+        this.state = {
+            file: undefined
+        };
+
+        this.onFileChange = this.onFileChange.bind(this);
+        this.onFileSubmit = this.onFileSubmit.bind(this);
+    }
+
+    onFileChange(ev: React.ChangeEvent<HTMLInputElement>) {
+        if (ev.target.files && ev.target.files.length > 0) {
+            this.setState({ file: ev.target.files[0] });
+        }
+    }
+
+    onFileSubmit(ev: React.MouseEvent<HTMLButtonElement>) {
+        if (this.state.file !== undefined) {
+            const url = 'http://localhost:8000/uploads';
+            const formData = new FormData();
+            formData.append('upload', this.state.file);
+
+            fetch(url, {
+                method: 'POST',
+                body: formData
+            }).then((response: Response) => {
+
+                return response.json();
+
+            }).then(function (responseJson: { message?: string, file?: string }) {
+
+                // tslint:disable-next-line:no-console
+                if (responseJson.file) {
+                    
+                    // tslint:disable-next-line:no-console
+                    console.log('File uploaded: ' + responseJson.file);
+
+                } else if (responseJson.message) {
+
+                    console.warn('Error during file upload: ' + responseJson.message);
+
+                }
+
+            });
+        }
     }
 
     render() {
-        return '';
+        return (
+            <div className="form">
+                <h3>Form</h3>
+                <input
+                    type="file"
+                    className="form-control"
+                    placeholder="Upload Your Images"
+                    name="upload"
+                    onChange={this.onFileChange}
+                />
+                <button id="submit" className="btn btn-default" onClick={this.onFileSubmit}>upload</button>
+            </div>
+        );
     }
 }
\ No newline at end of file