Image Compressor & Uploader not working with Image URLs

[mudtowncleaning]

Hello,

I’ve been using the Image Compressor & Uploader for awhile, but all of a sudden it stopped working as usual. I traced the problem to an issue with image URLs. I was loading multiple photos and saving the list of Base 64 images to a custom state, then processing those images one by one by accessing each images URL. All of a sudden, that stopped working. When the pluging tried to find each images url, the site would crash.

So, I fixed that by saving the images “List – uploaded images URLs.” Great. That worked.

But, the user can choose to use a separate plugin to crop or rotate each image for uploading it. Because after the image is processed, it can only be accessed with an URL, I have a problem. Your plugin can’t extract the URL, or something like that, and the site crashes.

I have no idea how to fix this. Do you?

[Daniel.P]

Hello @mudtowncleaning,

Thank you for reaching out. From your description, it seems like the integration with another plugin for image manipulation is causing crashes. This could be due to how the image URLs are being handled or processed after cropping or rotating. Let’s try to troubleshoot this issue together:

1. Error Logs: When the site crashes, check the browser console (F12) for any specific error messages. These messages can provide clues about what is causing the issue.
2. Workflow Review: Review the workflows where images are processed. Make sure that after the images are cropped or rotated, the URLs are updated correctly in your database or state. There might be an issue in the sequence of actions where the URL needs to be refreshed or re-saved.
3. Test with Simple Workflow: Simplify the workflow to just compress and upload images without additional manipulation, and see if the URLs are stable. Then, gradually introduce the cropping and rotating functionalities to pinpoint where the issue starts.
4. URL Accessibility: Verify that the URLs provided after uploading are accessible and not restricted by any privacy settings or CORS policies. Sometimes, URLs might be temporarily accessible and expire or become inaccessible due to app settings.

If the above steps do not resolve the issue, could you please provide access to your application with steps to reproduce the issue? For this please add our support@zeroqode.com email as a collaborator of your app (disregard the warning, our email can be added to the collaborator list even if your app is on the Free plan). And please let me know the page name where the issue is found.

I hope this helps, and I look forward to your response to further assist you in resolving this problem.

Best regards,
Daniel.

[mudtowncleaning]

Hey Daniel,

Sorry for the slow reply. Way too busy right now! But appreciate your help. But let me clarify.

I have been using this plugin for awhile, and the workflows I’m using have worked fine until now. I think I may be late-night updated the plugin, which is my guess why it stopped working in the same way.

But to clarify the problem. After the images are compressed, I use the “Upload multiple images” workflow. In the “Base64” field, I had been using the “List - Uploaded images URLs” option.

When I realized my images weren’t uploaded, and after pulling my hair out several times, I switch that to “List - Compressed Base64” and it started to work again.

So I can now select, compress, and upload images. Great. But it seems that your plugin is no longer able to access the URLs. That’s why I don’t think the problem is with the interaction of the cropped/image rotation plugin. It seems it can’t find the URL it needs to crop/rotate the image. And I am having that problem iwth just your plugin alone.

Your final point, “4. URL Accessibility” seems like it could be the problem. But where do I go to check that out. I dont’ know what a “CORS” policy is.

But again, the only thing I can think of that I changed that might have triggered the problem is updating your plugin to the current version.

Hope this is helpful and not me just missing the point. A bit wiped right now and not trusting my brain at the moment!

Chris

[mudtowncleaning]

What the hell? Um, scratch all that above. I went into the privacy settings for the data type that holds the images, allowed “auto-binding” on all the data fields, and… that did it. Everything is now working. Thanks for your time and your help. Really appreciate it. Now… on to the next unsolvable problem. Chris

[Daniel.P]

Hi Chris @mudtowncleaning,

I’m glad to hear that you resolved the issue! It’s great to know that everything is now working smoothly for you. Thank you for your kind words and for taking the time to troubleshoot this with our support.

If you’re enjoying our plugins, we’d really appreciate it if you could take a moment to rate them in the Bubble editor. Just go to the Plugins tab, search for the plugin by name, and give it the stars you think it deserves. Your support is crucial to us!

Furthermore, if you’re open to sharing your overall experience with Zeroqode, please consider leaving a review at Review. Your feedback not only helps us but also aids the Bubble community by motivating us to continue developing outstanding products and providing excellent customer service.

Thank you again, Chris, and I hope you have an amazing day ahead. Remember, if you encounter any more ‘unsolvable problems’ or have any questions, don’t hesitate to reach out. I’m here to support you.

Best wishes,
Daniel

[mudtowncleaning]

Hello Daniel,

Me again! I did encounter another unsolvable problem. I think it’s part of the same problem I was having before. I have been using your Image Compressor for awhile. But recently it stopped working. I traced the problem to an issue dealing with URLs.

In the past, when I wanted to upload my compressed image, I used the image URL and it worked fine. Like this:

That used to work. But a few weeks ago, that stopped working. But once I changed it to upload the base 64, it worked. Like this:

Now, I’m realizing that my image cropper/rotater plugin no longer works. I believe this is because your plugin won’t read that cropper’s URL. Or something like that. But now when your compressor tries to compressed that cropper’s cropped image URL, nothing happens.

Is my problem clear? If so, can you help?

[mudtowncleaning]

Also, I would be happy to replace my entire image uploading/compressing/cropping process, using different plugins, or something. But this compressor uploader was the only one I could find that could handle .heic images. But if you have a better solution – one that is easier and faster – I’m open to that. Just saying…

[dorel]

Hi @mudtowncleaning,

As Daniel is currently unavailable, let me help you with your request

