Fix a bug that misses file data when uploading pipeline yaml to TM

Issue-ID: AIMLFW-233
Change-Id: Icc95db0f6100f2d8acbb78333f1dee8159676655
Signed-off-by: Taewan Kim <t25.kim@samsung.com>

diff --git a/src/apis/pipeline.js b/src/apis/pipeline.js
index fb834d6..faf63dd 100644 (file)
--- a/src/apis/pipeline.js
+++ b/src/apis/pipeline.js
@@ -7,7 +7,11 @@ export const pipelineAPI = {
   getPipelineVersions: async ({ params }) => {
     return await instance.get(`/pipelines/${params.pipelineName}/versions`);
   },
-  uploadPipeline: async ({ params, data }) => {
-    return await instance.post(`/pipelines/${params.pipelineName}/upload`, { ...data });
+  uploadPipeline: async ({ params }) => {
+    return await instance.post(`/pipelines/${params.pipelineName}/upload`, params.data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
   },
 };

diff --git a/src/components/home/pipelines/UploadPipeline.js b/src/components/home/pipelines/UploadPipeline.js
index c82aee9..972501a 100644 (file)
--- a/src/components/home/pipelines/UploadPipeline.js
+++ b/src/components/home/pipelines/UploadPipeline.js
@@ -16,7 +16,7 @@
 
 // ==================================================================================
 
-import React from 'react';
+import React, { Component } from 'react';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 
@@ -25,16 +25,16 @@ import Popover from 'react-bootstrap/Popover';
 import { notebook_url, UCMgr_baseUrl } from '../../../states';
 import { pipelineAPI } from '../../../apis/pipeline';
 
-class UploadPipelineForm extends React.Component {
+class UploadPipelineForm extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      fileName: '',
+      fileName: null,
       plName: '',
       UCMgr_baseUrl: UCMgr_baseUrl,
     };
-    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleFileChange = this.handleFileChange.bind(this);
   }
 
   popover = () => (
@@ -50,13 +50,14 @@ class UploadPipelineForm extends React.Component {
     </Popover>
   );
 
-  handleInputChange(event) {
+  handleFileChange = (event) => {
     console.log(event);
     this.setState({
       fileName: event.target.files[0],
+    }, () => {
+      console.log('handleFileChange', this.state.fileName);
     });
-    console.log('handleInputChange', this.fileName);
-  }
+  };
 
   handlePlNameChange = event => {
     this.setState({
@@ -66,7 +67,7 @@ class UploadPipelineForm extends React.Component {
 
   resetFrom = event => {
     this.setState({
-      fileName: '',
+      fileName: null,
       plName: '',
     });
     console.log(this.state);
@@ -78,7 +79,7 @@ class UploadPipelineForm extends React.Component {
     data.append('file', this.state.fileName);
 
     pipelineAPI
-      .uploadPipeline({ params: { pipelineName: this.state.plName }, data })
+      .uploadPipeline({ params: { pipelineName: this.state.plName, data: data } })
       .then(res => {
         console.log('Pipeline  responsed ', res);
         console.log('Status  responsed ', res.status);
@@ -97,8 +98,6 @@ class UploadPipelineForm extends React.Component {
       .then(function () {
         // always executed
       });
-
-    console.log('something');
     event.preventDefault();
   };
 
@@ -157,7 +156,7 @@ class UploadPipelineForm extends React.Component {
                 />
               </Form.Group>
 
-              <input type='file' className='form-control' name='upload_file' onChange={this.handleInputChange} />
+              <input type='file' className='form-control' name='upload_file' onChange={this.handleFileChange} />
 
               <Button style={{ backgroundColor: '#6282f6' }} type='submit'> Upload </Button>
             </Form>