adding image to collection

Hi, I’m building a course collection website, each course has a title, course description and sample image. I want users to be able to add their own courses to the collection.

In the collection, the sample image is of the image type (not text), but consists only of external urls (to keep the database small). That’s where my problem starts. I want users to add an external url of the image, and not upload their own image to the database.

With the manual “connect to…” button in wix I can’t connect a text box to the image field type in a database, so I need to code. Until now; I have this:

export function loadFormCreatorButton_click ( event ) {
let image = {
“_id” : “image” ,
“image” : $w ( ‘#inputImage’ ). value
}
wixData . insert ( “Courses1” , image )
}

This loadFormCreatorButton is connected to also Submit the Title and CourseDescription texts on the same page. Unfortunately, a click adds 2 new entries to Courses1, while it should be one (I want to submit title, course description and image with 1 click of the button).

Is it possible to do both inserts at the same time? Else I would have to insert it all with javascript, but that makes the code more complicated. Thanks!

Hello,

If you connect a button to a write only dataset using the editor (without code) and then add a event handler with a data insert for the same button that triggers the submit, it will create 2 entries in your collection.

It is technically possible to get the object that is submitted via the dataset created by the editor using onAfterSave() with the itemAfterSave parameter.

I would not recommend this approach as this will require 2 data mutations (insert then update) rather than one insert.

I would recommend submitting the form using the approach you showed above, adding the other form values as well to the object that is inserted into the collection.

Hi Thomas, thanks for the reply. I fixed it like this:

wixData . insert ( “Courses1” ,{
“title” : $w ( ‘#inputTitle’ ). value ,
“aboutTheCourse” : $w ( ‘#textBoxAboutTheCourse’ ). value ,
“image” : $w ( ‘#inputImage’ ). value ,
})

Next thing now is that I need to manually code error messages and field validation also…

So, a suggestion: it would be very nice if wix would make it possible to connect Text Input elements to Image type collection references, as this would make it possible to do everything above without code. After all, it’s also possible to manually add a url instead of an image, so why not give the option to connect fields that could produce an url (Text Input or text fields) to Images.

Can you send the request to developers, or is it possible for me to do it somewhere?

I’m glad you were able to find a solution :grin:

This is also a great suggestion! I will pass it forward internally.