Import data via front end

Ask for Help
1

Hi,
When we import data, eg excel file/CSV, into the Glide table, we can do so using the import from the data …
If we want to build a function for users to import by clicking a button on the front end of the app (instead of messing with tables from backend), how could we do it?

Thanks.

3

It’s possible, but requires some advanced techniques involving Helper Tables, JavaScript and the Glide API. I made a proof of concept App that does it earlier this year, at the prompting of Bob Petitto.

The original concept used Make to insert the rows, but that was before we had the Call API action. So that would be an option now.

If the above video won’t play, paste the below link into a browser window.

https://www.loom.com/share/c6e1974e82c346479e2833397dfeeb78
2 Likes
4

thanks Darren… let me give it a go.

5

Hi Darren,

I am struggling a a lot on this feature … would you be able to share the proof of concept app? or is it confidential?

Best regards.

6

Assuming Darren can’t share it, can you let us know what you have so far and what part are you struggling with?

1 Like
7

I can’t share the App, but I can describe the approach.

  • Create a Helper Table and add enough rows to cater for the largest CSV file you are expecting. eg. if you want to add a CSV file with 200 lines, then you’ll need a 200 row Helper Table
  • Number the Helper Table rows, beginning at zero
  • Capture the uploaded CSV file in a User Specific Column
  • Use a Single Value column to apply the User Specific Column value to all rows in the Helper Table
  • Use a JavaScript column to fetch the CSV file, parse it, and output a JSON string representing the column values required for each add-row-to-table mutation.
  • Use a Joined List column to gather up all the mutations
  • Use a Template column to prepare a JSON payload.
  • Send the payload to Glide, either via Make or via a Call API action.

Update:

I was thinking about this after I typed it out, and it occurred to me that it would be possible to do this with a single row Helper Table - at least for up to 500 mutations. All that would be required is to modify the JavaScript so that it returns the entire JSON payload, rather than a single mutation per row. And if more than 500 mutations are required, then it would just be a further minor tweak so that it returns 500 mutations per row, and create additional rows.

1 Like
8

thanks Darren … I was stuck on how to use papaparse to fetch CSV file … but overall I understand. will give it a go. TQ

9

I was actually having a fiddle with this today, and that modified approach that I mentioned does work very well, eg…

Here is the JavaScript that I wrote to do it:

const response = await fetch(p1);
const data = await response.text();
const lines = data.split('\n');
const header = p2;
if (header === true) {
  lines.shift();
}
const mutations = [];
while (lines.length > 0) {
  const row = lines.shift().split(',');
  mutations.push(
    {
      "kind": "add-row-to-table",
      "tableName": "native-table-XXXXXXXXXXXXXXX",
      "columnValues": {
        "XXXX": row[0],
        "XXXX": row[1],
        "XXXX": row[2],
        "XXXX": row[3],
        "XXXX": row[4]
      }
    }
  );
}
const payload = {
  "appID": {p3},
  "mutations": mutations
}
return JSON.stringify(payload);
  • p1: The URL of the uploaded CSV file
  • p2: A boolean value indicating whether or not the CSV file contains a header row
  • p3: AppID of the App it’s being used in.

The above might give you a head start :wink:

5 Likes
10

It does … thank you.

11

I wonder if there’s any chance of glide supporting data import in the action editor?

Data import could then be done from the frontend, perhaps via a form where you can select which table to import to.

@david

1 Like
12

@Darren_Murphy Could you please share this video link with CSV Upload Concept? I cannot play it from this thread, don’t know why…

13

Try it now.

1 Like