Displaying documents in a multi-document field

Ask the community
, , ,
1

Question:
Is there a way to display documents in a multi-document field on a page?

Product:
CMS, Editor X

What are you trying to achieve:
I have a form that allows users to upload multiple documents to be displayed for site members but I can’t find a way to make this work. Looking for to make it work preferably without code, this should be straight forward since we can collect multi-documents we should be able to display them. I’ve used Velo AI to try to code it with no luck also.

What have you already tried:
Add a single button, and buttons in a repeater. I’ve also tried this code.
$w.onReady(function () {
wixData.query(“saleOfferDataset”)
.find()
.then((results) => {
const documents = results.items.map(item => item.offerDocuments).flat();
$w(“#repeater1”).data = documents;
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
$item(“#text3587”).text = itemData.name;
$item(“#button588”).link = itemData.url; // set the link property
$item(“#button588”).target = “_blank”; // open in a new tab
});
});
});

2

Hi Anthony,

I have this same question. Have you received any feedback on the question you raised privately?

Regards,
Patrick

3

I haven’t, gave up on it for now.

4

Thanks Anthony,

If I learn anything useful I will share here.

Regards,
Patrick

5

Hey everyone,

I found a solution for downloading documents individually from a multi-document field!

The implementation is done on a dynamic item page, where I retrieve the current item and assign the link of each document to a button inside a repeater. This way, the repeater dynamically displays all the documents, allowing users to download them individually.

import wixLocationFrontend from "wix-location-frontend";
$w.onReady(async function () {
    // Get the document array from your dataset item
    const itemObj = $w("#dynamicDataset").getCurrentItem();
    const files = itemObj?.arraydocument || [];
    console.log("Files found:", files);
    // Prepare repeater data with required _id field
    const repeaterData = files.map((url, index) => ({
        _id: index.toString(),  // Required unique identifier
        url: url,
        fileName: extractFileName(url),
        fileType: getFileType(url)
    }));
    // Load data into repeater
    $w("#repeater1").data = repeaterData;
    console.log(`Repeater loaded with ${repeaterData.length} items`);
    // Configure each repeater item
    $w("#repeater1").forEachItem(($item, itemData) => {
        const button = $item("#button67");
        button.target = "_blank";
        button.label = `Download ${itemData.fileName}`;
       
        // Set appropriate download action
        button.onClick(() => {
            const downloadUrl = itemData.fileType === 'image'
                ? getSimplifiedWixImageUrl(itemData.url)
                : itemData.url;
               
            wixLocationFrontend.to(downloadUrl);
        });
    });
});
// Improved filename extractor
function extractFileName(url) {
    if (!url) return "File";
   
    try {
        let lastPart = url.split('/').pop() || "";
        lastPart = lastPart.split('#')[0].split('~')[0].split('?')[0];
       
        // URL decode and clean filename
        try {
            lastPart = decodeURIComponent(lastPart);
            const dotIndex = lastPart.lastIndexOf('.');
            return dotIndex > 0 ? lastPart.substring(0, dotIndex) : lastPart;
        } catch (e) {
            return lastPart.split('.')[0] || "File";
        }
    } catch (e) {
        return "File";
    }
}
// Determine file type
function getFileType(url) {
    return url.includes('wix:image:') ? 'image' : 'document';
}
// Get simplified Wix image URL (without filename at end)
function getSimplifiedWixImageUrl(imageUrl) {
    const match = imageUrl.match(/wix:image:\/\/v1\/([^\/]+)/);
    return match ? `https://static.wixstatic.com/media/${match[1]}` : imageUrl;
}
1 Like