Member upload into image database

Ask the community
,
1

Hi there, I am working on a member’s profile update page that allows them to update their details and also upload images that are then used in a gallery on their public profile page. I can’t seem to get the images to upload in my image database from a user input option.

I have 2 databases - 1 image database and 1 for the profile information. This is because I wanted to have a gallery of images per member and this was the suggested way to do this.

Hopefully someone can help me out here!

Cheers,

Anna

2

Hey Anna,

It sounds like it should be possible to implement.
How did you try to implement it?
Can you please share a link to the discussed page so i can check out your configuration?

Thanks,
Itai

3

Hi Itai, thanks for your help! what link do I share? https://editor.wix.com/html/editor/web/renderer/edit/0bbd5052-3028-44d9-ab76-1af0da0937f7?metaSiteId=9976a7ed-29ba-4e43-b706-f25f74dbeced&editorSessionId=b7ebe8a8-b350-4477-b678-ee71571952e3&referralInfo=my-account Not sure if you can access this page?

4

Hey, is your site published yet? If so, you can send a link to the relevant page in your published site

5

Yes sorry for the delay! https://www.babyandchildshowdunedin.com/Exhibitors/Update/2fc6c078-fbca-455b-b3cd-330ab85d6d1c

6

Hey,

First of all, you have to connect the image upload button and the save button to the ExhibitorImages dataset:

  1. Change the ExhibitorImages dataset’s mode to Read & Write
  2. Connect the upload button to the correct image field of that dataset
  3. Connect the save image’s button “link” property to the “Submit” action
    Now your users should be able to upload images to the ExhibitorImages collection.
  • Please note that images have to be uploaded one by one.
    Lastly, you have to make sure that the uploaded images are linked to the current user.
    Something like this should work:
$w.onReady(() => {
    $w("#dataset1").onBeforeSave(() => {
        const currentUser = $w("#dynamicDataset").getCurrentItem();
        $w("#dataset1").setFieldValue('reference', currentUser);
    });
});

Good Luck,
Itai

7

Hi Itai,

Thank you so much for your help. I have followed your instructions but still having troubles with the images.

It looks like it replaces the image in the gallery but it is not showing up in the image database. Is there something else I need to do?

Cheers,

Anna

8

Oh, my bad, actually since we set the dataset to Read & Write mode, we’re always editing the first image instead of adding new ones…

I think the easiest solution to that is adding another dataset, so that the current dataset will be in Read Only mode and will only be connected to the gallery, and a new dataset with Write Only mode will be responsible for adding new images. Since it’s Write Only, it will only add new images and not edit existing ones…

Also, whenever a new image is added using the second dataset, we would like to refresh the first dataset so the new image will show… something like that:

$w("#dataset2").onAfterSave(() => {
    $w("#dataset1").refresh();
});
9

OK thanks, I have updated the current dataset to be Read Only and created a new dataset to Write only. Now the image has loaded into the new database which is great. Now how do I do the next part which is to get the new image into the gallery once they have uploaded it? With the code you have given me do I need to change any of it to reflect the dataset names?

Cheers,

Anna

10

Hi Itai,

I have created a form with text inputs and an image upload button.
I wanted to use Wix Code to insert both text and image file into the database.
How should I go about doing it?

let toInsert = {
 "item1"   : text1,
 "item2"   : text2,
 "item3"   : image1
};
...
wixData.insert("MyCollection", toInsert)

Thank you!

Ben

11

Adding to my previous post.

I have tried to upload the image after the text input data has been uploaded. But the images get updated in the previous database entry and not the new one that was inserted.

...
wixData.insert("MyCollection", toInsert)
 .then((results) => {
      $w("#uploadButton1").startUpload()
        .then((uploadedFile) => {
             $w("#dataset1").setFieldValue("item3", uploadedFile.url);
             $w("#dataset1").save();

Thank you!

Ben

12

Anna, just make sure to add the code somewhere inside your onReady function.
Regarding dataset names, the purpose of the code is to make sure that whenever a user uploads and saves a new image ( onAfterSave ), the dataset that is connected to the gallery should refresh in order to display the newly added image. So match the names accordingly.

Ben, if you use a dataset and connect it to the upload button, you don’t have to worry about any of that, all is taken care of for you. You can just connect the upload button, all the text inputs and a submit button to the dataset.
If you’re sure you want to do it manually, check out this article Velo Tutorial: Using the Upload Button with Code | Help Center | Wix.com

13

Thanks Itai.

The reason why I want to use Wix Code is because I have a few auto-fill inputs. I have tried to link these auto-fill inputs to the database, but they appear as blanks.

I have already read this article https://support.wix.com/en/article/how-to-use-the-upload-button-with-code and have not had any success. I have tried to do is to insert the text inputs first, then upload the image to the same item.

wixData.insert("MyCollection", toInsert)
.then(() => {
$w("#uploadButton1").startUpload()
 .then((uploadedFile) => {
 let CurrentItem = $w("#dataset1").getCurrentItem();
 CurrentItem.setFieldValue("item3", uploadedFile.url);
 $w("#dataset1").save();
 ...

But the images get updated in the previous database entry and not the new one that was inserted.

Would you be able to advise?

Thank you.

Ben

14

Hi Itai. Sorry I am still having trouble getting it to refresh. Are you able to get I have got it correct? See link: https://www.babyandchildshowdunedin.com/Exhibitors/Update/5144d982-795e-4c3e-aa1a-579916f134fb

Many many thanks!

Anna

15

Looking at the live database, it looks like the reference isn’t working.

885×422 24.5 KB

16

Also I can’t see the images refreshing into the 1st Database. Sorry for all the messages!

17

Ben, Did you get solutions for your problem? I also get same issue, I tried ‘Insert’ and ‘save’.

18

Hi ungalganeshtech,

I found a simple workaround!

You can link auto-fill inputs (e.g. name) from your Members database and add other user input fields. Then use setFieldValue function to submit auto-fill inputs to your database.

This website has an example on how to create an auto-fill form, https://www.vorbly.com/Vorbly-Code/WIX-CODE-AUTO-FILL-FORM-WITH-USER-INPUTS .

Good luck!
Ben