Upload image from added

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
                 });
-            })
+            }).catch((error) => {
                 // tslint:disable-next-line:no-console
-            .catch(error => console.error('Error loading image info:', error));
+                console.error('Error loading image info:', error);
+            });
 
     }
 

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>
             );
         });

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>
+        );
     }
 }