Regarding the first behavior with the Upload Image action, this action should only support the Base64 code of the image and not the URL. The way you have set it up now, to accept the “Compressed image base64,” is correct.

For the second issue with the plugin not being able to compress the Cropper’s URL, could you please check in step-by-step mode how the actions are being triggered and confirm that the compress action is getting the URL back correctly?

I would love to delve deeper into your configuration so I can provide more accurate information about why you are experiencing this issue. To do that, I would need more details about the setup on your page!

Could you please provide me with a screen recording showcasing the setup of the Cropper plugin and our Image Compressor and Uploader plugin? I am interested in how you have connected these two plugins together, the workflow and action settings, and any other relevant information.

Alternatively, if you could provide us access to your page by adding support@zeroqode.com to the list of collaborators (you can ignore the warning as we are on an Agency Bubble plan) and tell me where the plugin is set up with any other credentials needed to access the preview page on my side, that would help me better understand and check your setup

I will try my best to help and get to the bottom of this!

Best regards

[mudtowncleaning]

Hello again,

I apologize for the slow reply. My week got a little out of control. lol. But I really appreciate your help. So, here’s my attempt to give you a detailed run-down of the problem.

When a user uploads an image, I have the compressor/uploader upload the image or images for review. They appear in a list that looks like this:

At this point, the user can either compress and save the image, or manipulate the image and THEN compress and save it. If they choose the former, the workflow for the compressor looks like this:

That works fine.

If I choose option B, and click the “CROP / ROTATE” button, the image loads in the cropper plugin. After you crop / rotate the image, you will see something like this:

Now, when you click the SAVE button, it needs to access the cropped image. The workflow looks like this:

So the compressor accesses the image from the “Image URL” field. But in one case it works. In the other, it doesn’t. I have used this same workflow for quite awhile now, but only recently has it stopped working. I can’t pinpoint how long it’s been because I haven’t been cropping or rotating any images lately, so not sure how long ago it stopped working. But I’m not sure what to do.

I’ll add supoort@zeroquode.com to the list of collaborators on the site. Sorry, the app is a bit of a big sloppy mess at the moment. But all the image uploading is in the reusable element called RE: Pix.

Let me know what else you need. And thanks again for your help…

Chris

[mudtowncleaning]

Actually, it appears I am not allowed to add a collaborator. I think I need to upgrade my plan. That’s almost another $100 a month, and I’m not really ready for that. Is there another way? Or am I doing something wrong?

[dorel]

Hi @mudtowncleaning,

Thanks for your message and apologies for the delayed reply over the weekend .

You should be able to proceed past the error since we are on an agency plan, so the Bubble subscription you have shouldn’t matter. Could you please try again and continue after you get the warning message? If you could send me a screenshot of the warning, I will be able to assist further!

Best regards

[mudtowncleaning]

Hey Dorel,

Thanks again for your patience with my slow reply. But I did finally get you added as a collaborator. I was… being a dork. Also, I had your email address spelled wrong. But figured it out.

Just let me know what you need from me.

Chris

[dorel]

Hi @mudtowncleaning,

My apologies, the correct email is support@zeroqode.com

Could you please check one more time that you have inserted the email above, as we have not received any email with the Bubble editor URL? You can also send us the Bubble editor link here or via DM if you feel more comfortable .

Best regards

[mudtowncleaning]

Hello again,

One more apology for taking so long to get back to you. I’ve got too much on my plate right now, and I haven’t had enough time to deal with this lately.

That said, I did add you as a collaborator. See the screen shot:

Also, now the plugin doesn’t appear to back working at all. I need this to work to run my business. So… help!

[mudtowncleaning]

If I try to upload a pic now, I get the following error message:

[dorel]

Hi @mudtowncleaning,

Thanks so much for the access. However, we did not receive the email Bubble automatically sends when a user is added to the list of collaborators. Could you please send me the Editor URL so I can access your page?

As for the error message you are getting, usually the “null” errors occur because the element is not visible on the page. Could you please confirm that the Compressor element is present and visible?

Best regards

[dorel]

Hi @mudtowncleaning,

I am still waiting for the Editor URL, as we have not received it yet. Please get back to me with a message as soon as you have a free moment

Hope to hear back from you soon!

Best regards

[mudtowncleaning]

Hey Dorel,

I really apologize for going awol on you. I just have one or two too many things going on right now. I’ve been too busy. Things should be settling down now, though. Thanks for your patience.

Anyway, I had invited you as a collaborator. You said you didn’t get the email. I just deleted the original and re-sent it. Let me know if you get it.

Again, the issue is in the reusable element called “RE: Pix”. After I crop an image, your image compressor accesses the cropped image with its URL. This used to work just fine. And I haven’t changed anything. But now it won’t work.

I had a similar issue a few weeks ago where accessing the image via it’s URL didn’t work, so I changed the workflow to access the Base64 instead, which fixed it. But I have no other option with the cropper I’m using. Hoping to find an easy solution.

Let me know what else you need from me…

Chris

[dorel]

Hi @mudtowncleaning,

Please respond when you have a free moment, I will be here whenever you can provide more details

I have received the invitation and have added the reusable element on the test-images page.

I have uploaded an image, and our compress plugin is functioning correctly. However, when trying to crop it, I noticed that the Croppie plugin does not work at all. Trying to save after cropping is not working because the URL from the Croppie plugin is empty. You can see this screen recording showcasing this behavior.

Could you please check the reusable element and tell me a bit more about how to recreate the behavior you reported above?

Hope to hear back from you soon!

Best regards