Want to know how you can set up your Wix website to share with your visitor’s downloadable files a.k.a. Images, Videos, Documents, and more?? Find out how to use Velo code to download and get file information on different files you upload to your website. Then stay tuned for in-depth knowledge about this trick and the code behind it below.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

00:00 CN Intro

00:25 Set up website for design architecture

02:50 Turn on Developer Mode & Create Database

06:50 Wix Input Function & Search Function

16:40 Wix Repeater onItemReady Function

29:40 Wix Backend Media Get File Info Function

31:57 Preview & Perform Download Page

32:30 Download Image, Video, Document, and Audio FIles

34:20 Outro

Code Snippet to follow along with the video:

Page Code

This loads the page code

import wixData from 'wix-data';
import * as media from 'backend/dev/media/get.jsw';

$w.onReady(function () {
});

let timeout;
export function input1_input(event) {
    if (event.target.value.length > 0) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            searchFile(event.target.value);
        }, 500);
    }
}

export function input1_blur(event) {
    clearTimeout(timeout);
}

async function searchFile(param) {
    let wixQuery = wixData.query("files").eq("isSearchable", true);
    let res;
    if (param) {
        res = await wixQuery.contains("fileName", String(param)).or(wixQuery.contains("originalFileName", String(param))).or(wixQuery.contains("fileType", String(param)))
            .or(wixQuery.contains("title", String(param))).find();
    } else {
        res = await wixQuery.find();
    }
    console.log(res);
    if (res.totalCount > 0) {
        $w("#repeater1").data = res.items; //
        $w("#box40").collapse();
        $w("#repeater1").expand();
    } else {
        $w("#repeater1").data = [{ "_id": "item1" }];
        $w("#repeater1").collapse();
        $w("#text90").text = `No file named '${param}'`;
        $w("#box40").expand();
    }
}

export async function repeater1_itemReady($item, itemData, index) {
    try {
        if (itemData.fileType) {
            let typeElement = $item(`#${itemData.fileType}1`);
            let file = (itemData.fileType.toLowerCase() === "document") ? itemData[`${String(itemData.fileType).slice(0,3)}`] : itemData[`${String(itemData.fileType)}`];
            let sfile = (itemData.fileType.toLowerCase() === "document") ? String(file).split("/")[4] : String(file).split("/")[3];
            let link;
            try {
                link = await media.getFile(sfile); //sfile is file name
                //console.log("File Info:", file, sfile, link);
            } catch (err) {
                //console.log(err, err.stack);
            }
            switch (itemData.fileType) {
            case "image":
                typeElement.src = (itemData.image) ? itemData.image : $w(`#${itemData.fileType}1`).src;
                console.log(itemData[`${itemData.fileType}`]);
                //wix:image://v1/3eee3f3c40c242258153b979fbc7fa14.jpg/_.jpg#originWidth=3279&originHeight=2942
                $item("#button1").link = (link) ? link : `https://static.wixstatic.com/media/${sfile}`;
                break;
            case "video":
                typeElement.src = (itemData.video) ? itemData.video : $w(`#${itemData.fileType}1`).src;
                console.log(itemData[`${itemData.fileType}`]);
                //wix:video://v1/11062b_85319d6306634e3c8b4e8382f957d2c9/Tape%20Recorder#posterUri=11062b_85319d6306634e3c8b4e8382f957d2c9f000.jpg&posterWidth=1920&posterHeight=1080
                $item("#button1").link = (link) ? link : `https://video.wixstatic.com/video/${sfile}/1080p/mp4/file.mp4`;
                break;
            case "document":
                //typeElement.src = (itemData.image) ? itemData.image : $w(`#${itemData.fileType}1`).src;
                console.log(itemData[`${String(itemData.fileType).slice(0,3)}`]);
                //wix:document://v1/ugd/cec60b_cc9e12f01a4b4a63898a678a9fa8f114.csv/bizroles.csv
                $item("#button1").link = (link) ? link : `https://8b7eef41-7fbb-440b-928a-a442878112a3.usrfiles.com/ugd/${sfile}`;
                break;
            case "audio":
                //typeElement.src = (itemData.image) ? itemData.image : $w(`#${itemData.fileType}1`).src;
                console.log(itemData[`${String(itemData.fileType).slice(0,3)}`]);
                //wix:audio://v1/cec60b_92d3ef6ed8024532b75794e95fa05140.mp3/Blues%20Infusion%20-%20Quincas%20Moreira.mp3#duration=130
                $item("#button1").link = (link) ? link : `https://static.wixstatic.com/mp3/${sfile}`;
                break;
            default:
                console.log(itemData[`${itemData.fileType}`]);
                $item("#button1").hide();
                break;
            }
            typeElement.show();
        }
        $item("#name1").text = (itemData.fileName) ? itemData.fileName : "File Name Not Found";
        $item("#info1").text = "Details:\n\nFile Type: " + ((itemData.fileType) ? String(itemData.fileType).toUpperCase() : "-") +
            "\nOriginal Name: " + ((itemData.originalFileName) ? String(itemData.originalFileName) : "-") + "\nUploaded: " + new Date(itemData._createdDate).toDateString();
 
    } catch (err) {
        console.log("err - ", err, err.stack);
    }
 
}

export function button2_click(event) {
    if ($w("#input1").value.length > 0) {
        searchFile($w("#input1").value);
    } else {
        searchFile();
    }
}

Backend Code:

import wixMediaBackend from 'wix-media-backend';
export async function getFile(fileName) {
    return await wixMediaBackend.mediaManager.getFileInfo(fileName).then(async (res) => {
        return await wixMediaBackend.mediaManager.getFileUrl(res.fileName);
    });
}

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2021: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!