Hey, guys, I searched an article which taught me how to export a Wix database collection using Wix code.
Now I want something so that I can import a .csv (or .xlsx) file and it gets imported into the collection.
Is there any way I would be so grateful?
I have already checked out this article by Wix.
But it is not so user friendly.
Do you need to it by code? Or maybe you would just like to click Import CSS at the data manager?
Thanks for reply! I just want something like a upload button on my site and when the user click the submit button it automatically get imported into the collection.
You know the best way, I am just a learner🙂
@rinshulgoel So you that on the content manager there’s a button to import csv file:
and you can add some users as contributors.
But if you need a button on the front-end of your website, you should use an upload button and install a csv to json npm (maybe this one , which is available for Wix platform), then parse the json and save to the database.
@jonatandor35 I have checked the contributors section in the dashboard and currently, Wix doesn’t provide any role for the stated purpose.
As far as the second option is concerned, I have done some work over it
Please Check and guide me further -
I hope it is correct??
2. Then I added a new page, in it, I added an upload element and a submit button.
3. And I added the following code and it is showing tons of errors.
Then I don’t know what to do please guide me, it would be a great help.
@rinshulgoel First of all you can ignore the IDE error indication for require() it’s a known bug (but it’s not a real error).
As for line 7, it looks like you have to import another module as well. Anyway I can’t help you with implementation details as I’ve never used it myself.
But as a matter of fact, you can do everything without any npm, but using fetch.
Once you got the fileUrl. Something like:
import {fetch} from 'wix-fetch';
import wixData from 'wix-data';
//....
//and once you got the fileURL:
fetch(fileURL)
.then(r => r.text()).then(r => {
let lines = r.split("\n");
let result = [];
let headers = lines[0].split(",");
for(let i = 1; i< lines.length; i++){
let obj = {};
let currentline = lines[i].split(",");
for(let j = 0; j <headers.length; j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return wixData.bulkInsert("CollectionName", result);
})
.then(r => console.log(r))
.catch(err => err);
[typos fixed]
@jonatandor35 There is no such issue will find someday.
And the code you gave, sorry, but I am unable to understand what’s happening as I have never used such type of commands.
//…
//and once you got the fileURL:
Is this the way to getfileURL:
export function uploadButton1_change(event) {
let fileURL = $w("#uploadButton1").value;
}
@rinshulgoel First you have to upload the file.
See here:
export function uploadButton1_change(event) {
if($w("#uploadButton1").value.length > 0) {
$w("#uploadButton1").startUpload()
.then(uploadedFile => fetch(uploadedFile.url))
.then(r => r.text()).then(r => {
let lines = r.split("\n");
let result = [];
let headers = lines[0].split(",");
for(let i = 1; i< lines.length; i++){
let obj = {};
let currentline = lines[i].split(",");
for(let j = 0; j <headers.length; j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return wixData.bulkInsert("CollectionName", result);
})
.then(r => console.log(r))
.catch(err => err);
}
}
And you;ll have to make some adjustments to convert the value from type string to the type you wish, and to get rid of some junk like “\r” etc…
@jonatandor35 I tried and there are some errors.
The RED colour are errors.
import wixData from 'wix-data';
import {fetch} from 'wix-fetch';
$w.onReady(function () {
});
export function uploadButton1_change(event) {
console.log($w("#uploadButton1").value) // I Added
if($w("#uploadButton1").value.length > 0) {
$w("#uploadButton1").startUpload()
.then((uploadedFile) => {
console.log(uploadedFile) // I Added
// let fetchUrl = fetch(uploadedFile.url) // FETCH didn't work and shows error
let fetchURL = uploadedFile.url // So I DiD this
console.log("Fetch URL : " + fetchURL) // I Added
})
.then((r) => {
console.log(r) // I Added
// Result of console.log(r) in console is "undefined"
// r.text(); // Error : text is undefined
// r.toString(); // Error : string is undefined
})
.then((r) => {
let lines = r.split("\n"); // Error : Split is undefined
---------------I Have Checked Till here-------------------
let result = [];
let headers = lines[0].split(",");
for(let i = 1; i < lines.length; i++){
let obj = {};
let currentline = lines[i].split(",");
for(let j = 0; j <headers.length; j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return wixData.bulkInsert("Try", result);
})
.then((r) => {
console.log(r)
})
.catch((err) => {
err
console.log(err);
});
}
}
@rinshulgoel your code is wrong. Use the code I posted above.
@jonatandor35
Example with your code -
export function uploadButton1_change(event) {
console.log("1"); // Step 1
if($w("#uploadButton1").value.length > 0) {
console.log("2"); // Step 2
$w("#uploadButton1").startUpload()
.then(uploadedFile => fetch(uploadedFile.url))
.then(r => r.text()).then(r => {
console.log("3"); // Step 3
let lines = r.split("\n");
let result = [];
let headers = lines[0].split(",");
for(let i = 1; i< lines.length; i++){
let obj = {};
let currentline = lines[i].split(",");
for(let j = 0; j <headers.length; j++){
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
console.log("4") // Step 4
return wixData.bulkInsert("Try", result);
})
.then(r => console.log(r))
.catch(err => err);
}
}
console -
@rinshulgoel instead of console.log(“3”)
Write console.log(r)
And see what it logs
@jonatandor35 Nothing is there on console except the previous result.
I have imported fetch.
I think If we can convert CSV to JSON then it will become easy to insert data.
like this -
import wixData from 'wix-data';
// CSV TO JSON (Don't know how to do)
// Below code only for example and not excat
export function importButton_onClick(event) {
const items = JSON.parse($w("#textBox").value);
const collection = $w("#collectionInput").value;
items.forEach( (item) => {
wixData.insert(collection, item)
.then( (results) => {
console.log(`Added item: ${JSON.stringify(results)}`);
} )
.catch( (err) => {
console.log(err);
} );
} );
$w("#textBox").value = "";
}
Source -
I don’t think it’s relevant.
In my code change this line:
.then(uploadedFile => fetch(uploadedFile.url))
To:
.then(uploadedFile => {
console.log("step 2.5", uploadedFile.url);//step 2.5
return fetch(uploadedFile.url);
})
@jonatandor35
console-
@rinshulgoel OK. now I see the problem. You have to convert it from Wix internal url to the full url before you use fetch. Please post here the console.log() text (and not a screenshot), so I’ll be able to show you.
Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the Import page. To debug this code, open juz9e.js in Developer Tools.
1 Import Line 49
2 Import Line 51
step 2.5 wix:document://v1/977dce_6177b5e4f8be48d1aee9de1e43b3e3d2.csv/data.csv
