React File Upload - import CSV Axios POST

 

React File Upload - import CSV Axios POST - (blob from Spring Boot)

------------------------------------------------------------------------

<div className="form-group files color">

  <label>Upload Your File </label>

  <input type="file" className="form-control" name="file" onChange={onFileChangeHandler}/>

</div>

onFileChangeHandler = (e) => {

e.preventDefault();

setSelectedFile: e.target.files[0]

const formData = new FormData();

formData.append('file', selectedFile);

fetch('http://localhost:8080/upload', {

method: 'post',

body: formData

}).then(res => {

if(res.ok) {

console.log(res.data);

alert("File uploaded successfully.")

}

});

};

Upload specfic button to make API call

-----------------------------------------------

<input type="file" className="form-control" name="file" onChange={onFileChangeHandler}/>

<Button type="button"  onClick={() => uploadChanges()}>Upload</Button>

onFileChangeHandler = (e) => {

e.preventDefault();

setSelectedFile: e.target.files[0]

}

const uploadChanges = () => {

const formData = new FormData();

formData.append('file', selectedFile);

axios.post("/api/endPointURL, data, {

headers: {

"Content-Type": "text/plain;charset=utf8",

}

// receive two parameter endpoint url ,form data

} ).then(res => { // then print response status

console.log("response->"+res.data.statusMessage);

if(res.data.statusTxt === 'Success'){

setMessage('Uploaded Successfully');

setToastrType("success");

}else {

setMessage(res.data.errorTxt);

setToastrType("error");

}

setShowToastr(true);

})

}else{

//alert("Choose the excel and click upload");

setMessage("Choose the excel and click upload");

setToastrType("error");

setShowToastr(true);

}

}