Make it possible for a user to edit an image

Ask the community
, ,
1

Question:
Hello dear Wix experts

I use Velo and Wix Editor on a site which lists about 500 jigsaw puzzles, entered by their owners. An owner is enabled to create his puzzle and to edit it.

https://novyel.wixsite.com/website-5/liste

I have created a collection of puzzles, each puzzle has one image to illustrate it.

The way the customer upload an image is not satisfying, because the customer has to click on a button to “look for” the image on his computer, then to click on another button to make the image appear in the page.

Then, the big issue is the following:
How can the customer edit the image, for instance rotate it, or better resize it?
The best should be to have 1000 pixel in the larger dimension (width or height) so that the image doesn’t take too much room and that it loads faster.
I can do it as admnistrator but I don’t want to operate every time a user creates a puzzle.

Product:
Wix Editor

What have you already tried:
I have searched through this forum

4

What else I should have tried?

5

Happy Birthday Isabelle!

Let me answer your queries:

That’s how any upload function would work, regardless of what software or device or browser you’re using.

The user will have to click on the upload button and click again on the image that they would like to upload. And then a third click to submit. This is important and very much recommended, as the user can accidentally upload a different image or a file and you would want them to preview what they’re about to upload before submitting it. (Though technically the file already gets uploaded to the server but that’s not a concern here)

For this, you can achieve it using a custom embed which will act as a full fledged image editor where users can edit and manipulate the image as per their liking and the image editor would return the edited image as a blob which can be passed inside the buffer while uploading to the Media Manager…

So this is kinda complex, if you know your way around JS and Velo pretty well then you can consider giving it a shot.

6

This is too complex for me, nobody has done this before? I know a bit JS and Velo, but not pretty well.

I think I am going to abandon Wix for another CMS

7

I agree with that, but why isn’t it possible to preview the image at the first click, when the customer has selected his own image on his PC?
Can I add an action in the $w("#uploadButton1.startUpload()") that would just make a preview appear ? It’s the way usually used in other software or device or browser as you say.

8

I literally have just been adding a Dashboard page were I allow a collaborator to edit some details that include images in repeaters.

This is linked to a file upload button

$item('#photoFilePicker').onChange(() => {
            handlePhotoUpload($item);
       });

Then the handler.

function handlePhotoUpload($item) {
    const photoFile = $item('#photoFilePicker').value;

    if (photoFile.length > 0) {
        console.log(`Uploading '${photoFile[0].name}'`);

        $item('#photoFilePicker').startUpload()
            .then((uploadedFile) => {
                console.log("Upload successful. File is available here:");
                console.log(uploadedFile.url);

                // Update the placeholder image with the uploaded file URL
                $item('#photo').src = uploadedFile.url;

                // Store the uploaded URL in the item for later update
                $item('#photoFilePicker').uploadedImageUrl = uploadedFile.url;
            })
            .catch((uploadError) => {
                console.log(`File upload error: ${uploadError.errorCode}`);
                console.log(uploadError.errorDescription);
            });
    } else {
        console.log("No file selected.");
    }
}

I also have a button that will complete the updates ,
It calls the usual wixData.update() if the user is happy.
And a cancel button that resets everything.
Which revert the displayed values to their original state without causing unnecessary UI changes and rendering .

9

Thank you very much for your response, now it’s helping, but I don’t know exactly how I can adapt it to my case: I am in an item page, but I don’t have a $item variable.

I give you my own code:

$w.onReady(function () {

    $w('#previewButton').onClick((event) => {

        if ($w("#uploadButton1").value.length > 0) {
            $w("#uploadButton1").startUpload()
                .then((uploadedFiles) => {
                    console.log("Uploaded-File-Data: ", uploadedFiles)
                    $w("#image3").src = uploadedFiles.url;
                    $w("#dynamicDataset").setFieldValues({ "image": uploadedFiles.url });
                    $w("#dynamicDataset").save();
                })
                .catch((err) => {
                    let errMsg = err;
                    console.log(errMsg)
                })
        } else {
            $w("#uploadButton1").label = "Choisissez une image à télécharger";
        }
    });

});

So my question was: is it possible to put the action of the previewButton in the uploadButton so that the customer can see the look of the chosen image faster ? There is one more Button which validate all new or edited information, so, at this step, the user can still cancel his actions.

Or, in another way, how can I use your handlePhotoUpload($item) in my code, although I don’t have a $item variable.

Thank you very much for your interest in that issue.

10

Sorry about that, I realize that $item is just a variable. No problem…

So it works, I am thanksful about that.

To go a bit further, this function handlePhotoUpload allows me to get the dimensions of the image, great !

Now I try to reduce the size using a percentage, I tell you later.

1 Like
11

No problem,
I was working so could not reply.
Glad it is working for you.