create upload file api

app/controllers/api/v1/employees_controller.rb

@@ -26,6 +26,12 @@ class Api::V1::EmployeesController < ApplicationController
     render json: { message: 'Employee deleted!' }
   end
 
+  def uploadFile
+    # print{'aaaaaaaaaaaaaaaa'}
+    print(params.permit(:file),'aaaaaaaaaaaaaaaaa')
+    render json: {name: 'vijay'}
+  end
+
   private
 
   def employee_params

app/javascript/components/NewEmployee.jsx

@@ -10,11 +10,14 @@ class NewEmployee extends React.Component {
             email: "",
             phone: "",
             dob: "",
-            address: ""
+            address: "",
+            file: {}
         };
 
         this.onChange = this.onChange.bind(this);
+        this.uploadFile = this.uploadFile.bind(this);
         this.onSubmit = this.onSubmit.bind(this);
+        this.submitFile = this.submitFile.bind(this)
         this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
     }
 
@@ -29,6 +32,43 @@ class NewEmployee extends React.Component {
         this.setState({ [event.target.name]: event.target.value });
     }
 
+    uploadFile(event) {
+        this.setState({ [event.target.name]: event.target.files[0] });
+    }
+
+    submitFile(event) {
+        event.preventDefault();
+        const url = "/api/v1/employees/uploadFile";
+        const { file } = this.state;
+
+        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)
+        fetch(url, {
+            method: "POST",
+            headers: {
+                "X-CSRF-Token": token,
+                // "Content-Type": "application/json"
+            },
+            body: formData
+        })
+            .then(response => {
+                if (response.ok) {
+                    alert("AAAAAAAAAAA")
+                    return response.json();
+                }
+                throw new Error("Network response was not ok.");
+            })
+            .catch(error => console.log(error.message));
+    }
+
     onSubmit(event) {
         event.preventDefault();
         const url = "/api/v1/employees/create";
@@ -72,6 +112,21 @@ class NewEmployee extends React.Component {
                         <h1 className="font-weight-normal mb-5">
                             Add New Employee Details
                 </h1>
+                <form onSubmit={this.submitFile}>
+                <div className="form-group">
+                                <label htmlFor="file">Upload File</label>
+                                <input
+                                    type="file"
+                                    name="file"
+                                    className="form-control"
+                                    required
+                                    onChange={this.uploadFile}
+                                />
+                            </div>
+                            <button type="submit" className="btn custom-button mt-3">
+                                Submit File
+                            </button>
+                </form>
                         <form onSubmit={this.onSubmit}>
                             <div className="form-group">
                                 <label htmlFor="employeeFirstName">First Name</label>

config/routes.rb

@@ -5,6 +5,7 @@ Rails.application.routes.draw do
       post 'employees/create'
       get '/show/:id', to: 'employees#show'
       delete '/destroy/:id', to: 'employees#destroy'
+      post 'employees/uploadFile'
     end
   end
   namespace :api do