Create csv file and pass It to backend call in React - reactjs

I have a scenario where I want to create csv file and the same generated csv file I would like to pass It to backend call.
I can generate csv file using below plugin but would like to know how can I pass It to backend once file is generated?
https://www.npmjs.com/package/react-csv
Anyone please share the Idea on It?

Related

React + Django communication

I'm working on a data mining web app, you should be able to upload a csv file, apply an algorithm and get results in the browser and a pdf with information (graphs and models for prediction principally) this is my first time using React and Django, so my question is, how to send the csv file from react to django, handle the data and return it to react?
Thanks!!
I've seen a lot of tutorials, but every tutorial use the sqlite data base and the POST method for store data and I only want to process the data inside the csv, because the files will never be the same.
You can do the csv file upload via a HTTP POST request with the {"Content-Type": "multipart/form-data"} header. After that, you can read the file with some python library that handles datasets like pandas, process everything you want about it and then send it back to the client. After that you can delete your file.
Depending of the time of this operation this request can become really slow, though.
I also think there is probably a cleaner solution where you dont even need to utilize the filesystem, just manipulate the file in-memory that came from the request, but i never tried to do something like that in django.

what is the best practice from the following in using json data from data.json file in reactjs

what is the best practice from the following in using json data from data.json file in reactjs web application?:-
Storing json data file in the same file system and import it in react component.
run json file on local server and fetch it.
use backend server.
and which option will work fine after deploying the application? and why?
It really depends on the use case.
If the data.json is static, importing it will include the file in your bundle and will create a better user experience since you will not have to make an HTTP call and wait for its response.
fetching a file from your local server will give you a smaller bundle size (quicker initial load) and while you fetch the file (should be quicker than backend since it is local) you can show some loading animation.
If your data file is dynamic you may need to serve it from the backend.
If you are server-side-rendering your page, importing it will include the data in your HTML source which can be an SEO advantage.
For me, if it a small enough static file I would Import it (option 1)

Fetch data from local file

I need to fetch data from local file of csv format and display. How can i get it?
Using this code
const myData = require('./data.dat') seems not work for me
You can not just require a csv file.
When you use webpack as your build tool, you can use the csv loader.
This is the only solution that will work in your browser, as it is opened and interpreted during compiletime and linked statically with your code.
It will try to parse your csv as json and you use it like a json object.
https://github.com/theplatapi/csv-loader
When you create a node js app, you can load it during runtime with the node file api or use a specific csv library.
https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback
https://github.com/adaltas/node-csv

Dynamic mapping for BeanIO in Camel on windows

I working on CSV to CSV file conversion using beanIO camel compnnet, is there any way or workaround to load mapping files on fly or at runtime in marshal /unmarshal endpoint in camel route.
Hard coding of files is working for me but not the with placeholder
.unmarshal(new BeanIODataFormat("file://C://Camel//Dev//mapping//unmarshlling//inputMapping.xml", "xyz"))
OR
.to("dataformat:beanio:unmarshal?mapping='file://C://Camel//Dev//mapping//unmarshlling//inputMapping.xml'?streamName=xyz")
is working but
.unmarshal(new BeanIODataFormat("{{file name}}", "xyz"))
OR
.to("dataformat:beanio:unmarshal?mapping=("{{file name}}"?streamName=xyz")
Is not working for me , I want to put mapping file as in put and which will load from external folder please help

Import data from a CSV file from Angular

I want to import data from a csv file and insert them in MongoDB. So firstly I get the data from the csv file and I display my data in the console using AngularJS.
Now I want to pass my data (from AngularJS) to a play controller where I want to parse data and then insert it in my database.
So I defined this route:
POST /input/:data controllers.InputController.showinput(data)
Where data is the data that I get from AngularJS and InputController is my controller.
I am currently blocked, I don't know if I'm on the right track or not and also there is any example to parse my data in controller?
Instead of getting data from csv file, you can first insert csv file in mongoDB by using the monngoImport command. Then you can access data from csv file using angularjs.

Resources