Can go back the way it was, but it did seem very friendly to be able to go back and tweak each Crop without having to reload the image. And you can do it … in the same “page” as long as you don’t refresh.
Original Image is no longer saved on my “Save” action. I have not changed that logic other than to remove the “Upload Original image from Browser” option. This upload of the original image now seems to be dependant on this check box (have tested it, tick the box and the Original Image is saved).
Even with the option unticked, when I create a completely new thing, Croppie is still loading the last browsed image. Unless you refresh the Browser. So it looks like it is trying to be helpful and load images when it can. But that makes the UI pretty poor when previous images appear randomly. (This is not even a new thing for storeage - I am creating a new Question thing, then creating a new Answer Thing which is linked to Question and when Croppie loads on this brand new set of data … up comes the last Image Browsed.
Whilst I appreciate all the hard work you have put in, I think we need to come to a landing on how this should work going forward. Can’t keep testing it for much longer before I need to look for another solution. And anyone who comes after me to use the Plugin in anything more complex than an “image gallery” is going to hit the same issues. I don’t think it is my lack of understanding on how it is working, I just think it is trying to be too clever on this image load. Can we work on getting the load behaviour predictable ?
PM me if you want adding to the app so you can see what if going on.
Thanks, as always, for creating this. It is so useful, but we just need to get those final few kinks ironed out now.
Hi @NigelG, thanks for sharing the properties, it makes it easier to see what is happening.
Unfortunately there isn’t a way for the plugin element to group related properties together, or hide them if not needed, so I’ve tried to make it clear by the labelling. I’ve also tried sticking to the convention that Bubble has on its Picture Uploader, for private file etc.
Make this file private means the next two properties are used, attaching the cropped file to a database record.
Upload original image from browse activates the “original image” function. If turned on, it only uploads an image from Browse, not from Default image or Load image, because in both those cases you already have the original image.
Make original image private is only relevant if uploading the original image, so in your case this entire section is unused.
Source image you have set to Answer’s OrigImage, I see this as a problem if you no longer upload the originals. Possibly there are some prior saved original images which this setting will show.
This is interesting behaviour. When you create a new thing, do the repeating group cells move around in position? I need to test more with Croppie in a repeating group.
I’ve been putting in the field documentation but they don’t show anywhere, so here goes:
#Fields Viewport width
Width of viewport in pixels. Viewport is the crop area. Viewport height
Height of viewport in pixels. Viewport type
Square includes rectanglar, circle includes oval. Circle shape looks better with an output format of png to make the corners transparent. Show zoomer
Croppie’s zoom control slider. Set boundary
Boundary defines how much of the container to use for the image. Boundary width
Width of the boundary, in pixels or percentage of the container. Boundary height
Height of the boundary, in pixels or percentage of the container. Enable EXIF
Use EXIF of source image to determine initial orientation. Enable zoom
Allow user to zoom in and out. Enable mouse wheel zoom
Interpret mouse wheel movement as zoom control. Custom class
Apply a class to the croppie container, to pick up your own styles added in page html header. Output format
Auto attempts to match the stored format with the input format, jpeg or png. Make this file private
Check this box if you want to protect the file that is uploaded. Attach file to thing type
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists. Attach this file to
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists. [Original] Upload original image from browse
Upload the original image, as well as the cropped image. [Original] Maximum file size in bytes
Limit the size of the selected file. Useful if uploading the original selected file. Triggers “image too large” event if too large. [Original] Make original image private
Check this box if you want to protect the original image that is uploaded. [Original] Attach original image to thing type
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists. [Original] Attach original image to
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists. Source image
If set, loads this image by default. Instance timestamp (optional)
Set this timestamp to ensure all further instances of the element are cleared from previous image. This is used if inside a repeating group.
#Exposed states Result image
Url of cropped image uploaded to storage. is loading
Croppie is loading image from url or file. is saving
Croppie is saving the cropped image to storage. Browser supported
True if browser does support FileReader method. Original image
Url of original selected image uploaded to storage. is loaded
Croppie has loaded an image from url or file.
#Events is saved
Croppie has saved the cropped image to storage. is loaded
Croppie has loaded the image from url or file. image too large
Selected image exceeds maximum file size.
Open the browser’s file dialog to choose an input file. Save
Start uploading the cropped image to storage. Rotate
Rotate the image about its center by specified degrees. Zoom
Zoom the image in or out.
The amount of zoom, minimum is zero, maximum is 1.5 if zoom restricted to image size. Load
Load an image from url. Clear
Clear the image.
Just to confirm that v0.5.1 is working well in a repeating group.
The “Is Loaded” state is very handy for making the “Save” button appear at the right time - so your have “Browse” then as long as the user selects an image then “Save” appears. Makes the UX more obvious.
I set the timestamp to be the creation date of the thing that my gallery of images hang off. Which is the current date/time for this particular workflow anyway.
Not that there is still an underlying timing issue that is Bubble related, not Croppie related, in that a repeating group can flash up with previously saved data before clearing itself.
Will post up some instructions and a demo of our Crop gallery.
Actually an even better way to use this in a repeating group is set it to the current cell’s record Creation Date, to tie it in with the record, and clear/redisplay from storage if belonging to a different record.
In this example, we are just updating the user image using Croppie. The Croppie on the main page works fine, but the one inside the Popup does not. If you use the Browse button inside of the popup and then click save…functionally, it works (i.e. updates the user image), but Croppie never displays the image after Browse is ran in a workflow so the functionality is blind to the user.