Forum Academy Marketplace Showcase Pricing Features

ImagePro Image Tools - New Plugin from Gimazu

Subscribed to the plugin. Is it possible to drag and drop image on loader?

Hey @gm.zumbo ,

I’ve subscribed to your plugin.

I have one thing to say about it : AWESOME !

Definitively the best image reducer & cropper, including a powerful suite of tools.

CONGRATS !

@boston85719 : if I’m correct you were looking for a efficient image cropping tool. Give a try to this one, for me it’s the best one. A paid plugin but not so expensive considering the powerful suite of tools.

:clap: :+1: :ok_hand:

3 Likes

Hi @myflappd,
I am working on your request, if the test gives a positive result I will release an update with this new feature in a few hours!
Thank you

1 Like

@gm.zumbo Thank you. I am trying to use this upload image, crop it, upload to a wasabi using wasbi plugin.

@Christophe_HK ,
thank you very much for your compliments.
I try to create plugins that meet my needs when building an app for myself or my clients.
So I built the suite with all those elements that, in my opinion, can solve most of the client-side image manipulation problems.
What you wrote repays me for the great effort I spent :sweat_smile:
Best regards

1 Like

Update 1.3.0

Loader element new features:

  • You can set the element to allow Drag and Drop of images in element area
  • You can set the element to allow Browse on click on element area (there remains the possibility to launch a “browse” action in workflow)
  • new “placeholder” setting
  • new “dragover” state (yes/no) is exposed to use it in conditional statements (useful to customize interface)
  • you can now set borders, background, font to customize drag/click area element

@myflappd this is the response to your request!

You can view new features on demo app
This is an experimental feature. Test it!
Don’t forget to refresh your editor after upgrading.

1 Like

How can I save filter&effects’s output image to Bubble image thing?

Hi @SumitC , you can use Uploader element that expose “Upload to Bubble” action.
let me know if you need further clarification

What’s absolutely fabulous with this plugin is that all elements can work together, amazing and really powerful. This plugin saves a lot of time!
Moreover, the size reduction algorithm is very efficient. Great job!

1 Like

I can upload the file just can’t attach it to a data type’s thing. What type of field is it supposed to be -an image, file or something else?

Also, every file is named upload.png. Is there a way to assign a name to it

Hi @SumitC,

I don’t understand your request
Are you referring to how to save the image bubble uploaded url in a custom data type?
In this case you have an event and an element status available. Upon occurrence of element → “bubble upload is complete” you can build a workflow in which create or update thing using element → “Uploaded image” status. And you can use an image type field in your custom data type.

If instead you refer to the “Make this file private” and “Attach this file to” section of the “Upload to Bubble” action

the element should behaves in this case in the same way as a Bubble Picture Uploader with the same settings → go to help reference

Yes I can add this new feature if you need it. I didn’t think it useful because every file on Bubble has a unique url despite having the same name.

let me know if you need anything else

1 Like

Thanks for your response. I am creating a product (custom data type). Product has things - Front image, back image, nutrition image and so on. I want the cropped and compressed image to upload to the Bubble’s file manager and get attached to that product’s respective image thing.

Without your plugin involved, I achieve this by using the workflow Create a new data type.

Here PUP1 represents Bubble’s Picture Uploader’s value as image.

I would appreciate this with dynamic names but please wait until I can figure out how to use your plugin for my purpose

Simple!
You needs 4 elements of the suite: Loader, Reducer, Cropper and Uploader

Set the reducer settings like this (using as input image the Loader->Image loaded)

Set the Cropper settings like this (using as initial content image the Reducer->Resized Image)

Create a workflow when “Button Load Image is clicked” and choose “Browse a ImagePro - Loader” element action. (Then in the dialog box, select the Loader element)

Create a workflow when “Button Crop Image is clicked” and choose “Get Crop a ImagePro - Cropper” element action. (Then in the dialog box, select the Cropper element)

If you want to save automatically on cropping event create a workflow to intercept this event

then select Upload to Bubble a ImagePro Uploader

and set this action using as image This ImagePro-Cropper’s Cropped Image

Create a workflow to intercept Bubble upload complete event

and finally you can create workflow to create your custom type thin with Reduced and Cropped Image.

If you try to create this prototype you will see that everything happens with very good performances because every processing (with the exception of sending the file and creating the new thing) is done directly client side from the browser :wink:

2 Likes

Thanks for the detailed info. The part the drove me nuts was the fact that I was trying to use the field “Attach the file to”. Now I know that its applicable only in case I want the file to be private and attached to user.

Anyhow, my set up is a bit different and based on the demo you created. Loader → Reducer-> Popup->Cropper (in popup)- > Uploader (for each picture). Cropper’s image are set as preview.
I want the uploads to begin after user clicks “save product”. This will give users an option to change their mind before uploading to bubble.

Can I use this workflow instead?

Do you think the “only when” conditions are appropriate?

Clearly, I am not doing something correct as even after adding 3 seconds pause between each upload pics are getting loaded to file manager but not getting attached to the product

So it can’t work, not for the plugin but for incorrect event handling. Remember that Bubble uses Javascript and in javascript the events are fundamental.
When you click on Save Product you cannot have in the same workflow a remote upload and a Create Thing which refers to the upload (even if you pause for 10 minutes!).
Check my example and you will see that Create Thing is put in a specific Uploader → bubble upload is complete event, which occurs as soon as a file has been stored by Bubble so as to return the remote url.
However, it makes no sense to do two or more consecutive uploads in the same workflow.
If you need to store multiple images that need to be manipulated first, I suggest you re-engineer your app by building a sort of multi-step wizard in which to make a series of successive uploads by storing all the images (url) loaded in an image list state.
When the user presses “Save” button the workflow will contain only one Create Thing that will store the stored URLs in the appropriate fields.
This, in my opinion, is the most efficient way to do it. There are also other ways but always keep in consideration the “events” that are generated.
“Only when” conditions are not appropriate, as you are evaluating states (bubble upload pending) and not events.
The state is evaluated at a given time and the workflow does not wait for the state to become false. You can use states to manage interface conditions to show the user for example that an upload is pending. Conversely, an event is able to trigger a workflow as soon as it occurs.
Here, however, we enter the fundamentals of programming.
I hope I was helpful.
If you have other difficulties write me PM

2 Likes

Hey @gm.zumbo,

I may have found an issue with the cropper component.

In my use case, users upload avatars, they can change / crop them at any time.

When an avatar is loaded, the image url is stored in a custom state. No problem to use the Image cropper with the image url stored in this state. The user can then validate and the new / cropped avatar is stored in DB.

If a user want to crop an avatar already stored in the db, I don’t use custom state, the source image for the image cropper is the image url stored in the db. But in this case, it seems the cropper never retrieves this image…

Are you able to get it working using images stored in the db?

Many thanks!

Hi @Christophe_HK ,
There should be no difference between a url stored in a custom state and a url of an image in the db.
I tried to use as Initial image a retrieved image through a “do search for” and the Cropper loads it correctly.
To check what happens in your specific app write me in PM, if you like sharing a link to the editor so that I can take a look.
Regards

[Update]
I also tried to modify the image in the db used as Initial image by the Cropper through a separate workflow, and the Cropper automatically updated the displayed image correctly. I can’t reproduce your issue.
I always remain at your disposal in PM