Upload to Gallery code

Ask the community
, ,
1

I am not very good with coding such as JavaScript, but I am learning. I would like to make a page where members can upload pictures to a gallery. I figured out how to get the upload to work, but I would like to have the gallery instantly display the pictures my members upload. I have a lot of artists that enjoy sharing their work and this would be great if it was automated. I think the easiest way is to have the gallery show all images in a selected folder, like the upload folder. Does anyone have an idea that could help me? Thank you!
~Regards,
Robby

2

Hi Robby ,

Regarding displaying the uploaded images, you can use - .refresh - for the dataset after uploading the image then the new picture will be displayed on the gallery. For more information about refreshing dataset CHECK THIS

For using upload button with code, please see THIS

Hope this helps!
Best,

Mustafa

3

Thank you very much for your response. As I asked, I did figure out the upload button but what I am looking for is a code for the gallery. How can I make the gallery show all images in a specific folder? Is this even possible? (I assume it is).

What I need to do is add a gallery to the page.
(up-loader works great thanks to the forum!)
I want the Gallery to display ALL images in a folder, specifically the upload folder.

Thank you for your help!!

Regards,
~Robby

767×468 96.9 KB

4

As i mentioned before, you should refresh the gallery dataset after uploading the file so that it’ll display all the images. So, first you have to create a dataset - galleryDS- which contains your images, then connect your gallery element with that dataset. Finally, as you figured out the upload button, just refresh the dataset right after uploading the file. Ex :

$w("#uploadButton").startUpload()
            .then((uploadedFile) => {
                wixData.insert("gallery", uploadedFile).then(() => {
                    $w("#galleryDS").refresh(); // this will refresh the gallery dataset ( you called it - upload folder - and shows all the images in that dataset.
            });

            })

Hope this helps!
Best,

Mustafa

5

I will try this. I wanted to use the database but i am unable to add a field to customize it. Not sure if I need to upgrade or not… I will let you know how it works!

6

875×252 106 KB

I added the insert and changed the name of the gallery to match, but the refresh does not work. This is code I added to the upload button.
When i go to preview, it will not upload the image at all… I am wondering if it has to do with the refresh?

1259×852 106 KB

7

OK, I am getting it. i added the new database and figured out how to properly set it up! I am still having the same problem with the refresh, is that the place it goes?

8

are you sure $w(“#gallery1”) is your dataset ? Refresh should be on the dataset not on the gallery element.

9

That’s it. It is working now! Thank you for your continued patience, i am still learning :slight_smile: If I have any other questions or needs, I’ll use the forum again!

Regards,
Robby

10

Just to update, I finally got it working perfectly. I had to create 2 different pages, one to upload and the other a dynamic page and I am very happy with the results. Thank you again!

11

Hello, I have the same doubt as you, can I see your code?