Update image using URL via Form

Ask the community
,
1

Hi there!

I’m looking to allow my users to set profile pics using public URLs instead of uploading them to the media manager. However, it seems the only way I can update the image fields in a database is using the upload button. Is there a way I can take a URL from a URL Input field and assign that to the image field in the database.

2

Hi,
First, welcome to Wix Code :slight_smile:
It is possible to update the image field using User Input field element.

The general idea is using wixData.query to get the user’s row of data (type object) in the database. then to change the image’s URL in the image fieldkey (in the received object) and finally save it using wixData.save();
Example of changing URL in the user’s object:

thisUser.image = 'https://www.myPictures.com/myPic.png'; // assuming that "image" is the same field key in the database collection

Check out these examples and articles:

Good luck!
Roi

3

Hi Roi,

So I did some work before you responded and it’s the same base concept, but the image field continues to be the trouble maker.

I’ve used both update and save, and the results are the same. If I update a normal text field, it updates as expected. If I try to update the image as well, it updates the original text entries but not images, then creates a new entry with all updates (including images) and a new _owner name. So it seems to be recognizing that it’s an image url, but it’s choosing to make a new entry instead of updating the current one. Thoughts?

export function saveButton_click(event, $w) {
let toUpdate = {
“_owner”:wixUsers.currentUser.id,
“firstName”:$w(“#firstName”).value,
“lastName”:$w(“#lastName”).value,
“email”:$w(“#email”).value,
“introduction”:$w(“#addinfo”).value,
“certifications”:$w(“#certifications”).value,
“training”:$w(“#training”).value,
“experience”:$w(“#experience”).value,
“profilePic”:$w(“#profilePhotoInput”).value,
“coverPhoto”:$w(“#coverPhotoInput”).value,
};

wixData.save("Members",toUpdate) 
	.then( (results) => { 
		let item = results; 
	}) 
	.catch((err) => { 
		let errorMsg=err; 
	}); 

wixLocation.to(`/Members/${wixUsers.currentUser.id}`);

}

4

Hi,
In order to update an item properly in the database collection, your object toUpdate should contain _id field.
You should first get the item from the database collection using wixData.query. once you got it you can change any field you like and finally use update() method like you did (instead of save()).

This will be useful:

Good luck!
Roi