How to query the current logged in member so that an uploaded image will "land" in the right field cell?

Ask the community
, ,
1

I have tried for over a week to solve this problem and begin to feel desperate. The good part is that the image is uploaded and inserted to the collection and in the right field column but how fun is that when it is uploaded to the wrong member? (wrong row in the database). I have tried with different codes and this is my latest alternative. Please tell me what is wrong in this one and I would be very thankful if you can write a full working code:

import { currentMember } from ‘wix-members’ ;

export function uploadButton_change ( event ) {

currentMember . getMember ()
. then (( member ) => {
const id = member . _id ;
const fullName = ${ member . contactDetails . firstName };
return member ;
})
. catch (( error ) => {
console . error ( error );
});
$w ( “#uploadButton” ). collapse ();
$w ( “#text399” ). collapse ();
$w ( “#text400” ). show ();
$w ( “#dataset3” ). setFieldValue ( “picture” );
$w ( “#dataset3” ). save ();
}

2

I assume you are using a dataset and you also use the property-panel of your dataset and do some setups inside of it.

And additionaly you try to manage a part of functionality, by own created code.

In most cases, such a MIX goes nowhere and do not work, like in your case as you can see.

Everytime when you try to mix DATASET+SETUP inside of PROPERTY-PANEL (provided dataset-options), you should think about some very important code-lines like…

The good part is that the image is uploaded and inserted to the collection…
Yes this is exactly what will happen if you simply set it up inside of the property-panel → a normal saving-process.

But you do not want just to save something inside collection, YOU WANT TO SAVE MODIFIED DATA inside of your collection.

1) Before you can use a dataset → you first have to wait that it is ready to be used…

$w('#dataset').onReady(()=>{..your code here ..});
  1. onBeforeSave-HOOK:
$w('#dataset').onBeforeSave(()=>{
    //code running before SAVE-PROCESS...
});
  1. onAfterSave-HOOK:
$w('#dataset').onAfterSave(()=>{
    //code running after SAVE-PROCESS...
};

Using → onBeforeSave-HOOK, makes sure, that you are able to modify data → BEFORE ← the save-process starts.

The good part is that the image is uploaded and inserted to the collection and in the right field column…
Also not very clear how you determine the uploaded data, i assume you also just connected it somewhere inside of the property-panel of the dataset.

Where is the code, for the upload-process?

An example ho it normaly could/would work…

import{currentMember}from 'wix-members';

$w.onReady(()=>{
	$w('#dataset3').onReady(()=>{
		$w('#uploadButton').onChange(()=>{
				$w("#dataset3").save();
			});
		});	
	});	

	$w('#dataset3').onBeforeSave(()=>{
	   //start here your code-modification........
	   //...CODE to be done before starting save-process...
		
	   //WHAT DO YOU HAVE TO KNOW FIRST ?
	   // 1) ---> MEMBER-ID
	    let memberID = getMemberID(); console.log(memberID);
	
		//2) ---> UPLOAD-PROCESS? --> url of uploaded-file?
		//...let picURL = ????????????????;
		//..
		//.
		
		//What else is missing?
		//3) .....???.....
		
		$w("#dataset3").setFieldValue("picture", "picURL");		
	});

	$w('#dataset3').onAfterSave(()=>{
		//...CODE to be done after starting save-process...
	});
});

function getMemberID() {
	currentMember.getMember()
	.then((member)=>{
		constid=member._id;
		constfullName=`${member.contactDetails.firstName}`;
		return member; 
	}).catch((error)=>{console.error(error);});
}

Just an example of how it could look like.
Of course there are also other possibilities of how to solve it.

3

Thank you very much Ninja for your pedagogic explanations. I really suck when it comes to coding so it is like when I have to solve an (in my mind) advanced mathematic problem, I just get a headake ; ) Now I will try with your code and without a direct dataset-connection.

I got this redmarking for the signs after “onBeforeSave” so what do you think that can depend on?

Now this is my full code for the members account page and I have not combined it with direct dataset-connections but it doesn´t work. Now I see no picture at all and the picture field cell for the current member is empty so what is wrong?

import { currentMember } from ‘wix-members’ ;
import wixLocation from ‘wix-location’ ;
import wixUsers from ‘wix-users’ ;

setTimeout ( function () {
$w ( “#textBox14” ). show ();
}, 1000 );

$w . onReady ( () => {
$w ( “#dataset3” ). onReady ( () => {
$w ( “#dataset3” ). refresh ()
. then ( () => {
console . log ( “Done refreshing the dataset” );
} );
} );
} );
$w . onReady (()=>{
$w ( ‘#dataset3’ ). onReady (()=>{
$w ( ‘#uploadButton’ ). onChange (()=>{

  $w ( "#uploadButton" ). collapse (); 
  $w ( "#text399" ). collapse (); 
  $w ( "#text400" ). show (); 
  $w ( "#dataset3" ). setFieldValue ( "picture" ); 
  $w ( "#dataset3" ). save (); 
  }); 
});

});
$w ( ‘#dataset3’ ). onBeforeSave ( () => {

  let  memberID  =  getMemberID ();  console . log ( memberID ); 
  
$w ( "#dataset3" ). setFieldValue ( "picture" ,  "picURL" );

});

