Can any one guide me how to implement https://www.papaparse.com/ into bubble? I am trying to convert csv files to json so I can send the json reulsts as a POST request to bubble’s endpoint to create a new things.
I cant do a straight CSV upload because the headers in bubble’s DB do not match the fields in the database.
Hi Shawn,
I’m in the same boat!
Would love for someone to help with this question! 
Edit 1:
Here is a reply showing where to insert the script:
Edit 2:
Script can be added at page level:
Hi, I actually figured it out using Papa Parse but then realized that it didn’t have any validation functions so I went with Flatfile.io
I took the scripts found on the Flatfile.io installation guide and placed them in the header of the page and I used the JavaScript plugin to execute the Script which triggers the file upload wizard which comes directly from Flatfile.io
Flatfile.io can be expensive so if you do not need the validation functionality then I suggest going with Papaparse considering it’s free.
Thanks @shawn.chaudhery!
Talking about html header, do you put the script in here?
Otherwise with Papaparse, I kept on having an error telling me that “Papa is not defined”.
So I’ve ended up putting the script in a HTML element:
Thanks
Yea the Page HTML Header is where it goes, make sure you have Papa Parse dependency (Library) linked to the page or else you will get that error of it not being defined. Download the library from the papaparse website and you can upload it to root folder of your bubble app under the settings tab.
Are you able to retrieve any error with papaparse? I created a file with some mistakes, and I got error inside the browser (Chrome editing mode) not within the plugin error value.
Uploaded the library to the root folder (Click view which will open the url address for the file copy that)
Put in the script tags in the Page Header using the url of the library which is now in your root folder
Using the Run JavaScript plugin crate a workflow which would trigger the papaparse script. I wanted the csv file to be parsed as json and then send a POST request to one of the API workflows I had created. The “Missing Value” is where you reference the file uploaded field. I needed to pass along more information then just the csv data whichis why I have the Batch ID and user info part of the script. Make sure to change the “POST”, to point towards your own workflow and make sure to add your bubble Api key in the Header: Bearer
Interesting, thanks. Will try that.
I was able to console.log the errors in chrome, but I didn’t test much further as I switched to Flatfile.io
You can also use Integromat. They have a CSV parser and a JSON Aggregator.
This may be a little bit hard to understand how to set your json aggregator. So let me know if you try and have trouble
Hi @shawn.chaudhery,
I have to implement Flatfile (papaparse plugin jammed with big file…). How do you implement it if you can share? They are looking to create a plugin, but until then… or PM if you can.
Once you login to the Flatfile.io dashboard they have a generated script for you which you copy and paste into the Page HTML Header. Do you know how to configure your field? If not just DM me the generated script from the Dashboard and the fields you want and I can add those fields in your script to paste in your page. You will need to add any of the Run Javascript plug-ins to trigger the Flatfile wizard
Papaparse has a configuration option which you can enable if your processing large files, how many records where in the file which jammed up the page?
I was using the paparse plugin (no option of processing large files). I suspect bubble problem or my file to be corrupted (was working fine couple of days ago…) Will look at that later. For flatfile, yes I had configured my fields. Once the script is in page html header (done), how do you execute flatfile wizard (via Run javascript the button onclick)? How you get back the data?
Remove the button tag with the import function from the script (Line 1).
Create a button/element or whatever you want to trigger the flatfile wizard in bubble and add a action of “Run Javascript” (assuming you installed the plugin) and past the code from Line 33 to Line 38 from the first image your shared.
importer.requestDataFromUser().then(function(results) {
console.log(results.data)
// do something with the clean data here like upload it to your server
}, function() {
// do something if the user closes the importer
})
You should be able to see the results in your console log (chrome browser).
What would like to do with the data? you can use the Javascript to Bubble tool to take that data and send it via API to your bubble endpoint or you can make the API call right from the script using Javascript…
If you run into a issue, you can share the editor with me and I can help out.
Make sense 
thanks.
Also if you decide to go back to Papaparse the option to enable was called “worker: ture” - here is the link to the option https://www.papaparse.com/faq#workers
*You also have to enable the “stream” option - https://www.papaparse.com/faq#streaming
hi @shawn.chaudhery. I have an app that users regularly import csv files with 4000 rows. Bubble has timeout which limits csv import to ~1500 rows which is problem for me. How hard is it to setup papaparse and what is involved to push data into a temp bubble table ie is this 1 step or do i need to iterate through every row and create new record in temp table?
The only thing PapaParse does is take a CSV file and convert it to JSON format. Then you can take that json data and either send a Api post request to bubble’s endpoint to either create a new thing for each row or send that data to any other third party app depending on your need.
Implementing is not that difficult, all you have to do is link the library by adding a header tag on your page, then use the Run Javascript plugin to actually use PapaParse.
All of the code snippets can be found on PapaParse’s website.
