I Need a little help with the task, as I am using react and node.js for the first time, in here I want the user to browse a path from then fill the form and submit it. After submitting the form should be saved inside a choosen path as. So far I have created a form but is there anyway to set just a path of folder so that I can save the data in that path
This is my client side code
import React from 'react';
import Form from 'react-bootstrap/Form';
import './styles/main.scss';
function DataExtractor() {
const updateList= function(){
var input = document.getElementById('selectFile');
var output = document.getElementById('fileList');
output.innerHTML = '<span>'
for(var i = 0; i<input.files.length;++i){
output.innerHTML += '<span>' + input.files.item(i).name + '</span>';
}
output.innerHTML += '</span>';
}
return (
<>
<div id="container">
<div className='contact-info'>
</div>
<form>
<h1>
Tread Data Extractor
</h1>
<div className='col'>
<div className='form-group'>
<tr>
<label>Set Output Path:</label></tr>
<tr><div id='fileList'><input type="text" placeholder='Set Output Path'/></div>
</tr>
<tr>
<label>Select Data Source:</label></tr>
<tr>
<Form.Select className='SelectOption' size="lg">
<option>Select Data Source</option>
<option>Source 2</option>
<option>Source 3</option>
</Form.Select></tr>
<tr>
<label>Enter Company Name(Optional):</label></tr>
<tr>
<input type="text" placeholder='Enter Company Name'/></tr>
<tr>
<label>Enter HS Code(Optional):</label></tr>
<tr>
<input type="text" placeholder='Enter Company Name'/></tr>
</div>
<div>
<div>
<input type="file" style={{color:"transparent"}} onChange={updateList} id="selectFile" />
</div>
</div>
</div>
<button className='btn-2' type='submit'>Submit</button>
</form>
</div>
</>
);
export default DataExtractor;
I also have a server.js in main
First:Put your select file Second:Set your your save_path as a params Third:Send file and save_path to server.