Wix is one of the best drag-and-drop website development tools. With the wide variety of free-to-use templates and easy setup, you can build a website within minutes.
Simple file or image upload can be achieved on Wix without Dev options. But if you want to upload a file, process it, and show the content on the UI, you'll need Dev options turned on.
If you're on Wix ADI, change to Wix Editor - which gives you full control over the things you can edit.
On the top left corner, next to the settings option, you'll see 'Dev Mode'. Hover over it and click on 'Turn on Dev Mode'.
The benefits of Dev Mode can be seen in the above pic. You can add your own JS code, which is what we need for now.
Here are the steps to upload a document:
Step 1. On the page where you want this functionality, add an 'Upload Button' from the 'Add to Site' option on the left side (+ button). This button will be for selecting the file from the system.
Add to Site --> Input --> Upload Buttons
Select one of the button designs provided by Wix and add it to your page.
After adding the button, click on the settings of the same and change the 'supported file type' to 'Document'.
Step 2. Add another button below the Upload Button, change the label to 'Upload', and disable it by default. This button will handle the upload functionality. You can do it without the second button but it will be cleaner this way.
Expand the page code option from the bottom right corner and go to the code editor.
Attach an event handler to the 'onChange' event of the Upload Button. And add the below code to the handler function.
Write this handle function below the $w.onReady(function () {}.
// on file selection enable upload button export function uploadButton1_change(event) { if ($w("#uploadButton1").value.length > 0) { $w("#button1").enable(); } }
'$w("#uploadButton1").value.length' this gives the number of files selected. Wix currently supports the selection of only 1 file at a time. If the file is selected, you are enabling the second button (one with the label 'Upload').
Step 3. Add an event handler function to the 'onClick' event of the second button. Here we will add the file upload functionality.
import { readFileContent } from 'backend/fileProcessing';
export async function button13_click(event) { if ($w("#uploadButton1").value.length > 0) { $w("#uploadButton1").uploadFiles().then((uploadedFile)=>{
let fileUrl = uploadedFile[0].fileUrl;
readFileContent(fileUrl).then((results) => {
// results will be a json array, each object will have column heading as key and corresponding row as value.
console.log(results);
})
}).catch((uploadError)=>{
console.error(uploadError);
})
}
Again we check if the file is selected and if so, we call the uploadFiles() and it resolves to the list of uploaded files object. Since we can only upload 1 document type, the uploaded file object will be the first item on the list. Store the uploaded file's URL in a variable (fileUrl).
Step 4. This step involves the use of the 'Backend' module. From the panel click on the 'Public & Backend' option. Click on the '+' button next to Backend. Add a 'New Web Module' and name it 'fileProcessing.jsw'.
Add the below code snippet,
import { fetch } from 'wix-fetch'; import { mediaManager } from 'wix-media-backend'; // get download url from wix file url export async function getPublicUrl(fileUrl) { const url = await mediaManager.getDownloadUrl(fileUrl); return url; } // reads the file content from the file path export async function readFileContent(fileUrl) { let publicUrl = await getPublicUrl(fileUrl); let file = await fetch(publicUrl); let content = await file.text(); var rows = content.split("\n"); let result = []; let headers = rows[0].split(","); for (let i = 1; i < rows.length - 1; i++) { let obj = {}; let str = rows[i]; let s = ''; let flag = 0 for (let ch of str) { if (ch === '"' && flag === 0) { flag = 1 } else if (ch === '"' && flag == 1) flag = 0 if (ch === ',' && flag === 0) ch = '|' if (ch !== '"') s += ch } let properties = s.split("|"); for (let j in headers) { if (properties[j].includes(",")) { obj[headers[j]] = properties[j] .split(",").map(item => item.trim()) } else obj[headers[j]] = properties[j] } result.push(obj); } return result; }
Let's go through the code step-by-step, once the upload is complete (Step 3), you pass the fileUrl to the backend function readFileContent(fileUrl).
The URL we get from the uploadFiles() function will not be the public URL of the uploaded file. We need to get the public URL of the same. We can achieve that using the mediaManager of the 'wix-media-backend' module.
getPublicUrl(fileUrl) - this returns the public URL of the file.
We then use the fetch from the 'wix-fetch' module and get the file in the backend.
Don't use this approach for large files. Handle the large files either in 3rd party service or by decoupling from FrontEnd.
Once you have the file, get the content of the file using await file.text();
The next lines of code will convert the raw text of CSV data into the array of JSON objects. To understand it deeply, go through this link here: CSV to JSON in Node.js
You can now use a Table or a Repeater to show this array of JSON objects from the CSV file. Do let me know if you have any doubts or issues implementing this.
Useful Links:
Kommentarer