New found respect for Wappler Team

[psweb]

I have just spent the entire day trying to implement croppie functionality into my website, and failed dismally, so now I am creating my own using pretty much only the wappler provided tools.

It’s ugly, but it actually works, and the only part i needed to use custom scripting was to get the width and height of the image stored in the dataUrl so I could check for image orientation before cropping, so honestly a few lines of custom code, and all the rest just worked out the box.

Thank You Wappler.

P.S.: Could you at some point implement croppie functionality into the UI, because my version of this, although working is real rubbish.

[TomD]

Presumably it wasn’t possible to achieve a visual method of cropping, as possible with croppie (not that I’ve ever used it) - but it would be interesting to hear more details if this was somehow possible. I agree - it would be good to have croppie integrated into Wappler.

Also, Wappler can return the image height and width. I expect you know this, so there was probably some particular reason why you had to use a different approach (but I thought I would mention it, in case you missed this).

[psweb]

Hey @TomD, yes under normal circumstances where i have already uploaded the image I seem to be able to get the width and height parameters of the image, however I could not seem to do this when I wanted to crop the image before uploading it using this method.

Show Image Preview Before Upload

When uploading images you can display a small preview thumbnail of the selected image. You can use this in two cases: 1. For single image upload You already know how to UPLOAD SINGLE IMAGE TO YOUR SERVER so we will just extend your existing form/layout. Select your upload field form group, and click Insert After: [Screenshot_4] Add a row: [Screenshot_5] Click insert inside: [Screenshot_6] And add a column: [Screenshot_7] That’s where our image will be placed. Click insert inside: [Sc…

These were the bindings I had available

What I needed to do to access the width and height properties was

<script>
    var _URL = window.URL || window.webkitURL;

    $("#inp_upload_symbol").change(function(e) {
        var file, img;
                        
        var inputOrientation = document.getElementById('inp_image_orientation'); //The ID of my File Input

        if ((file = this.files[0])) {
            img = new Image();
            img.onload = function() {
                if (this.width > this.height) {inputOrientation.value = 'wide';} else {inputOrientation.value = 'tall';}
            };
            img.src = _URL.createObjectURL(file);
        }
    });
</script>

[TomD]

I’m not sure if this will help or is relevant, but here’s an example where I get the dimensions of images in a folder to store in a database:

… and can select them to insert:

[psweb]

Yeah, thats my normal way of doing it too, and works great, however when you have not physically uploaded the image to any folder as yet, it does not work.

For me I am literally clicking on the Choose File button, which is then giving a preview of the image before pressing upload.
I am then performing the cropping and resize on that image which i think is stored in the browser cache as base 64 encoded, which means I have to turn the Base64 back into an image first to get the width and height, and then do my cropping, and then upload it to my folder on the server.

[TomD]

I see what you mean. Sounds tricky - I’m glad you’ve got it working.

[psweb]

yeah, well kind of, im not sure if I should maybe go the normal route first to be honest, and upload it, then do my cropping.
it seems pretty unstable like this to be honest, i am having to browser refresh every 2 or 3 images because it is doing strange things, like a show fires 3 times and then the 4th time just doesn’t, so if its not stable I may need to rethink it sadly.