How to display an image uploaded through the upload button in the PDFGeneratorAPI on Wix?

f0cd3bbcbfa5fc3478b9 · November 7, 2024, 9:08am

velo code

import wixData from “wix-data”;

// Convert Wix image URLs to public URLs
function convertWixImageToPublicUrl(wixstatic) {
if (wixstatic.startsWith(“wix:image://”)) {
const parts = wixstatic.split(‘/’);
const fileUrl = parts[parts.length - 1].split(‘~’)[0];

let publicUrl = https://static.wixstatic.com/media/${fileUrl};

const urlObj = new URL(publicUrl);
urlObj.hash = ‘’;

return urlObj.toString();
}

return wixstatic;
}

$w.onReady(function () {
const passColor = “rgb(129, 181, 50)”;
const failColor = “rgb(198, 0, 34)”;

const buttonGroups = [
    { 
        passButtons: ["#button3", "#button138", "#button140", "#button142"], 
        failButtons: ["#button4", "#button137", "#button139", "#button141"], 
        textId: "#text4", 
        totalCount: 4, 
        weight: 100,
        containers: ["#box112", "#box141", "#box142", "#box143"],
        textBoxIds: ["#textBox1", "#textBox2", "#textBox3", "#textBox4"], // TextBox IDs for each box
        uploadButtonIds: ["#uploadButton1", "#uploadButton2", "#uploadButton3", "#uploadButton4"] // UploadButton IDs for each box
    },
    { 
        passButtons: ["#button150", "#button148", "#button146"], 
        failButtons: ["#button149", "#button147", "#button145"], 
        textId: "#text185", 
        totalCount: 3, 
        weight: 100,
        containers: ["#box148", "#box149", "#box150"],
        textBoxIds: ["#textBox7", "#textBox6", "#textBox5"],
        uploadButtonIds: ["#uploadButton7", "#uploadButton6", "#uploadButton5"]
    },
    { 
        passButtons: ["#button153", "#button155", "#button157", "#button159", "#button161"], 
        failButtons: ["#button152", "#button154", "#button156", "#button158", "#button160"], 
        textId: "#text191", 
        totalCount: 5, 
        weight: 100,
        containers: ["#box152", "#box153", "#box154", "#box155", "#box156"],
        textBoxIds: ["#textBox8", "#textBox9", "#textBox10", "#textBox11", "#textBox12"],
        uploadButtonIds: ["#uploadButton8", "#uploadButton9", "#uploadButton10", "#uploadButton11", "#uploadButton12"]
    },
     { 
        passButtons: ["#button164", "#button166", "#button168", "#button170", "#button172", "#button174"], 
        failButtons: ["#button163", "#button165", "#button167", "#button169", "#button171", "#button173"], 
        textId: "#text192", 
        totalCount: 6, 
        weight: 100,
        containers: ["#box158", "#box159", "#box160", "#box161", "#box162", "#box164"],
        textBoxIds: ["#textBox17", "#textBox16", "#textBox15", "#textBox14", "#textBox13", "#textBox18"],
        uploadButtonIds: ["#uploadButton17", "#uploadButton16", "#uploadButton15", "#uploadButton14", "#uploadButton13", "#uploadButton18"]
    },
    { 
        passButtons: ["#button185", "#button183", "#button181", "#button179", "#button177", "#button187", "#button189"], 
        failButtons: ["#button184", "#button182", "#button180", "#button178", "#button176", "#button186", "#button188"], 
        textId: "#text199", 
        totalCount: 7, 
        weight: 100,
        containers: ["#box170", "#box169", "#box168", "#box167", "#box166", "#box171", "#box173"],
         textBoxIds: ["#textBox23", "#textBox22", "#textBox21", "#textBox20", "#textBox19", "#textBox24", "#textBox25"],
        uploadButtonIds: ["#uploadButton23", "#uploadButton22", "#uploadButton21", "#uploadButton20", "#uploadButton19", "#uploadButton24", "#uploadButton25"]
    }
];

function calculateGroupPercentage(group) {
    const passCount = group.passButtons.filter(btnId => $w(btnId).style.backgroundColor === passColor).length;
    const totalPercentage = (passCount / group.totalCount) * group.weight;
    $w(group.textId).text = `${passCount} / ${group.totalCount} (${totalPercentage.toFixed(2)}%)`;

    return {
        passCount: passCount,
        totalCount: group.totalCount,
        percentage: totalPercentage.toFixed(2)
    };
}
// Function to handle file upload
function handleFileUpload(uploadButtonId, group, index) {
    const uploadButton = $w(uploadButtonId);

    uploadButton.onChange(async () => {
        if (uploadButton.value.length > 0) { // Check if a file was uploaded
            try {
                const uploadedFile = await uploadButton.uploadFiles();
                if (uploadedFile && uploadedFile.length > 0) {
                    const fileUrl = uploadedFile[0].fileUrl;
                    const result = {
                        buttonId: uploadButtonId,
                        fileUrl: fileUrl, // Save uploaded file URL
                        textBoxValue: $w(group.textBoxIds[index]).value // Save textbox value
                    };
                    saveResultToDataset(result);
                }
            } catch (error) {
                console.error("File upload failed:", error);
            }
        }
    });
}

async function handleButtonClick(button, group, containerId, index) {
const containerChildren = $w(containerId).children;
const passButtons = group.passButtons;
const failButtons = group.failButtons;

let isChanged = false; // Track if button color changed

let result = {
    buttonId: button.id,
    pass: false,
    fail: false
};

if (passButtons.includes(`#${button.id}`)) {
    if (button.style.backgroundColor !== passColor) { // Check if color is not already pass
        button.style.backgroundColor = passColor;
        failButtons.forEach(failBtn => {
            if (containerChildren.includes($w(failBtn))) {
                $w(failBtn).style.backgroundColor = "black";
            }
        });
        result.pass = true;
        isChanged = true; // Mark as changed
    }
} else if (failButtons.includes(`#${button.id}`)) {
    if (button.style.backgroundColor !== failColor) { // Check if color is not already fail
        button.style.backgroundColor = failColor;
        passButtons.forEach(passBtn => {
            if (containerChildren.includes($w(passBtn))) {
                $w(passBtn).style.backgroundColor = "black";
            }
        });
        result.fail = true;
        isChanged = true; // Mark as changed
    }
}

// Get the text from the corresponding textbox
result.textBoxValue = $w(group.textBoxIds[index]).value;

// Get the text from the corresponding textbox
result.textBoxValue = $w(group.textBoxIds[index]).value;

// Save the button click result to the dataset only if color changed
if (isChanged) {
    saveResultToDataset(result);
}

calculateGroupPercentage(group);

}

// Function to save the result to the dataset
function saveResultToDataset(result) {
let toInsert = {
buttonId: result.buttonId,
pass: result.pass,
fail: result.fail,
textBoxValue: result.textBoxValue, // Save textbox value
fileUrl: result.fileUrl ? convertWixImageToPublicUrl(result.fileUrl): “”, // Save single file URL
timestamp: new Date()
};

// Insert the result into the dataset
wixData.insert("myDataset", toInsert)
    .then((result) => {
        console.log("Item saved to dataset:", result);
    })
    .catch((err) => {
        console.error("Error saving to dataset:", err);
    });

}

buttonGroups.forEach(group => {
    group.containers.forEach((containerId, index) => {
        const containerChildren = $w(containerId).children;

        containerChildren.forEach(button => {
            const buttonId = `#${button.id}`;
            if (group.passButtons.concat(group.failButtons).includes(buttonId)) {
                button.onClick(() => handleButtonClick(button, group, containerId, index));
            }
        });
    });
});

buttonGroups.forEach((group, groupIndex) => {
group.uploadButtonIds.forEach((uploadButtonId, buttonIndex) => {
handleFileUpload(uploadButtonId, group, buttonIndex);
});
});

// Collapsing function for toggling boxes
function toggleBox(boxElement) {
    const isCollapsed = boxElement.collapsed;
    if (isCollapsed) {
        boxElement.expand();
    } else {
        boxElement.collapse();
    }
}

$w('#button2').onClick(() => toggleBox($w('#box147')));
$w('#button144').onClick(() => toggleBox($w('#box151')));
$w('#button143').onClick(() => toggleBox($w('#box146')));
$w('#button151').onClick(() => toggleBox($w('#box157')));
$w('#button162').onClick(() => toggleBox($w('#box165')));
$w('#button175').onClick(() => toggleBox($w('#box174')));

});
``

//**----------------------------pdf export------------------------------------------ */
// import {generatePdfFromData} from ‘backend/pdfhelper’;

// $w.onReady(function(){
// let url;
// $w(‘#submitButton’).onClick(async ()=>{
// const name = $w(“#button170”).label;

// const data = {name};
// url = await generatePdfFromData(data);
// $w(‘#exportButton’).link = url;
// $w(‘#exportButton’).target = “_blank”;
// console.log(url)

// })

import { generatePdfFromData } from ‘backend/pdfhelper’;

$w.onReady(function () {
const pdfResults = {};

function handleButtonClick(buttonId, isPass, groupKey) {
    const buttonLabel = $w(buttonId).label;


    pdfResults[groupKey] = {
        result: isPass ? 'Pass' : 'Fail',  // เก็บเฉพาะคำว่า Pass หรือ Fail
        status: isPass
    };

    $w(buttonId).style.backgroundColor = isPass ? "rgb(129, 181, 50)" : "rgb(198, 0, 34)"; 

    const group = buttonGroups[groupKey];
    group.passButton.concat(group.failButton).forEach(buttonIdInGroup => {
        if (buttonIdInGroup !== buttonId) {
            $w(buttonIdInGroup).style.backgroundColor = "black"; // สีดำสำหรับปุ่มอื่น
        }
    });
}

const buttonGroups = {
    group1: { 
        passButton: ["#button3"], 
        failButton: ["#button4"],
        textBoxIds: ["#textBox1"],  
        uploadButtonIds: ["#uploadButton1"] 
    },
    group2: { 
        passButton: ["#button138"], 
        failButton: ["#button137"],
        textBoxIds: ["#textBox2"],
        uploadButtonIds: ["#uploadButton2"] 
    },
    group3: { 
        passButton: ["#button140"], 
        failButton: ["#button139"],
        textBoxIds: ["#textBox3"], 
        uploadButtonIds: ["#uploadButton3"] 
    },
    group4: { 
        passButton: ["#button142"], 
        failButton: ["#button141"],
        textBoxIds: ["#textBox4"], 
        uploadButtonIds: ["#uploadButton4"] 
    },
    group5: { 
        passButton: ["#button150"], 
        failButton: ["#button149"],
        textBoxIds: ["#textBox7"], 
        uploadButtonIds: ["#uploadButton7"] 
    },
    group6: { 
        passButton: ["#button148"], 
        failButton: ["#button147"],
        textBoxIds: ["#textBox6"], 
        uploadButtonIds: ["#uploadButton6"] 
    },
    group7: { 
        passButton: ["#button146"], 
        failButton: ["#button145"],
        textBoxIds: ["#textBox5"], 
        uploadButtonIds: ["#uploadButton5"] 
    },
    group8: { 
        passButton: ["#button153"], 
        failButton: ["#button152"],
        textBoxIds: ["#textBox8"], 
        uploadButtonIds: ["#uploadButton8"] 
    },
    group9: { 
        passButton: ["#button155"], 
        failButton: ["#button154"],
        textBoxIds: ["#textBox9"], 
        uploadButtonIds: ["#uploadButton9"] 
    },
    group10: { 
        passButton: ["#button157"], 
        failButton: ["#button156"],
        textBoxIds: ["#textBox10"], 
        uploadButtonIds: ["#uploadButton10"] 
    },
    group11: { 
        passButton: ["#button159"], 
        failButton: ["#button158"],
        textBoxIds: ["#textBox11"], 
        uploadButtonIds: ["#uploadButton11"] 
    },
    group12: { 
        passButton: ["#button161"], 
        failButton: ["#button160"],
        textBoxIds: ["#textBox12"], 
        uploadButtonIds: ["#uploadButton12"] 
    },
    group13: { 
        passButton: ["#button172"], 
        failButton: ["#button171"],
        textBoxIds: ["#textBox17"], 
        uploadButtonIds: ["#uploadButton17"] 
    },
    group14: { 
        passButton: ["#button170"], 
        failButton: ["#button169"],
        textBoxIds: ["#textBox16"], 
        uploadButtonIds: ["#uploadButton16"] 
    },
    group15: { 
        passButton: ["#button168"], 
        failButton: ["#button167"],
        textBoxIds: ["#textBox15"], 
        uploadButtonIds: ["#uploadButton15"] 
    },
    group16: { 
        passButton: ["#button166"], 
        failButton: ["#button165"],
        textBoxIds: ["#textBox14"], 
        uploadButtonIds: ["#uploadButton14"] 
    },
    group17: { 
        passButton: ["#button164"], 
        failButton: ["#button163"],
        textBoxIds: ["#textBox13"], 
        uploadButtonIds: ["#uploadButton13"] 
    },
    group18: { 
        passButton: ["#button174"], 
        failButton: ["#button173"],
        textBoxIds: ["#textBox18"], 
        uploadButtonIds: ["#uploadButton18"] 
    },
    group19: { 
        passButton: ["#button185"], 
        failButton: ["#button184"],
        textBoxIds: ["#textBox23"], 
        uploadButtonIds: ["#uploadButton23"] 
    },
    group20: { 
        passButton: ["#button183"], 
        failButton: ["#button182"],
        textBoxIds: ["#textBox22"], 
        uploadButtonIds: ["#uploadButton22"] 
    },
    group21: { 
        passButton: ["#button181"], 
        failButton: ["#button180"],
        textBoxIds: ["#textBox21"], 
        uploadButtonIds: ["#uploadButton21"] 
    },
    group22: { 
        passButton: ["#button179"], 
        failButton: ["#button178"],
        textBoxIds: ["#textBox20"], 
        uploadButtonIds: ["#uploadButton20"] 
    },
    group23: { 
        passButton: ["#button177"], 
        failButton: ["#button176"],
        textBoxIds: ["#textBox19"], 
        uploadButtonIds: ["#uploadButton19"] 
    },
    group24: { 
        passButton: ["#button187"], 
        failButton: ["#button186"],
        textBoxIds: ["#textBox24"], 
        uploadButtonIds: ["#uploadButton24"] 
    },
    group25: { 
        passButton: ["#button189"], 
        failButton: ["#button188"],
        textBoxIds: ["#textBox25"], 
        uploadButtonIds: ["#uploadButton25"] 
    }
};

Object.keys(buttonGroups).forEach(groupKey => {
const group = buttonGroups[groupKey];

group.passButton.forEach(passButtonId => {
    $w(passButtonId).onClick(() => handleButtonClick(passButtonId, true, groupKey));
});

group.failButton.forEach(failButtonId => {
    $w(failButtonId).onClick(() => handleButtonClick(failButtonId, false, groupKey));
});

});

$w(‘#submitButton’).onClick(async () => {

    const results = await Promise.all(Object.keys(buttonGroups).map(async (groupKey, index) => {
        if (pdfResults[groupKey]) {
            const { status } = pdfResults[groupKey];
            const backgroundColor = status ? "rgb(129, 181, 50)" : "rgb(198, 0, 34)";

            const group = buttonGroups[groupKey];
            const textBoxValue = $w(group.textBoxIds[0]).value;


        // Retrieve image URLs from each upload button
        const imageElements = await Promise.all(group.uploadButtonIds.map(async (uploadButtonId) => {
            const uploadButton = $w(uploadButtonId);
            let fileUrl = "";

            if (uploadButton.value.length > 0) {
                try {
                    const uploadedFiles = await uploadButton.uploadFiles();
                    if (uploadedFiles && uploadedFiles.length > 0) {
                        fileUrl = convertWixImageToPublicUrl(uploadedFiles[0].fileUrl); 
                    }
                } catch (error) {
                    console.error(`Error uploading file for ${uploadButtonId}:`, error);
                }
            }
            return fileUrl ? `
            <div style="margin-top: 10px;">
                <img src="${fileUrl}" alt="Uploaded Image" style="width: 200px; height: 200;">
            </div>
        ` : "";
    }));
     

            // Create a div for the results with spacing
            return {
                result: `
                    <div id="result${index + 1}" style="padding: 90px; margin-bottom: 50px;background-color: ${backgroundColor};">
                        <span style="color: white;font-size: 20px;">
                            ${status ? 'Pass' : 'Fail'}
                        </span>
                    </div>
                `,
                textBox: `
                    <div id="textBoxValue${index + 1}" style="color: black; font-size: 16px;">
                        ${textBoxValue}
                    </div>
                `,
              images: imageElements.join(""),

             
        
            };
        }
        return null;
    }));

    // Filter out null results
    const validResults = results.filter(res => res !== null); 

    // Prepare the data object with results
    const data = {};
    validResults.forEach((res, index) => {
        data[`results${index + 1}`] = res.result;
        data[`textBoxValue${index + 1}`] = res.textBox; 
        data[`imageElements${index + 1}`] = res.images;
    });

    try {
        const url = await generatePdfFromData(data);
        $w('#exportButton').link = url;
        $w('#exportButton').target = "_blank";
        console.log(url);
    } catch (error) {
        console.error("Error generating PDF:", error);
    }
});

});

Topic		Replies	Views
Pdf generator error module Ask the community wix-studio , code	0	13	October 25, 2024
How to get images a user uploads on a Wix site to display on a PDF using the PDF Generator API? Ask the community code , question	13	578	June 28, 2022
Button to view uploaded files Ask the community code , question	1	147	August 13, 2018
How upload image to database by wixData.insert Ask the community code , question	3	1301	August 27, 2022
Upload pdf public url Ask the community code , question	1	22	October 16, 2024

How to display an image uploaded through the upload button in the PDFGeneratorAPI on Wix?

Related topics