How to import an image to Wix Data Collection?

Question

I have a Wix Collection (visible in the Content Manager) called "Guests", which includes a column of type Image. I want to import a CSV file in such a way that an externally-hosted image is uploaded to Wix and saved in this field.

I can import a CSV file with the image column value set to an external URL, but the image file is not imported to Wix (i.e. the image file is fetched from the external site every time it is used).

I've tried writing a myCollection_beforeInsert() hook to call wixMediaManager.importFile() and use the returned fileUrl, but Wix doesn't recognise my value as an image.

• If I set it to a string like 'wix:image://v1/{fileUrl}', Wix complains "Cell value type is Text."
• If I set it to a JS object like { type: 'image', src: 'wix:image://v1/{fileUrl}' }, Wix complains "Cell value type is JS Object."
• EDIT: when I manually set an image then export to CSV, the format is 'wix:image://v1/{fileUrl}/{fileName}#originWidth={width}&originHeight={height}'. I tried this but the image width and height are not returned from the importFile() method, so it is still recognised as Text.

What are my other options for setting the image field value? The docs are unclear. https://www.wix.com/corvid/reference/wix-data.html

Answer 1

I got this working by

1. importing a CSV with a "imageUrl" field, then
2. importing each file (asynchronously) and
3. attaching each imported file to the "image" field of its proper data item.

First I imported a CSV with a "imageUrl" field.

Then I triggered a piece of code (I put it in a page's $w.onReady(), but you can put it anywhere), to call importFile() with additional context:

function importImages() {
    wixData.query("myCollection")
        .isEmpty("image")
        .isNotEmpty("imageUrl")
        .find() // max 1000 items
        .then(result => Promise.all(result.items.map(item => {
            return mediaManager.importFile('/images', item.imageUrl, {
                "mediaOptions": {
                    "mediaType": "image"
                },
                "metadataOptions": {
                    "context": {
                        "itemId": item._id // <-- this is how we know which item to update later
                    }
                }
            });
        }));
}

And I registered an event listener for Wix's onFileUploaded event, to update the image field for the relevant data item.

export function wixMediaManager_onFileUploaded(event) {
    if (event.context.itemId) {
        // get where item._id === event.context.itemId
        return wixData.get("myCollection", event.context.itemId, { suppressAuth: true })
            .then(itemToUpdate => {
                // set the "image" field
                itemToUpdate.image = event.fileInfo.fileUrl;
                return wixData.update("myCollection", itemToUpdate, { suppressAuth: true });
            });
    }
}