Services Plugins FAQs

AWS plugin "Drop field" too small

#1

Hi,

I am experiencing kinda weird problem. When I load my page, the File uploader element comes normal-as-intended-size (I made it orange for contrast), but the file “drop zone” in that element is just like 20 px width from the left side (as seen from the thinness of the placeholder, which I centered).

Weird is that as soon as I upload multiple files and they get displayed, the drop zone correctly stretches and becomes the whole element size. So the problem is just when no files are uploaded. Works same on multiple browsers.

Could you help me?

I provide the screenshot below.

image
image1254×720 17 KB

#2

Hi @giedraitis.mantas.21, thanks for reaching out.

Please check if your plugin is updated to the latest version. Such an issue has been fixed on version 1.78.0 (the current one is 1.79.0).
In case the issue will persist, please try to replace the plugin element with a new one.

Hope it helps. In case the issue will keep appearing, please share more details about plugin element settings (screenshots or a screencast).
Regards,

#3

Hi @Serg,

I am actually on 1.81.0, since Bubble shows it’s the latest version.

image
image1946×104 8.17 KB

I tried replacing elements with different ones and reinstalling the plugin itself. The problem persists.

New element’s settings are as follow (all default, just made minor changes: color, center text etc.):

image
image680×1272 69.2 KB

image
image670×1280 94.3 KB

image
image668×1270 66.1 KB

image
image660×1286 54.4 KB

The result:

image
image540×642 3.83 KB

#4

@giedraitis.mantas.21, thanks for the provided details.
Would it be convenient for you to add our support@zeroqode.com as a collaborator of your app?
That will allow us to check what’s wrong with your setup and test it out in our workspace.

Enter your Bubble editor page → Settings → “Collaboration” tab → Invite a user (email).

(Note: disregard the warning message regarding the plan, as we are an agency and you can easily add us to your collaborators.)

I will check your setup and do a few tests in an attempt to find the root cause and help you fix it.
In case it is ok for you, please let me know.

P.S. Please also indicate the used browser and device.

Regards,

#5

@Serg OK, added. Used browser is Firefox and device is Macbook pro 2017.

#6

Thanks for the provided details and access.
Once any news will become available, I will let you know :wink:
Regards,

#7

@giedraitis.mantas.21, we’ve checked the issue and it is related to a third-party plugin or process.

From the browser element console we see that something is influencing the plugin element display:

image
image841×557 90.7 KB

image
image837×716 95.9 KB

If you place the plugin element on a blank page, you will see that it displays properly.

In order to identify the conflict, you can recreate the page step by step, starting from the AWS plugin element, and see which one of them will start changing as reported above.

Hope it helps. Please let me know if I can help with anything else :slightly_smiling_face:
Regards,

#8

@Serg Seems it conflicts with Multi-File Uploader - Dropzone by Bubble. I will remove it for myself (actually got AWS plugin to replace this exact plugin), but FYI just for future reference (maybe you’ll find a fix or something).

Anyways, thank you for your help! :slight_smile:

2 Likes
#9

@Serg Hi. Unfortunately, the problem persists. The issue is, before I created a blank test page and put all the elements I have. First, the abovementioned Multi-File Uploader conflicted, so I uninstalled it and removed all the elements of that plugin from my app. Then created the test page with all the elements on it at the same time and it didn’t conflict with AWS plugin and everything was all right.

But when I try to use it on the places I want - it breaks again. The problem with rebuilding the exact places I want to use the plugin in is that it is supposed to be used in the reusable element, which goes into every page. Therefore rebuilding the places I want to use the plugin in would mean rebuilding the whole app, for which I’ve spent multiple months developing.

Is there any other way to solve this problem?

#10

Hi @giedraitis.mantas.21, thanks for your message.

It might be conflicting with some other plugin too, which is influencing the plugin element display.
To identify the cause, you can make a copy of the page where the “Drop field” is displayed improperly, and “deconstruct” it element by element, to see what else may influence it.

Hope it helps.
Regards,

#11

@Serg Alright, found the problem. Combed through all of the app and found a few of the Multi-File Uploader elements still there (they wouldn’t show in the issue tracker somehow). Deleted them and it works now. Thanks for your help!

Another question though: how could I extract the exact name of the file (uploaded previously to AWS) back to bubble? Now it returns the file name with the UUID at the front, which the element adds by default. There’s 3 options of naming, but all of them include UUID.

image

#12

Hi @giedraitis.mantas.21, thanks for letting us know that the issue with the drop field is solved.

The current plugin setup that includes UUID in the filename, allows avoiding any possible issues in case of files with the same name (replacing/rewriting).
See the link for reference: Names and IDs for all Objects - Amazon Machine Learning

I’m afraid an implementation of the feature with filename-only extraction would create additional issues for users who are not aware of issues that may appear for files with the same name (replacing/rewriting).

Hope it helps. Please let me know if I can help with anything else related to our plugin.
Regards,

#13

@Serg thanks, your explanation on UUID cleared it up.

Regarding the names, I do not want for them to mess with AWS’s file naming and, as you’ve said, create issues with possible replacing/rewriting.

I just want them to see the name the same as they uploaded. It can be purely visual, nothing more. Maybe I can truncate just the text element with the file name somehow? Can’t do that to the exact number (random strings as UUID is not an exact number of characters), but maybe someway with using prefixes on naming the files (eg. truncate to the prefix end or something)? I see there’s always “" symbol between UUID and file name, so maybe somehow I can truncate to that "” symbol?

#14

Hi @giedraitis.mantas.21, thanks for your question.

To display only filenames, please use corresponding custom states:

image
image738×357 38.8 KB

See the Demo Editor page for guidance: zeroqode-demo-02 | Bubble Editor

Hope it helps. Please let me know if I can help with anything else about our plugin.
Regards,