create recipe xml upload api

app/controllers/api/v1/employees_controller.rb

@@ -28,8 +28,8 @@ class Api::V1::EmployeesController < ApplicationController
 
   def uploadFile
     # print{'aaaaaaaaaaaaaaaa'}
-    print(params.permit(:file),'aaaaaaaaaaaaaaaaa')
-    render json: {name: 'vijay'}
+    # print(params.permit(:file),'aaaaaaaaaaaaaaaaa')
+    render json: {status: 'sucess'}
   end
 
   private

app/controllers/api/v1/recipes_controller.rb

@@ -26,6 +26,10 @@ class Api::V1::RecipesController < ApplicationController
     render json: { message: 'Recipe deleted!' }
   end
 
+  def uploadFile
+  render json: { status: 'sucess'}
+  end
+
   private
 
   def recipe_params

app/javascript/components/NewEmployee.jsx

@@ -44,10 +44,6 @@ class NewEmployee extends React.Component {
         if (file.length == 0)
             return;
 
-        const body = {
-            file
-        };
-        console.log(body);
         const token = document.querySelector('meta[name="csrf-token"]').content;
         const formData = new FormData()
         formData.append("file", file)
@@ -58,15 +54,12 @@ class NewEmployee extends React.Component {
                 // "Content-Type": "application/json"
             },
             body: formData
-        })
-            .then(response => {
+        }).then(response => {
                 if (response.ok) {
-                    alert("AAAAAAAAAAA")
-                    return response.json();
+                    this.props.history.push(`/employees`)
                 }
                 throw new Error("Network response was not ok.");
-            })
-            .catch(error => console.log(error.message));
+            }).catch(error => console.log(error.message));
     }
 
     onSubmit(event) {
@@ -121,6 +114,7 @@ class NewEmployee extends React.Component {
                                     className="form-control"
                                     required
                                     onChange={this.uploadFile}
+                                    accept=".xml"
                                 />
                             </div>
                             <button type="submit" className="btn custom-button mt-3">

app/javascript/components/NewRecipe.jsx

@@ -7,11 +7,14 @@ class NewRecipe extends React.Component {
         this.state = {
             name: "",
             ingredients: "",
-            instruction: ""
+            instruction: "",
+            file: {}
         };
 
         this.onChange = this.onChange.bind(this);
         this.onSubmit = this.onSubmit.bind(this);
+        this.fileUpload = this.fileUpload.bind(this);
+        this.submitFile = this.submitFile.bind(this);
         this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
     }
 
@@ -60,8 +63,34 @@ class NewRecipe extends React.Component {
     }
 
     fileUpload (event) {
-        console.log(event);
-        console.log('event');
+        this.setState({ [event.target.name]: event.target.files[0] });
+    }
+
+    submitFile (event) {
+        event.preventDefault();
+        const url = "/api/v1/recipes/uploadFile";
+        const { file } = this.state;
+
+        if (file.length == 0)
+            return;
+
+        const formData = new FormData();
+        formData.append('file', file);
+        const token = document.querySelector('meta[name="csrf-token"]').content;
+        fetch(url, {
+            method: "POST",
+            headers: {
+                "X-CSRF-Token": token,
+            },
+            body: formData
+        })
+            .then(response => {
+                if (response.ok) {
+                    this.props.history.push(`/recipes`)
+                }
+                throw new Error("Network response was not ok.");
+            })
+            .catch(error => console.log(error.message));
     }
 
     render() {
@@ -72,7 +101,13 @@ class NewRecipe extends React.Component {
                         <h1 className="font-weight-normal mb-5">
                             Add a new recipe to our awesome recipe collection.
                         </h1>
-                        <input onChange={this.fileUpload} type="file" accept=".xml"></input>
+                        <form onSubmit={this.submitFile}>
+                            <input onChange={this.fileUpload} name="file" type="file" accept=".xml" required />
+
+                            <button type="submit" className="btn custom-button mt-3">
+                                Upload File
+                            </button>     
+                        </form>
                         <p> Upload a file or </p>
                         <form onSubmit={this.onSubmit}>
                             <div className="form-group">

config/routes.rb

@@ -14,6 +14,7 @@ Rails.application.routes.draw do
       post 'recipes/create'
       get '/show/:id', to: 'recipes#show'
       delete '/destroy/:id', to: 'recipes#destroy'
+      post 'recipes/uploadFile'
     end
   end
   root 'homepage#index'