Forum Academy Marketplace Showcase Pricing Features

CSV File to JSON

thx, let me have a play

Hi Shawn, thanks for your tips in this thread but not being a programmer all i can do is hack it together and see if it works. I have attached my code snippets and would appreciate if you could review and let me know what else I need to configure. I am confused about how to tie the bubble file uploader widget which will have the file name of the csv which need to be passed to js script

Page header has following;

and papaparse.js is loaded as file in root directory of app

Below is action in wf that is triggered by button on page

Bubble fileuploader widget has “fileA” as id attribute

Created server side wf called csvupload which has 2 parameters; first and last (text items) which are used to create new record in test db. Also enabled as public and run without authentication

$(‘input[type=file]’).parse({
config: {
delimiter: “”, // auto-detect
newline: “”, // auto-detect
quoteChar: ‘"’,
escapeChar: ‘"’,
header: false,
transformHeader: undefined,
dynamicTyping: false,
preview: 0,
encoding: “”,
worker: false,
comments: false,
step: undefined,
complete: undefined,
error: undefined,
download: false,
downloadRequestHeaders: undefined,
skipEmptyLines: false,
chunk: undefined,
fastMode: undefined,
beforeFirstChunk: undefined,
withCredentials: undefined,
transform: undefined,
delimitersToGuess: [’,’, ‘\t’, ‘|’, ‘;’,
Papa.RECORD_SEP, Papa.UNIT_SEP]
}

},
before: function(file, fileA)
{
// executed before parsing each file begins;
// what you return here controls the flow
},
error: function(err, file, fileA, reason)
{
// executed if an error occurs while loading the file,
// or if before callback aborted for some reason
},
complete: function()
{
// executed after all files are complete
}
});

Papa.parse(file, {
download: true,
header: true,
complete: function(results) {
console.log(results.data);
console.log(results.errors);
var data = JSON.stringify(data);

var xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.addEventListener(“readystatechange”,

function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});

xhr.open(“POST”,
https://d52.bubble.is/site/jcu1/version-test/api/1.1/wf/csvupload”);

xhr.setRequestHeader(“Content-Type”,
“application/json”);

xhr.setRequestHeader(“Authorization”, "Bearer: fill out later ");

xhr.send(data);

}
});

2 Likes

and page header has the following;

You reference a “Run JavaScript Plugin”. I searched plugins for this but didn’t find one. What am I missing?
Thanks
Greg

It’s the “Toolbox” plugin which allows you to run javascript in your workflows.

Thanks! Just installed “Toolbox” and I’m on my way!
Greg

1 Like

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.