Simple solution for upload/progress of image

Ask the community
,
1

I understand that a progress bar is not featured yet, even though it has been requested so many times :frowning:
I have an upload button and an image linked to it. When I test it, even though it successfully uploads, it does not show me anything to tell me it was a success. I understand this, but my visitors will never understand this and will think something is wrong.

However, I would like to find an easy solution to this.
Even if it is a simple code that reveals and hides a message when a member on my website uploads his/her profile picture for example.

Here is what I have on one my pages:

#uploadButton1 connected to #image2 and both are connected to #dynamicDataset (Profile Item)
#uploadButton2 connected to #image3 and both are connected to #dynamicDataset (Profile Item)
#button1 is my submit button

Thank you in advance to anyone who can help me out with this ! I read about the uploadButtons on the website, but it just confused me more and more since I have little to no experience with coding whatsoever, so please don’t give me a link to read about codes :frowning:
I am sure someone can just easily code this for me!

1 Like
2

Hi,
Some code is required in order to show a loading message or a preloader.
Unfortunately we are not able to code your Wix site on your behalf,
You can hire an expert in Wix Arena or you can learn how to code :slight_smile:
Roi

3

Oh well I did not expect that answer ! Even if no one would code it on my behalf (which is reasonable), I would at least expect you, a staff member I presume, to point me in the right direction instead of giving me a general answer like “learn to code or pay someone”.

Anyways, I will figure it out on my own, and I promise to whoever is reading this that I will absolutely share my final solution with everyone. Afterall, we are all here for the same reason!

“Thanks” Roi

4

Hi,
I would love to point you the right direction but you asked specifically not to give you any links or documentation of code.
Now that I know your expectations I will try to help up with code.
Add an element that indicates that an upload is happening and choose in the properties panel “hidden onload”. call the element “loadingElement”.
Here is a sample code of how to upload an image:

import wixData from 'wix-data';
export function button1_click(event, $w) {
	if ($w("#uploadButton1").value.length > 0) { // user chose a file
		console.log(`Uploading '${$w("#uploadButton1").value[0].name}'`);
		$w('#loadingElement').show()
		$w("#uploadButton1").startUpload()
			.then((uploadedFile) => {
				console.log("Upload successful. File is available here:");
				console.log(uploadedFile.url);
				wixData // need to use save/update method.
			})
			.then(() => {
				console.log('done Save/Update')
				$w('#loadingElement').hide()
			})
			.catch((uploadError) => {
				console.log(`File upload error: ${uploadError.errorCode}`);
				console.log(uploadError.errorDescription);
			});
	} else { // user clicked button but didn't chose a file
		console.log("Please choose a file to upload.")
	}
}

For more information:

Good Luck!
Roi

1 Like
5

Hi Roi,

I have a few problems with your code. First what kind of button are you using? because when I use a regular button I can find inside of his properties onclick event where I paste the code but I get a few error

I will appreciate if you can help me, clean up this errors