(solved) insert a reference and an image into a collection together when the reference is created on the same page

Ask the community
,
1

The documentation suggests these functions work with standard one to one references
https://www.wix.com/corvid/reference/wix-data.html#replaceReferences
https://www.wix.com/corvid/reference/wix-data.html#insertReference
The examples are for singular reference inserts.
I don’t understand how I’m getting this error.

WDE0020: Provided relationshipAttribute [owningPhotographer] is not a multi-reference field.

I’m was just trying to upload an image into the collection with a reference to the photographer that took it.
a) I cannot use a simple dropdown as the photographer is created on the same page. Even when using .refresh() I cannot get the newly created to display in the list and end up in the dataset being submitted (I’m not in a hurry to use a dropdown as users having to re-select themselves is terrible UI)
b) I cannot create the entire entry with code as WixData.insert() has a limit of 200kb. So I wouldn’t be able to get the photo into the collection, and the entire row has to be created by .insert() best I can tell. (turns out you can however pass the URL and the image uploads anyway)
c) I appear unable to just insert the reference after the image submit and get the error in this post. I was trying to follow.

or

I’m a bit stuck, help appreciated

2

Looks like the general answer is, you cannot take the approach I’m trying for needing both image upload and reference creation. Image upload has 2 approaches (code and wix objects), reference creation two (code and wix objects). Reference creation when on same form/page as item to be the reference is created has only one solution ‘by code’ so this forces other choices to taking the code solution option.

The approach that didn’t work

  • Connect uploadButton button to the collection (nope we need to code the upload)
  • Have a submit button, this then connects to the collection and "submit action) nope you need to move to code)
  • Reference, trying to add via dropdown, with a reference to the collection. Wants to work but the latest created item never appears to use as the selected value when calling .Refresh() on the dataset afterSave or not.

Correct approach
You need to use image upload and insert in collection like this.
https://www.wix.com/corvid/reference/$w.UploadButton.html
Use the URL in an insert call
Use the insert call to create the rest of the item including the Reference.

The positive from taking the code approach MIGHT have been the ability to specify the folder location the upload will go to. But if you use UploadButton.Upload() then files are located in the visitors folder of the Media Manager folder system. NOTHING I CAN DO (WIX enhancemewnt for sure) enhancement.
To specify where you want the image uploaded to go you need to use https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#upload and its beyond me how to build a file selector popup etc. So it will have to be a too hard basket and the media manager mess folder structure will have to remain a mess.

I present the code to upload a file, insert this URL into a collection while providing a reference to the photographer item that inserted it.
(you can see in the commented out code my hope for setting the folder structure)

import wixData from 'wix-data';
var newPhotographerID;
var photofilename;
var PhotographersName; 
var URL;

export function photographerDatasetWrite_afterSave() {
const newphotographer = $w("#photographerDatasetWrite").getCurrentItem();
    newPhotographerID = newphotographer._id;
    PhotographersName = newphotographer.name;
}


export function uploadButton_click(event) {
console.log("upload button pressed");
if ($w("#selectFileButton").value.length > 0) { 
 let files = $w("#selectFileButton").value
    photofilename = files[0].name; // "mypic.jpg"
 //console.log(photofilename);
 // test needed incase photgrapher details are blank as they skipped that step
 //files[0].name = "/Photographers/" + PhotographersName + "/" + photofilename
    console.log(files[0].name);
    $w("#selectFileButton").startUpload()
      .then( (uploadedFile) => {
        console.log("Upload successful. File is available here:");
        console.log(uploadedFile.url);
        URL = uploadedFile.url;
 var mainImageBoolean = Boolean($w("#mainImageSwitch").value);
 
 let toInsert = {
 "contentPhoto":        URL,
 "owningPhotographer":   newPhotographerID,
 "mainImage":    mainImageBoolean,
            };
            wixData.insert("Photographers_Photos", toInsert)
            .then( (results) => {
 let item = results; //see item below
            } )
            .catch( (err) => {
 let errorMsg = err;
            } ); 
                console.log("contentPhoto: " + URL);
        console.log("owningPhotographer: "+ newPhotographerID);
        console.log("mainImage: "  + mainImageBoolean);
        } )
            .catch( (uploadError) => {
            console.log("File upload error: " + uploadError.errorCode);
            console.log(uploadError.errorDescription);
            } );
        }
 else {  // site visitor clicked button but didn't choose a file
        console.log("Please choose a file to upload.")
  }
}