add option to upload pictures to events

src/auth.js

@@ -196,13 +196,23 @@ export class ResourceHandler {
     });
   }
 
-  patch(item) {
+  patch(item, formData = false) {
     return new Promise((resolve, reject) => {
       getSession().then((api) => {
         // not all fields in the item can be patched. We filter out the fields
         // we are allowed to send
-        const submitData = Object.assign({}, item);
-        this.noPatchKeys.forEach((key) => { delete submitData[key]; });
+        let submitData;
+        if (formData) {
+          submitData = new FormData();
+          Object.keys(item).forEach((key) => {
+            if (!this.noPatchKeys.includes(key)) {
+              submitData.append(key, item[key]);
+            }
+          });
+        } else {
+          submitData = Object.assign({}, item);
+          this.noPatchKeys.forEach((key) => { delete submitData[key]; });
+        }
 
         api.patch(`${this.resource}/${item._id}`, submitData, {
           headers: { 'If-Match': item._etag },

src/config.json

 {
-    "apiUrl": "https://api-dev.amiv.ethz.ch",
+    "apiUrl": "https://api-dev.amiv.ethz.ch/",
     "events": {
         "keyDescriptors": {
             "title_de": "German Title",

src/events/newEvent.js

@@ -2,6 +2,7 @@ import m from 'mithril';
 import { RaisedButton, RadioGroup, Slider } from 'polythene-mithril';
 import { styler } from 'polythene-core-css';
 import EditView from '../views/editView';
+import { fileInput } from '../views/elements';
 
 const style = [
   {
@@ -24,10 +25,10 @@ export default class newEvent extends EditView {
 
     const buttonRight = m(RaisedButton, {
       label: 'next',
-      disabled: this.currentpage === 4,
+      disabled: this.currentpage === 5,
       events: {
         onclick: () => {
-          this.currentpage = Math.min(this.currentpage + 1, 4);
+          this.currentpage = Math.min(this.currentpage + 1, 5);
         },
       },
     });
@@ -101,13 +102,13 @@ export default class newEvent extends EditView {
             this.data.additional_fields = JSON.stringify(additionalFields);
           }
           console.log(this.data);
-          this.submit('POST');
+          this.submit(true);
         },
       },
     });
 
     const title = [
-      'Create an Event', 'When and Where?', 'Signups', 'Advertisement',
+      'Create an Event', 'When and Where?', 'Signups', 'Advertisement', 'Images',
     ][this.currentpage - 1];
 
     // checks currentPage and selects the fitting page
@@ -215,6 +216,17 @@ export default class newEvent extends EditView {
         m('br'),
         buttonFinish,
       ]),
+      m('div', {
+        style: { display: (this.currentpage === 5) ? 'block' : 'none' },
+      }, [
+        m(fileInput, this.bind({
+          name: 'img_thumbnail',
+          label: 'Thumbnail',
+          accept: 'image/png, image/jpeg',
+        })),
+        m('br'),
+        buttonFinish,
+      ]),
     ]);
   }
 }

src/views/elements.js

@@ -146,6 +146,55 @@ export class datetimeInput {
 }
 
 
+export class fileInput {
+  constructor({ attrs: { getErrors, name, onChange } }) {
+    // Link the error-getting function from the binding
+    this.getErrors = () => [];
+    this.name = name;
+    if (getErrors) { this.getErrors = getErrors; }
+    this.onChangeCallback = onChange;
+    this.file = null;
+  }
+
+  onChange() {
+    
+  }
+
+  view({ attrs: { label, accept } }) {
+    // set display-settings accoridng to error-state
+    const errors = this.getErrors();
+
+    const image = {
+      type: 'file',
+      accept,
+      onchange: ({ target: { files: [file] } }) => {
+        if (file !== this.file) {
+          // as we only accept one file, it is always the first element
+          // of the list
+          this.file = file;
+          console.log(this.file);
+          this.onChangeCallback(this.name, this.file);
+        }
+      },
+      valid: errors.length === 0,
+      error: errors.join(', '),
+    };
+
+    return m('div', [
+      m(TextField, {
+        label,
+        disabled: true,
+        style: {
+          width: '200px',
+          float: 'left',
+        },
+      }),
+      m('input', image),
+    ]);
+  }
+}
+
+
 // a card that is usually collapsed, but pops out when clicked on the title
 export class DropdownCard {
   constructor() {