$w ( ‘#dataset3’ ). onAfterSave (()=>{
});

function getMemberID ( ) {
currentMember . getMember ()
. then (( member )=>{
const id = member . _id ;
const fullName =${ member . contactDetails . firstName };
return member ;
}). catch (( error )=>{ console . error ( error );});
}
$w . onReady (() => {
$w ( “#logout” ). onClick ( logoutAndRedirect );
});
function logoutAndRedirect ( event ) {
Promise . all ( [ wixLocation . to ( ‘/login’ ), wixUsers . logout () ] );
}

4

You did not completely understand.

The HOOKs are your possibility to work with connected dataset.
Reconnect it back.

Example:

Somewhere you will have an UPLOAD-BUTTON, which for sure also will be connected to your DATASET.

When you trigger this button, an event will start… → SAVE-EVENT.

$w('#dataset3').onReady(()=>{
	$w('#uploadButton').onChange(()=>{
		$w("#dataset3").save();});
	});
});

The save-event calls the → onBeforeSaveHook() first, before the data gets saved!
So now you called a side-step, where you have time to modify DATA.

But there is still one step or even two steps missing.

Before you start (trigger) the SAVE-process, you first have to get the data of the uploaded file (file-url / pic-url), to be able to set field-value (field-values) with the right data for the current logged-in user.

Or another possibility could be to set a filter onto your dataset, to filter for the current user, but not sure.

A further possibility is to use Wix-Data again, to find the right data for the right user, update the pic and save it back to database.

The most TROUBLEMAKER in every of such usecases, is if it comes to a MIX of working with DATASET and trying to implement your own codings, but still having the wish to use the PROPERTY-PANEL.

ONE MORE TIME…
If you are using a connected dataset, where you already have done some setup inside of the PROPERTY-PANEL (options of the dataset), then you will have to use → HOOKS <----

If you do want to go the CODING way, but still be able to use DATASET, then just remove all setup you have done inside of the DATASET-OPTIONS and also DISCONNECT your DATASET and make sure your DATASET is connected to corresponding DATABASE ONLY (NO USAGE OF PROPERTY_PANEL_OPTIONS).

In this case you will have to code all the steps on your own, but you will have a clear understanding of what you are exactly doing.

Or you completely forget about the DATASET (throw it out of the window) and make completely every step by code —> time-consuming-process!!!

5

Okay, then I misunderstood you. I thought you meant that I shall not combine the code with dataset-connections but now I understand that you mean that I shall not combine with settings inside the database property panel" :slightly_smiling_face: Sometimes I don´t fully understand the english explanations.

From one thing to another; I have tried to find a page that explains signs like }); but have not found anything about that.

6

  1. Please always try to reply to the right answer. Keep this forum clean and with a good overview.

  2. —> {}, [], (), ← this things are a part of the SYNTAX of JavaScript.
    Every language has it’s own Programming-SYNTAX.

For example in VBA-Script (a programming-language which is used in MICROSOFT-EXCEL) you have another programming-SYNTAX, but still similar to JS.

How to learn SYNTAX ?
I don’t think you will get here the right anwer. Everyone is learning to code different. My way was to study every little sign and letter of the JS-SYNTAX.

{}, [], (), &, <,>, ||, ; , and so on …
Time by time you will understand where to place a → (), or an additional → {}. Also you will soon understand in which situation to use → [], or what a → &, or —> || do.

Of course it will depend on you and your interest to become a good coder, how fast you will learn all these things.

The world-wide-web is your best friend in this case.

7

Okay then I misunderstood you because I thought that you mean that I shall never combine codes with connected datasets. Now I understand that you mean to not combine it with settings inside a dataset :slightly_smiling_face: But even with the dataset connected the picture still “lands” in the top row and not in the row for the current logged in member. This is so incredible hard for me to solve and don´t think that I am lazy or that I do not follow your advices because I have really tried over and over again for over a week now.

From one thing to another, I have tried to find explanations about the signs after codes, like } ): or (() => { because it is hard to understand why I often get red marked signs. Do you have any tip of a good site with such information?

And please tell me if you have a logical answer to why I get a redmarking for ( () => { in your own code here?