Let the user upload multiple images and display them with a gallery

Ask the community
,
1

I have two questions:
A. Can a user upload multiple images in a database and if yes how?
in my case i want the
user to be able to upload at least one or more images in the field “product images” by clicking the upload image button and selecting multiple images or/and by clicking the button and uploading one image at a time.

1040×653 16.6 KB

326×504 18.6 KB

B. I want the images the user uploaded to be displayed in a gallery. I know that you can connect images to galleries but the images displayed will be one image from each row, i want for one row to link all the images e.g.

852×535 46.3 KB

2

Hello

A) You can upload images and show on you gallery by getting the value uploaded, then inseerting it to your database, and lastly refreshing the gallery dataset. the following code is an example of how to do that:

export function submitButton_click(event, $w) {

 if ($w("#uploadButton").value.length > 0) {
 
   $w("#uploadButton").startUpload()
      .then( (uploadedFile) => {
          let toInsert = {
          "url": uploadedFile.url
    };
 
    wixData.insert("gallery", toInsert)
      .then( (results) => {
           let item = results; 
      }).then(()=>{
           $w("#gallerydataset").refresh();
      });
      })
      .catch( (uploadError) => {
        console.log(`File upload error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);
      } );
  }
}

B) you can do that using code by queering the collection, then pushing the image sources into an aray, and set the gallery items to that array. here’s a code example:

let galleryArr = []
wixData.query("myCollection")
   .eq('title', 'gfbhf')
   .find()
   .then((results) => {
 // get the item (row) and make an array
 const items = results.items[0];

 const objToArr = Object.values(items);

 objToArr.forEach((link, i) => {
     if (link === null) {
        return;
      } else if (link.toString().startsWith("image")) { // to only push images 
         galleryArr.push({ 'src': link });
       }
   });
   $w('#gallery1').items = galleryArr

  })
  .catch((error) => {
 let errorMsg = error.message;
 let code = error.code;
});

Here’s some useful links you can check:

  • Wix-data insert()
  • WixDataQuery (eq, find,…)
  • Gallery Items

Best!
Massa

3

Hi Messa thanks your code almost worked! Just I’m in a item dynamic page and i want in .eq(‘title’, ‘name’) , name to be equal to the current item I’m viewing. Any ideas???

4

@johnfrantz17 There’s more than one way to get the value you are viewing it depends of how do you display different names?

One example would be if you have the value shown on a text box or a certain element, you get the value as follows: let name = $w(‘#element’).value , then u query based on this name.
Best
Massa

5

If I have a Media Gallery Field in my Database

Can I allow the users to select and upload multiple images from the front-end?

Right now I can only select 1 image when clicking the Upload Button

6

Hello Shan

This feature is not available at the time. you can vote for it here .

Best
Massa

7

You Can Only Upload 1 image at a Time? Really? That kills my whole project If I cant use Galleries

8

I have created a blog website like this one but I need to upload multiple pictures and PDF, how can I do that?

9

Hello Massa I have applied your first code export function submitButton_click(event, $w) {… but each time I upload an image of the same item creates a new row in a database. The image is inserted in the media field but just one only. Something missing?
thank you

10

@massasalah18 Hello Massa I have applied your first code export function submitButton_click(event, $w) {… but each time I upload an image of the same item creates a new row in a database. The image is inserted in the media field but just one only. Something missing?thank you