Fix import Event (#1945)

Author: YogeshSharma0201

app/components/events/event-import-section.js

@@ -27,8 +27,12 @@ export default Component.extend(FormMixin, {
     };
   },
   actions: {
+    onFileSelected(files) {
+      this.set('files', files);
+    },
     submit() {
       this.onValid(() => {
+        this.uploadFile(this.files);
       });
     }
   }

app/controllers/events/import.js

@@ -0,0 +1,66 @@
+import Controller from '@ember/controller';
+import { run } from '@ember/runloop';
+
+export default Controller.extend({
+  importStatus : '',
+  importError  : '',
+  isImporting  : false,
+  file         : false,
+  fileName     : '',
+  importTask(taskUrl) {
+    run.later(() => {
+      this.get('loader')
+        .load(taskUrl)
+        .then(data => {
+          if (data.state !== 'SUCCESS') {
+            this.set('importStatus', `Status: ${data.state}`);
+            this.importTask(taskUrl);
+          } else {
+            this.set('importStatus', `Status: ${data.state}`);
+            this.transitionToRoute('events.view', data.result.id);
+          }
+        })
+        .catch(e => {
+          this.setProperties({
+            'importError' : e.message,
+            'isImporting' : false,
+            'file'        : false
+          });
+        });
+    }, 3000);
+  },
+  actions: {
+    uploadFile(files) {
+      let [file] = files;
+      var data = new FormData();
+      var endpoint = 'import/json';
+      var ext = file.name.split('.');
+      ext = ext[ext.length - 1].toLowerCase();
+      if (ext === 'xml') {
+        endpoint = 'import/pentabarf';
+      } else if (ext === 'ics' || ext === 'ical') {
+        endpoint = 'import/ical';
+      } else if (ext === 'xcal') {
+        endpoint = 'import/xcal';
+      }
+      data.append('file', file);
+
+      this.setProperties({
+        'importStatus' : 'Uploading file.. Please don\'t close this window',
+        'importError'  : '',
+        'isImporting'  : true,
+        'file'         : true
+      });
+
+      this.get('loader').post(
+        `/events/${endpoint}`,
+        data,
+        { isFile: true }
+      ).then(data => {
+        this.importTask(`tasks/${data.task_url.split('/')[3]}`);
+      }).catch(e => {
+        this.set('importError', e.message);
+      });
+    }
+  }
+});

app/services/loader.js

@@ -17,6 +17,7 @@ export default Service.extend({
     adapter           : 'adapter:application',
     isExternal        : false,
     isFormData        : false,
+    isFile            : false,
     queryParams       : {},
     withoutPrefix     : false,
     replaceHeaders    : false,
@@ -48,6 +49,9 @@ export default Service.extend({
         } else {
           if (config.isFormData) {
             fetchOptions.body = objectToFormData(data);
+          } else if (config.isFile) {
+            delete fetchOptions.headers['Content-Type'];
+            fetchOptions.body = data;
           } else {
             fetchOptions.headers['Content-Type'] = 'application/json';
             fetchOptions.body = JSON.stringify(data);

app/templates/components/events/event-import-section.hbs

@@ -2,14 +2,18 @@
   <form class="ui form" {{action 'submit' on='submit'}}>
     <div class="field {{if device.isMobile 'sixteen' 'five'}} wide column">
       <label class="required" for="file"> {{t 'Select event source file to import'}}</label>
-      {{input type='file' id='file'}}
+      <input accept='.zip,.xml,.ical,.ics,.xcal' type="file" disabled={{disabled}} onchange={{action 'onFileSelected' value='target.files'}}>
     </div>
     <div class="field {{if device.isMobile 'sixteen' 'five'}} wide column">
       <span class="text muted">
         <b>{{t 'Supported formats:'}}</b>
         {{t 'Open Event compatible json package (.zip), PentabarfXML (.xml), iCalendar (.ical, .ics), XML Representation of iCalendar (.xcal)'}}
       </span>
     </div>
-    <button class="ui small primary button" type="submit">{{t 'Import Event'}}</button>
+    <button class="ui small primary button" type="submit" disabled={{isImporting}}>{{t 'Import Event'}}</button>
+    <div style="margin-top: 10px;">
+      <span>{{importStatus}}</span><br>
+      <span class="red">{{importError}}</span>
+    </div>
   </form>
 </div>

app/templates/events/import.hbs

@@ -1,3 +1,3 @@
-{{events/event-import-section}}
+{{events/event-import-section uploadFile=(action 'uploadFile') importStatus=importStatus importError=importError isImporting=isImporting file=file}}
 <br><br>
 {{events/imports-history-section}}