How to make a Upload Button

Ask the community
, , ,
21

Did you find any solution?
I really want to add this option to my site

22

@experimentnoxx

I done it like this

// Right Side Photo Upload Button Function
 export function rightSidephotouploadbutton_change(event) {
    console.log("back photo upload text length =" + " " + $w("#rightSidephotouploadbutton").value.length + " " + "(photo selected)");
    $w("#rightSidephotouploadbutton").buttonLabel = "Uploading Please Wait...." //+ $w("#rightSidephotouploadbutton").value[0].name; "If you want to add something more to it"
    $w("#rightSidephotouploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
    .then( (uploadedFile) => {
    $w("#rightSidephotouploadbutton").style.backgroundColor = "#FA9869"
    $w("#rightSidephotoclient").show()
    .then( ( ) => {
    console.log("Right side client photo shown");
    });
    $w("#rightSidephotoexample").hide("fade",fadeOption)
    .then( ( ) => {
    console.log("Right side example photo faded");
    });
    $w("#rightSidephotoclient").fitMode = "fit"
    $w("#rightSidephotouploadbutton").buttonLabel = "Upload successful"; // "Button label once upload in complete"
    $w("#rightSidephotoclient").src = uploadedFile.url; // "Gets a Wix URL from .src file, doesnt appear to be a normal public URL"
 //$w("#myCheckinsdataset").setFieldValue("rightSideImageUrl", uploadedFile.url) // This way creates a image in collection but as a WIX URL but you see an image
 let src = $w("#rightSidephotoclient").src; 
 let rightSidephotopublicurlLink = "https://static.wixstatic.com/media/" + src.split("/")[3]; // Converts the WIX URL to a public URL
    $w("#myCheckinsdataset").setFieldValue("rightSideImageUrl", rightSidephotopublicurlLink) // This will upload the converted public URL to a URL field in collection.
    console.log(rightSidephotopublicurlLink); // Just a checker so we can see whats happening in the log.
    })
    .catch( (uploadError) => {
    $w("#rightSidephotouploadbutton").buttonLabel = "File upload error please try again";
    $w("#rightSideerrortext").show();
    $w('#rightSideerrortext').text = uploadError.errorDescription
    console.log("File upload error: " + uploadError.errorCode);
    console.log(uploadError.errorDescription);
  });
}
23

I hope an upload button this will be added to the wix product page soon as it’s completely stopped me from carrying on.

  1. Add/upload files at the product page
  2. Add to cart which shows the filename at the cart.
  3. Now I can retrieve the file at my orders page once paid for buy the customer

That’s all I need please.

25

Please try it again in your own new post and in english.

-Describe your issue in detail as most as possible.

  1. What do not work?
  2. What is your project-setup?
  3. Which elements are used in your project?
  4. What do you want to achieve?
  5. Some screenshots and examples very useful…
  6. continue…

Do not bump-up old post, they can have old code-material which is either depricated or completely outdated.

ALSO DO NOT FORGET TO READ- THE FORUM-RULES!