How to allow a user to upload a singe image to a gallery

Ask the community
,
1

Hi. There are many posts/discussions all over the place around it, but couldnt find a very clear one…
How I can enable users to upload (e.g. via an ‘upload’ button) an image, which once submitted (e.g. via a ‘submit’ button), will be added to into the ‘gallery media’ field within my DB collection, which then will be displayed in the page gallery (which is linked to the dataset)? I got it all working and displayed, except the upload/writing part to the DB. Is there a step by step guide to it somewhere? I’m sure it possible, but can’t find a clear way to configure it. Thanks
User–>upload button–>choose file–>submit button–>write uploaded images to ‘gallery media’ field within the DB collection–>display newly added image in images gallery linked to this DB

2

It is possible, but first you should describe your collection structure a little bit. Do you have one row per user? Is the row id identical to the user id (as appears in the Memebr/PrviateData collection)? Do you submit 1 image at a time or all the images together?

3

Hi J. D. Thanks for the reply.

“Do you have one row per user?” - No. Multiple users to upload into the same row.
“Is the row id identical to the user id (as appears in the Memebr/PrviateData collection)?” -No. I have configured the row to be displayed into a WIX Pro Gallery, with a filed set as 'media gallery within the DB collection, which should allow adding photos into that cell, which then dynamically displays in the page gallery. I got it all working, except the upload part by a user to the DB collection.
Do you submit 1 image at a time or all the images together? - I wish the submitting/upload will be made by a user rather than me. It can be either singles or multiple, in terms of functionality.

Thanks

4

@mrmagic basically, since you want to update an existing record, you should retrieve it first.

  1. Use wixData.get() to retrieve the record.
    import wixData from ‘wix-data’;
    $w.onReady(() => {
    wixData.get(“CollectionName”, “recordId”)
    .then(item=> {
    //here should be the upload button onClick() listener;
    }
    })
  2. Once a file has been uploaded, create an image item (inside the .then() part of the file uploading function) :
let imageItem = {
  "type": "image",
  "alt": "A beautiful view",
  "title": "A View",
  "src": uploadedFile.src
}
  1. Push the item into the gallery field:
item.myGalleryFieldKey.push(imageItem);
  1. Create an onClick() event handler for the submit button and inside:
wixData.update("CollectionName", imageItem)
.then(r => {
//display the upadated gallery on the page
})
5

Hi J.D, how to upload all together ?