Forum Academy Marketplace Showcase Pricing Features

CSV File to JSON

HI @shawn.chaudhery,

I’m trying to implement Flatfile.io to my bubble site. Is there anyway you would be willing to help out? I’ve tried pasting the script from the page but can’t get past the portal setup screen. I’m thinking I’m not doing something correctly.

Hi Shawn,

This thread has been very helpful in getting flatfile.io up up and running. I am able to activate flatfile.io, clean the data and submit. I see the data in the Chrome console log. I am now at the point of doing something with the data and taking the user back to my app. Two specific questions:

  1. Can you share an example syntax for making a Bubble API call in JavaScript (the API will further evaluate the data and ultimately update a Thing).
  2. What is the best approach for getting the user back to the app? Once they click on complete, the flatfile.io window stays open.

Any help you could provide would be very much appreciated. Sounds like you know this stuff cold.

Thank you!

Ken

User never leaves your app, all you need to do is close the windows. Add this in your js workflow instead of

// do something with the clean data here like upload it to your server

importer.displayLoader()
setTimeout(() => { // simulation of handling results asynchronously
importer.displaySuccess(‘Success!’)
const tasks = results.validData
}, 1500)
})
.catch(function(error) {
console.info(error || ‘window close’)

Thanks for the quick response. I did as you suggested, however, I am getting a syntax error. I am not (yet) familiar enough to debug. Here is a screenshot of the code. If you have a minute, can you let me know what you see?

This mine you can copy-paste it.

importer.requestDataFromUser().then(function(results) {
console.log(results.data)
importer.displayLoader()
setTimeout(() => { // simulation of handling results asynchronously
importer.displaySuccess(‘Success!’)
const tasks = results.validData
}, 1500)
})
.catch(function(error) {
console.info(error || ‘window close’)
}, function() {
// do something if the user closes the importer

})

1 Like

Thank you for your help!

@shawn.chaudhery Thanks for all these tips regarding flatfile. I am coming back to edit this post about an hour after posting it because I figured out how to get the wizard to appear! This is a huge breakthrough for a non-coder, like me!

My next hurdle is once a user clicks Submit in the flatfile wizard. I have similar questions to what @ksaitow1 posted above. I don’t know what to do after a user clicks Submit. My users will be uploading more than 100 records (per my Bubble plan) so “creating new things” in bulk via API sounds like what I have to do. Do you have any guidance on how to set that up?
Kelly

Hi Kelly,

After lots of trial and error, I was able to get this to work. The good news is that it was worth it, the functionality is very powerful.

Like you, I bulk upload to a temporary table (thing). Once this is done, I then process the data into the proper tables.

The following is the JavaScript code:

In my case, I had to manipulate the data a bit, which is why the data that I am running though the stringify function (to format in a manner that the bulk data loader is expecting) is called “datawithOrg”… I think in your case, it would simply be the data returned from the importer.

Note that there may be a better way to do this from a pure programming perspective, but it is working reliably for me.

When flatfile is finished with the upload, it triggers a JavaScript to Bubble element with “success”. When that is received, a workflow kicks off the processing of the uploaded data.

Hope that is helpful.

Ken

1 Like

Hey Ken @ksaitow1 - Thanks for taking the time to reply! I appreciate it. I think I’m hung up on the Javascript to Bubble element. I can’t seem to get the data out of the console log.

I’m super new to Bubble, and very unfamiliar with Javascript and APIs. I wasn’t aware it need to go to a temporary table first. Is it possible to just have the data from the flatfile upload go directly to the corresponding table?

Thanks again for your help

I also am not creating the API call correctly. Whenever I try and add that into the script. the flatfile wizard doesn’t open anymore. I think I might have to post this as a freelance opportunity.

Hey there… sorry for the late reply.

The implementation into a temp table was specific to my specific need. Not a requirement of flatfile.io. Sorry for the confusion.

The Javascript and API components do take some work for sure. Going the freelance route may save you some headaches.

If you post a screenshot of your script, I may be able to spot something…

Hang in there.

1 Like

Hi,

Would you help me?
How to get JSON data and write to Bubble DB?

Thank you!

Alex

How are you getting the JSON data? is it coming from an external api?

Hi, shawnmi6!!

I am using the “Send data to API Endpoint” function. I created an EndPoint in “beckwend workflows”, but the json file does not reach my endpoint.

See my “EndPoint” configuration:

What am I doing wrong?

Did you already successfully initialized the call? Because your endpoint url still has the initializer in it.

Yes. I got it and fixed the error. Thank you!

By chance, were you able to get flatfile.io data into your database? I am as far as getting the wizard to pull up, and then send the data to the console and to a javascripttobubble function, but cannot seem to figure out how to get it to the database to make changes to a list of things.

I was able to get this to work. In responding to someone else on this topic, I prepared an email with screenshots, etc. of how I was able to make this work for my use case. If you shoot me an email at [email protected], I am happy to forward that same email along to you.

You can make a api call to your backend bubble workflow once you have the data from flatfile and then create steps to create a new thing for each row.