Ivan - Add file uploader component [skip ci]

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -56,6 +56,9 @@ class CreateTicketForm extends React.Component {
                         }}/>
                     </div>
                     <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
+                    <div className="create-ticket-form__file">
+                        <FormField name="file" field="file" />
+                    </div>
                     {(!this.props.userLogged) ? this.renderCaptcha() : null}
                     <SubmitButton>Create Ticket</SubmitButton>
                 </Form>

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss

@@ -1,5 +1,9 @@
 .create-ticket-form {
 
+    &__file {
+        text-align: left;
+    }
+
     &__message {
         margin-top: 20px;
     }

client/src/core-components/file-uploader.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+
+class FileUploader extends React.Component {
+    static propTypes = {
+        text: React.PropTypes.string,
+        value: React.PropTypes.object,
+        onChange: React.PropTypes.func
+    };
+
+    static defaultProps = {
+        text: 'Upload file'
+    };
+
+    render() {
+        return (
+            <label className="file-uploader">
+                <input className="file-uploader__input" type="file" multiple={false} onChange={this.onChange.bind(this)}/>
+                <span className="file-uploader__custom" tabIndex="0">
+                    <Icon className="file-uploader__icon" name="upload" /> {this.props.text}
+                </span>
+                <span className="file-uploader__value">{this.props.value && this.props.value.name}</span>
+            </label>
+        );
+    }
+
+    onChange(event) {
+        if(this.props.onChange) {
+            this.props.onChange({
+                target: {
+                    value: event.target.files[0]
+                }
+            });
+        }
+    }
+}
+
+export default FileUploader;

client/src/core-components/file-uploader.scss

@@ -0,0 +1,31 @@
+@import "../scss/vars";
+
+.file-uploader {
+
+    &__input {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
+    }
+
+    &__custom {
+        display: inline-block;
+        cursor: pointer;
+        color: white;
+        background-color: $primary-red;
+        line-height: 35px;
+        padding: 0 15px;
+    }
+
+    &__icon {
+        margin-right: 15px;
+    }
+
+    &__value {
+        margin-left: 10px;
+        color: $dark-grey;
+    }
+}

client/src/core-components/form-field.js

@@ -9,6 +9,7 @@ import Checkbox from 'core-components/checkbox';
 import CheckboxGroup from 'core-components/checkbox-group';
 import TextEditor from 'core-components/text-editor';
 import InfoTooltip from 'core-components/info-tooltip';
+import FileUploader from 'core-components/file-uploader';
 
 class FormField extends React.Component {
     static contextTypes = {
@@ -24,7 +25,7 @@ class FormField extends React.Component {
         error: React.PropTypes.string,
         infoMessage: React.PropTypes.node,
         value: React.PropTypes.any,
-        field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']),
+        field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group', 'file']),
         fieldProps: React.PropTypes.object
     };
     
@@ -84,7 +85,8 @@ class FormField extends React.Component {
             'textarea': TextEditor,
             'select': DropDown,
             'checkbox': Checkbox,
-            'checkbox-group': CheckboxGroup
+            'checkbox-group': CheckboxGroup,
+            'file': FileUploader
         }[this.props.field];
 
         if(this.props.decorator) {
@@ -142,7 +144,8 @@ class FormField extends React.Component {
     getDivTypes() {
         return [
             'textarea',
-            'checkbox-group'
+            'checkbox-group',
+            'file'
         ];
     }
 

client/src/lib-core/APIUtils.js

@@ -9,7 +9,8 @@ const APIUtils = {
                 url: path,
                 method: method,
                 data: data,
-                dataType: 'json'
+                processData: false,
+                contentType: false
             })
             .done(resolve)
             .fail((jqXHR, textStatus) => {