My question is how can I create an upload button which uploads image to a folder in mysite.

Ask the community
,
1

I want to create an upload button which lets the visitor upload an image to a folder in the ‘site files’.
I referred to this https://support.wix.com/en/article/corvid-tutorial-using-the-upload-button-with-code but the code is not working. Even if I publish the code and try uploading the image, it is not getting uploaded anywhere, and it also shows that the else statement is not necessary

Even the text on ‘text11’ is not getting updated

2

Hey there,

I’m assuming by “site files” you are referring to the media manager. If this is the case, in addition to your button1_click function you’d need include the logic on where to send the uploaded files.

I’d suggest using the upload() function with the wix-media-backend API to upload your files to the media manager.

If you’re still having trouble please elaborate on what you’re trying to achieve and if possible, provide a link to your site and add your full code snippet, so we can take another look.

Best regards,
Miguel

3

Hey Miguel,
Thanks for replying, brother I tried doing as you said but its still not working, I want a button that gets the image from the visitors to the media manager just that’s it.
This is my code snippet.


export function button5_click(event) {
 //Add your code for this event here: 
 if($w("#uploadButton1").value.length > 0) {
    $w("#text48").text = "Uploading " + $w("#uploadButton1").value[0].name};
    $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
        $w("#text48").text = "Upload successful";
        $w("#image20").src = uploadedFile.url;
      })
  .catch( (uploadError) => {
        $w("#text48").text = "File upload error";
        console.log("File upload error: " + uploadError.errorCode);
        console.log(uploadError.errorDescription);
      });
 
 else {
    $w("#text48").text = "Please choose a file to upload.";
  } 
}
}
import { mediaManager } from 'wix-media-backend';

export function uploadImage(buffer) {
 return mediaManager.upload(
 "/TO EDIT",
    buffer,
 "myFileName.jpg",
    {
 "mediaOptions": {
 "mimeType": "image/jpeg",
 "mediaType": "image"
      },
 "metadataOptions": {
 "isPrivate": false,
 "isVisitorUpload": false,
 "context": {
 "someKey1": "someValue1",
 "someKey2": "someValue2"
        }
      }
    }
  );
}

And this is the link to the page https://bluezonegaurav.wixsite.com/mysite-1/store

Once agian Thanks for the help Miguel.
4

The tutorial itself has a simple error in the code on line 3 of the upload code shown here.
https://support.wix.com/en/article/corvid-tutorial-using-the-upload-button-with-code#wire-upload-code

Simply take off the extra closing curly bracket after name on line 3 and the code all works fine, shown here in bold red - }

$w("#text1").text = "Uploading " + $w("#uploadButton1").value[0].name};

This would be on line 11 of your page code.

So say this is used on a form page and if you want to use the tutorial as it is and have the user add the image to the upload button and then upload it via the start upload button and once it is uploaded the image should appear in the box as in the tutorial.

Then simply connect the upload button itself to the image field in your dataset and add a submit button that will save all the user inputs from that form page into the appropriate dataset.

If you don’t use this on a form for example and simply just have this only, then you can’t simply change the upload button into a submit button as then you will be doing two events on one button.

You would be doing a submit through the button itself and an event through your code as well, this can’t happen as it will only do one or the other.

It will probably save the image into your dataset and not show the image in the box on your page.

You can still add another button for the submit, however if you wanted to just use the upload button from the tutorial, you would need to do the saving for the image into your dataset in your code after the image itself has been uploaded through the existing code.
https://www.wix.com/corvid/reference/wix-data.html#save

This previous forum post could be of help too.

5

This error has already been noted to Wix and it is scheduled to be changed as soon as possible.

6

You might want to have a read of how the upload button actually works too.
https://support.wix.com/en/article/adding-and-setting-up-an-upload-button
https://www.wix.com/corvid/reference/$w.UploadButton.html
https://www.wix.com/corvid/reference/wix-media-backend.mediaManager.html#upload

7

Plus, note that the Wix Media Manager Backend API that Miguel linked for you, it needs to be used in the backend and not in your frontend on your page.

https://www.wix.com/corvid/new-reference/wix-media-backend#top

wix-media-backend
The wix-media-backend module contains functionality for working with media from backend code.

8

Brother, to be honest, it’s getting a bit tough for me to understand can you guys make a video on it, please…
GOS, please😣