I am developing a plugin to upload a CSV File and convert the contents to JSON. I have no problem uploading the file. Once I upload the file, I have a button workflow that executes an action within the plugin element that I have on my page.
To make sure I have the file uploaded, I do the following:
console.log(“Inside Plugin - SB CSV File URL”, properties.sb_csv_file_uploaded);
where sb_csv_file_uploaded is the field associated with the Action - what I think is the file I uploaded.
I then do the following:
console.log("Inside Plugin - SB CSV File from URL: ", instance.data.sb_csv_file_uploaded );
In the console, I see:
Inside Plugin - SB CSV File from URL: undefined
Which tells me that I can get the properties for the file, but I can’t access the file. Does that make sense?
Also, within the update JavaScript function of the plugin, I use a File Reader to Read as Text the contents of the file. I use the following code:
reader.readAsText(instance.data.sb_csv_file_uploaded);
When I do this, I get an error message:
Failed to execute ‘readAsText’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.
Which I guess makes sense if the instance variable is undefined.
So, my question is whether its possible to do the read as text function on the uploaded file?
I’ve attached a screen shot of the error messages I’m getting.
What will be done with the JSON? I ask because, depending on what you plan to do with the JSON, the file might not need to be uploaded at all. The file contents can be accessed client-side. In fact, the FileReader object you mention below is part of the browser Web API and does just that. It won’t work for reading files on remote servers.
Actually, what it’s telling you is that instance.data.sb_csv_file_uploaded is not defined. Properties of the instance.data object must be explicitly set. However, even if it had been set, it seems you’re attempting to read the contents of a remote file using a client-side API, which won’t work.
Perhaps providing a higher level overview of your overall objective might help. What’s the ultimate goal? After converting the CSV to JSON, then what?
Hi Steve, I’ll be using CSV files from at least two sources to load databases in Bubble. Each source will have a differently formatted CSV and corresponding database. I have previously used the CSV Uploader to populate a database, but I can’t control how many rows my client will have in the CSV. My business partner and I are doing a lean startup and funds are tight, so I don’t want to pay for the Bubble highest level to get the ability to upload a file with a large number of rows.
My thought was to upload and convert the CSV to JSON and then populate the database by parsing the JSON. I’m planning to use software called PapaParse for the conversion. In a development website written in HTML, CSS, and Javascript, I’m able to make the conversion work. That is to get the CSV data in JSON format.
I’m also making a big assumption that Bubble will recognize the JSON and be able to parse it. I’ve used an API from Hunter.io in which I provide a website URL and obtain the email addresses on the website. That function will be part of the eventual product. The CSV files provide the site URL’s and other data about the sites. We’ll use that data to determine which sites to pursue.
Hmm, so you basically want to get CSV data into Bubble without using the built-in data loader functionality? I guess the best approach might depend on a number of things:
How the CSV data are obtained - i.e. is it automatically retrieved from an endpoint, or is obtaining it a manual process?
Whether it’s a one-time or recurring process
How many rows/fields of data there are.
I recall seeing past posts about various approaches to loading data into Bubble, so you might want to search the forums if you haven’t already.
I suspect the loading could take some time, so a “background” process of some kind would be best. Perhaps others who’ve done something similar can offer insights.
