Hi guys, already a week now trying to solve this, please help me!
I'm just trying to have the users update their profile pics with images they already uploaded.
I have a repeater containing the current profile pic and I have another repeater with the pics the user has uploaded. Both repeaters are connected to the same collection with 2 different datasets, one for each repeater. I would like the user to be able to select an image from their uploaded images to update the profile pic.
Here's the code I'm trying, I got the code from an older post:
export function container2_click(event) { $w("#repeater6").onItemReady(($item, itemData, index) => { let clickedItemData = $item("#dataset4").getCurrentItem(); $w("#image9").src = itemData.img; }); }
container2 is holding the uploaded images inside #repeater6, this repeater and its elements are connected to #dataset4.
#image9 is the current pic
Here's the #error I'm getting:
-----Wix code SDK Warning: The src parameter of "image9" that is passed to the src method cannot be set to null or undefined-----
I saw this same error in an older post and it was solved but I couldn't fix it anyway. I hope you guys can help me.
Thanks a lot in advance guys!
Thank you very much for all the help!
So, the code uploads the image to the gallery field only.
Remember we're trying to have the user update the profile pic either by uploading a new image or select an already uploaded image. You told me to add 2 fields to the collection: one field type media gallery: this one to show the uploaded images; a 2nd field image type to show the current profile pic. The profile's update box holds the upload button and the uploaded images. In the uploaded images I don't want to show the current profile pic, that's why you told me that we'll filter the repeater to show all the images except for the current pic (image field).
Right now the code is just uploading the image to the gallery field, nothing else changes, the repeater is not showing the images uploaded, and the current pic (the image type field) is not affected.
This is what I have:
#dataset5 connects to the collection holding the gallery and the image type fields.
#newAllProfile is the media gallery type field.
#newSelectedImg is the image type field.
#repeater6 holds the uploaded images.
#image9 is the current pic.
#profileSave is the submit button.
#newProfileCollection is the name of the collection.
let item; $w.onReady(() => { $w("#dataset5").onReady((event) => { item = $w("#dataset5").getCurrentItem(); //if it's a dynamic page let newAllProfile = item.newAllProfile; newAllProfile = newAllProfile.map((e, index) => { return { "_id": index.toString(), "image": e.src } }); let currentImage = item.newSelectedImg; newAllProfile.filter(e => e.image !== currentImage.src); $w("#repeater6").data = newAllProfile; }) $w("#repeater6").onItemReady(($i, iData, inx) => { $i("#image9").src = iData.image; }) $w("#uploadButton2").onChange(e => { if ($w("#uploadButton2").value.length > 0) { $w("#statusText").text = 'Uploading' $w("#uploadButton2").startUpload() .then((uploadedFile) => { $w("#statusText").text = "Upload successful" $w('#profileSave').show(); $w('#saveDisabled').hide(); let url = uploadedFile.url; item.newAllProfile ? item.newAllProfile.push({ "type": "image", "src": url }) : item.newAllProfile = [{ "type": "image", "src": url }]; let newSelectedImg = uploadedFile.url; }) .catch((uploadError) => { let errCode = uploadError.errorCode; let errDesc = uploadError.errorDescription; }); } }) $w("#profileSave").onClick(event => { wixData.update("newProfileCollection", item) .then(r => { $w("#dataset5").refresh(); $w('#profileBox').hide(); }) .catch(err => { console.log(err); $w("#statusText").text = 'File upload error'(); }) }) })
Here's a SS of the profile's update box. As I told some days ago, I want to limit the images the user uploads to just 4, that'll be the current one and 3 more.
I hope this gives you a better picture so you can help move on. You've helped a lot! I appreciate it!
Ok, I changed it to the gallery field
item.newAllProfile ? item.newAllProfile.push({ "type": "image", "src": url }) : item.newAllProfile = [{ "type": "image", "src": url }];
#newAllProfile is the gallery field. It is working now, no errors and I can see the images in one cell.
But on the image type field nothing is happening, #newSelectedImg is suppose to have the current image.
The error is: cell value type is JS object
#newAllProfile is the gallery field
Remember you told to have 2 fields: one gallery type; another image type. The #newSelectedImg is the image field type, not the gallery.
Now it is uploading the image to the field type image only, nothing is happening on the gallery type field.
Also, when you go into the collection, it says that the uploaded image has the wrong format.
See pics:
What do you think it is?
Is the upload button uploading the image to the collection?
It seems we're updating the data but there's nothing to update.
I made that change. Also, there was a connection via the editor that I removed.
Now the submit button is at least closing the box that holds it when I click it, but still is not submitting any data to the collection. It seems like there is no connection between what its uploaded in the upload button and the submit button. Like I told you, I added one image in each field of the collection manually inside the collection.
Here's what I have:
let item; $w.onReady(() => { $w("#dataset5").onReady(() => { item = $w("#dataset5").getCurrentItem(); //if it's a dynamic page let newAllProfile = item.newAllProfile; newAllProfile = newAllProfile.map((e, index) => { return { "_id": index.toString(), "image": e.src } }); let currentImage = item.newSelectedImg; newAllProfile.filter(e => e.image !== currentImage.src); $w("#repeater6").data = newAllProfile; }) $w("#repeater6").onItemReady(($i, iData, inx) => { $i("#image9").src = item.newSelectedImg; }) $w("#uploadButton2").onChange(e => { if ($w("#uploadButton2").value.length > 0) { $w("#statusText").text = 'Uploading' $w("#uploadButton2").startUpload() .then((uploadedFile) => { $w("#statusText").text = "Upload successful" $w('#profileSave').show(); $w('#saveDisabled').hide(); let url = uploadedFile.url; item.newSelectedImg.push({"src": url}); }) .catch((uploadError) => { let errCode = uploadError.errorCode; let errDesc = uploadError.errorDescription; }); } }) $w("#profileSave").onClick(event => { wixData.update("newProfileCollection", item) .then(r => { $w("#dataset5").refresh(); $w('#profileBox').hide(); }) .catch(err => { console.log(err); $w("#statusText").text = 'File upload error'(); }) }) })
Ok so I'm not getting any errors anymore. I added the images to both fields manually inside the collection. And also changed this line
$i("#image9").src = iData.newSelectedImg;
for
$i("#image9").src = item.newSelectedImg;
Not sure if the above is correct but I'm not getting the errors when I preview.
But my #profileSave button is not working when I try to upload and save the change. In the editor's preview it shows it is working and show no errors but when I try it on the website it does nothing, it uploads the photo but the save button does not submit the change.
I have this now:
let item; $w.onReady(() => { $w("#dataset5").onReady(() => { item = $w("#dataset5").getCurrentItem(); //if it's a dynamic page let newAllProfile = item.newAllProfile; newAllProfile = newAllProfile.map((e, index) => { return { "_id": index.toString(), "image": e.src } }); let currentImage = item.newSelectedImg; newAllProfile.filter(e => e.image !== currentImage.src); $w("#repeater6").data = newAllProfile; }) $w("#repeater6").onItemReady(($i, iData, inx) => { $i("#image9").src = item.newSelectedImg; }) $w("#uploadButton2").onChange(e => { if ($w("#uploadButton2").value.length > 0) { $w("#statusText").text = 'Uploading' $w("#uploadButton2").startUpload() .then((uploadedFile) => { $w("#statusText").text = "Upload successful" $w('#profileSave').show(); $w('#saveDisabled').hide(); let url = uploadedFile.url; item.newSelectedImg.push(url); }) .catch((uploadError) => { let errCode = uploadError.errorCode; let errDesc = uploadError.errorDescription; }); } }) $w("#profileSave").onClick(event => { //run your validation here wixData.update("newProfileCollection", item) .then(r => { $w("#dataset5").refresh(); $w('#profileBox').hide(); }) .catch(err => { console.log(err); $w("#statusText").text = 'File upload error'(); }) }) })
And I see this in the collection, the gallery field has a red line, see SS:
Btw, sorry for the late response, didn't expect the quick response. Thanks a lot.
I added images to both fields and the error is gone, now I get this:
Wix code SDK Warning: The src parameter of "image9" that is passed to the src method cannot be set to null or undefined.
That is this line:
$i("#image9").src = iData.newSelectedImg;
To try reduce any confusion, I created a new collection #newProfileCollection. 2 fields in this collection: #newAllProfile (image gallery type), and #newSelectedImg (image type). This collection is empty right now. I added a new dataset #dataset5. Nothing is connected via the editor and remember all this is done on a Member page.
This is what I did:
let item; $w.onReady(() => { $w("#dataset5").onReady(() => { item = $w("#dataset5").getCurrentItem(); //if it's a dynamic page let newAllProfile = item.newAllProfile; newAllProfile = newAllProfile.map((e, index) => { return { "_id": index.toString(), "image": e.src } }); let currentImage = item.newSelectedImg; newAllProfile.filter(e => e.image !== currentImage.src); $w("#repeater6").data = newAllProfile; }) $w("#repeater6").onItemReady(($i, iData, inx) => { $i("#image9").src = iData.newSelectedImg; }) $w("#uploadButton2").onChange(e => { if ($w("#uploadButton2").value.length > 0) { $w("#statusText").text = 'Uploading' $w("#uploadButton2").startUpload() .then((uploadedFile) => { $w("#statusText").text = "Upload successful" $w('#profileSave').show(); $w('#saveDisabled').hide(); let url = uploadedFile.url; item.newAllProfile.push(url); }) .catch((uploadError) => { let errCode = uploadError.errorCode; let errDesc = uploadError.errorDescription; }); } }) $w("#profileSave").onClick(event => { //run your validation here wixData.update("newProfileCollection", item.newAllProfile) .then(r => { $w("#dataset5").refresh(); $w('#profileBox').hide(); }) .catch(err => { console.log(err); $w("#statusText").text = 'File upload error'(); }) }) })
Now I'm getting this error:
An error occurred in one of datasetReady callbacks TypeError: Cannot read property 'newAllProfile' of null
The #profileSave button is doing nothing. The upload button uploads the image but I can't submit it.
Some SS:
I did change allImages to #userImages (the gallery field) in the code but put it back because it didn't work, I'll do it again adding the parenthesis this time.
And you're right it is a bit complex for me right now but this way is more organized, I'll learn from the code.
I'll make the changes and let you know. Thanks!
Ok I didn't want to bother you until I try many times but i'm a little lost. I put the code, changed what I thought needed to be but I'm getting this error:
An error occurred in one of datasetReady callbacks TypeError: Cannot read property 'map' of undefined
This is what I have:
let item; $w.onReady(() => { $w("#dataset4").onReady(() => { item = $w("#dataset4").getCurrentItem; //if it's a dynamic page let allImages = item.userImages; allImages = allImages.map((e, index) => { return { "_id": index.toString(), "image": e.src } }); let currentImage = item.selectedImg; allImages.filter(e => e.image !== currentImage.src); $w("#repeater6").data = allImages; }) $w("#repeater6").onItemReady(($i, iData, inx) => { $i("#image9").src = iData.selectedImg; }) $w("#uploadButton2").onChange(e => { if ($w("#uploadButton2").value.length > 0) { $w("#statusText").text = 'Uploading' $w("#uploadButton2").startUpload() .then((uploadedFile) => { $w("#statusText").text = "Upload successful" $w('#profileSave').show(); $w('#saveDisabled').hide(); let url = uploadedFile.url; item.userImages.push(url); }) .catch((uploadError) => { let errCode = uploadError.errorCode; let errDesc = uploadError.errorDescription; }); } }) $w("#profileSave").onClick(event => { //run your validation here wixData.update("ProfilePics", item) .then(r => { $w("#dataset4").refresh(); $w('#profileBox').hide(); }) .catch(err => { console.log(err); $w("#statusText").text = 'File upload error'(); }) }) })
Ok. I'll try it and let you know. Thanks a lot!
Ok so, I think I'm missing some things. So, I've added the new fields to the collection, now I have to connect the upload button to this new field, right? The image gallery type is not supported. Is this part with code also?
In the code you added the comment "if it's a dynamic page" I'm doing this in a member page, is that ok?
Actually, I'm trying to connect the elements, the repeater is connected.
Ok so when I'm going to connect the repeater to the dataset, the media gallery is not supported.