Upload csv file and Parse (WeWeb-Xano)

I want to import a csv file containing different columns, as shown in the image,

I want to be able to parse the data from each of the columns to add them to my database in Xano, I am using the upload file in WeWeb and I have tried to include a custom js but I can’t get the results of each column of the csv, can anyone help me with this?

Hi, you should be able to read it with the native Reader feature of the browser in javascript :

Put this inside a custom js action or a formula with parameters if you want it to be reusable.

return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function (event) {
        const formattedData = event.target.result.split("\n").map(row => row.split(","))
        resolve(formattedData);
    };
    // Read the file as text
    reader.readAsText(variables[/* File 1 - value */ '058c64ba-450d-472d-b18a-9a08947f2f18-value']);
});

The result of the action will give you an array where every item is a line, and inside every line you will have another array where every item is a column.

I choose to split it using the token “,” but you should replace it with the one used inside your CSV. And be careful, if you choose “,” but your cells contain some “,” columns will not be accurate.

Hope it help you :slight_smile:

2 Likes

Hi Alexis, thanks for the reply, i just added the code that you sent, this is the result

Not sure what im doing wrong

You have to replace the variable on the last line if your own variable, you can erase it, put your cursor in the right position and click on your explorer. You have to click on variable value of your fileUpload component.

1 Like


i did it but still shows me this error

The last row should look like that :

reader.readAsText(variables[/* File 1 - value */ '058c64ba-450d-472d-b18a-9a08947f2f18-value']);

but currently you have something like that

reader.readAsText(variables[/* File 1 - value */ '058c64ba-450d-472d-b18a-9a08947f2f18-value']*/ '058c64ba-450d-472d-b18a-9a08947f2f18-value']);

Please, erase the last line, keep only

reader.readAsText()

Put your cursor inside the parenthesis and click on your variable

Great, now is working!


How can i save the rows into my xano database?
i tried to use the From action 1 to do it but only take the line that i selected, is there a way proably using a loop to store all the lines that the csv have

Yes, you can click on the + button before your Xano action, and add a loop action. You will be able to iterate on your array. You will have to take care to ignore the first row (containing header) and you will be able to put a xano request inside the loop and fill the form of your request.

The data of the loop are under the workflow tab of the explorer, you will find an action containing a loop variable with the data and index inside.

in this case what value should be selected as Items to parse (array) in the loop

Put the custom javascript before the loop, and use the result of the custom javascript (the array with your lines) in your loop :slight_smile:


I added it that way, now it is fine but it does not allow me to take a particular value in the xano action, how could I determine that it take all the values that I have in the csv, if there are 4 rows, save the 4 rows and be able to remove the header row to not take it into account

You must bind result and not result[0], result[0] contain the first line only

And you can remove the first line by doing removeByIndex(result, 0) when you bind your loop instead.
Then, when you bind inside your loop, I mean, on your Xano request, you will have access to the last row as a template for binding purpose.

1 Like

Yes it works, but it is only taking the first row to save and when it makes the loop I get the error for duplicating the value, I don’t know which of the options I should take in from action 2 (loop) so that it takes all the rows of the csv

nvm i found the way! thanks for all Alexis!

1 Like

Well done :slight_smile:

You should throw this - stuff in the docs along side rest

Hey @Alexis have a new doubt

Now I have this option to add new users by uploading a csv, it’s working fine, what I want is to add a condition that allows me to check in my database if the user already exists, checking the User_Code, in case the user is already in the database, update that user

@jaredgibb Yes I think it could even be an action “Read file as text” :slight_smile:

@edbernal Hi, do you have already a collection with your users list ? If yes you could try to do a formula with if(length(filterByKey(myUsers, 'id', User_Code)), false, true)

if you don’t have the list you will have to send a request to your Xano before the pass through, you should have an endpoint allowing you yo retrieve an User by his ID. Check if the request return an user and do different thing depending of the result.

Hello @Alexis thanks,

I don´t get it, what you mentioned, i´ll give you all the details that i have until now:

1st step: upload Csv: i already configurate the code to return all the values from the csv

2nd step: request users from the user collection, idk if this is ok in my logic i request the user collection to compare the “User_Code” from the collection to the User_Code form de csv (1st step)

Note: the User_Code is not the ID

3rd: create the loop, this works good

4th: Idk if i need to use a Pass Through Condition or a True/False Split, my query is, if my User_Code from the user collection not contains the User_Code from the csv then create new record (add new user) otherwise edit the record (edit the user) with the same User_Code

Screenshot 2023-07-24 at 14.39.16

Thanks!!

Hi, I’m not sure to understand what your user collection contain in WeWeb ? Your current user or the list of all your users ?

Yes you need a True/False split if you want to do different things depending of if your condition is true or false.

  1. JS - Upload CSV
  2. Loop - Every users in CSV
    3. Xano - Check if user exist
    4. Split - Formula if checked user exist
    4.a. If true => Xano - Update
    4.b. if false => Xano - Create User
  3. Fetch collection

If your check user throw an error because no user with this id exist you could have to take a different approach, for example fetching /users with a filter, so it return an empty list or a list with an user instead of throwing an error if no user exist.