I hope I’m in the right place, and that I’m not asking a question that has already been addressed.
My issue is a follows -
I have an upload button, and a gallery on my page. The gallery is supposed to ‘instantly’ display the image that is uploaded, by the upload button. It works perfectly, BUT only after the SECOND upload attempt.
On a freshly loaded page, the upload button throws the error, “No File To Upload”…, but as soon as I try to upload again, it works fine (file gets uploaded, and gallery displays it).
Has anyone come across this issue, and can offer some assistance? Thanks in advance!
My page code is below :
export function postImgUpldBtn_change( event )
{
if ( $w( “#postImgUpldBtn” ).value.length > 0 )
{
$w( “#postImgUpldBtn” ).startUpload()
.then(
( upldImg ) =>
{
$w( “#postPreImgGlry” ).items =
[
{
“src”:upldImg.url,
“title”:“”,
“description”:“”
}
]
}
)
. catch (
( upldErr ) =>
{
console.log( upldErr.errorDescription );
}
)
}
else
{
$w( “#postPreImgGlry” ).items =
[
{
“src”:“https://static.wixstatic.com/media/015f57_9b4dd5ab0d1a476fa1929c7acde7430b~mv2.png/v1/fill/w_139,h_242,al_c,q_90/015f57_9b4dd5ab0d1a476fa1929c7acde7430b~mv2.webp”,
“title”:“”,
“descripton”:“”
}
];
}
}
Hi @bsjl3891 !
You’re on the right track!
Your code should look more like that:
export function uploadButton1_change(event, $w) {
if(event.target.value.length > 0){
$w("#uploadButton1").startUpload()
.then( (uploadedFile) => {
$w('#image1').src = uploadedFile.url;
} )
.catch( (uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
} );
}
}
Let me know if it worked for you.
Note: Remember to adjust the field name and elements name to the ones you use in your own site.
Doron.
Thank you for your response.
I changed my code to match your response (with the exception of the field names of course), but the upload button still only starts working after my second upload attempt.
On the first upload attempt, it still throws the “No File To Upload” error.
Any further thoughts?
@bsjl3891 Please share a link to your site / editor so one of us, the Wix Code team, can inspect it and provide you with a solution.
Doron.
@bsjl3891 Please refrain from posting your private info in the forum as there’s no need for it.
Moderators and authorized personnel can inspect your site without the need of your user name and password.
I have deleted your previous comment.
Please share only the said link.
Doron.
@bsjl3891 After looking into your code & site I believe this behavior is due to one of the two followings (or both of them):
- The insertion of the uploaded image to the .src of the component is inside an array of objects.
I assume that you’ve used and followed the documentation for ‘Gallery’ in order to write your
code but as the upload button is designed to upload a single file at a time - it is just not relevant
(unless you’re trying to achieve something specific and then we’ll need to discuss the use case
and come up with a different way to do that).
- The element that presents the image is a ‘Gallery’. Try to change it to a regular Image
component and see if it works.
If you’ll follow the instruction above and use the code I provided before, I believe that you’ll get the results that you’re looking for.
Hope it helps,
Let me know if it worked for you.
Doron.
@doron-alkalay Thanks again for your response.
As it regards your #2 point - I actually started out with a regular Image component,
and the behaviour was the same (upload button only work on second try, then image got updated).
…and as for your #1 point - I did use the docs for Gallery.
I think the problem is with the upload button, because as soon as the upload button gets a file, the Gallery (and previously, the Image) gets updated.
It’s just that the upload button only gets the subsequent files I request, but not the first.
Oddly enough, if I request the same file, twice, the second request works.
It’s almost as if it’s a “bug” with my code/computer/browser - I don’t know.
Did you try the upload process? Did it only work after your second attempt (without refreshing)?
@bsjl3891 Both in live view and preview I managed to upload an image (and make it show) only after several attempts (more than two anyway).
Again, I believe that the issues are due to wrong code use.
The code and methods I’ve described above are all been tested and proven as working so I really urge you to try them out. You can check it yourself right here .
Doron.
@doron-alkalay Thanks again, for your time and patience.
I’ll take your advice and focus on reviewing the code, as well as using your methods.
FYI :
So I disabled/unchecked the Required property of the Upload Button - it now works like a charm, both with your code, and mine.
What do you make of that?
I actually got a hint to try that, some weeks ago when I was doing some research, but I was hesitant to try it (because that field actually needs to be required on my site, and I didn’t want to programmatically check if it has been filled in).
@bsjl3891 Awesome you’ve succeeded!
You say that all you do is uncheck the required field?
I’ll look into that - maybe its an issue on our side so its good you brought it up!
Doron.
