Is there a way to save it as a jpeg? Or show the image of the signature as a jpeg? I have a liability form for my students to fill out on a tablet. I’m using Documental to convert it into a pdf. It will capture a jpg fine but not the signature. I have the signature show up in a window but it’s a png. I figure if I make it a jpeg it would work. I need to attach the signature to the form.
Are you sure its png that is causing the issue? Have you tested with an external png? Let me know if you still want to follow up this idea.
v1.0.3 New version of the plugin
-
Scrolling on a mobile no longer clears the signature, and also now preserves the other settings like pen colour.
-
Rotating a device screen “redraws” the signature after rotation, unless (new option) is selected to clear the pad on screen resize.
-
When the user presses Save on an empty pad, it now sets the image url to empty and invokes a trigger “is saved empty”, so the Bubble app can choose to handle this by clearing the signature in the database.
Hey mate welcome back!!!
I was wondering with this signature pad if it’s possible to get tid of the save button or have the save button external such as placing a button elsewhere, less co fusing for the user
Thanks @chad, nice to be back.
Yes, all the footer elements are optional …
Then in your own button workflow, add an action to Save …
Still need to have the workflow event for “is saved” to do something once the image has uploaded …
2 Likes
v1.0.4 New Version
- If there is no footer elements, adjusts the body area to be larger.
Ah I should have looked a little harder
I am confused on how to save the customers signature to the database
- User presses Save
- The pad does an upload to S3 storage for the Bubble app.
- The pad outputs the S3 file url.
- The pad emits an event “is saved”.
- A workflow triggers from this event.
- A workflow step reads the pad’s output S3 url and stores it in a database field.
Its up to you to create the workflow, you can use the examples in the demo for reference.
I hope this helps!
5 Likes
This is so great! Thanks for these updates 
To save as a “private file”, (see Bubble’s reference for what a private file is), the steps are …
- Workflow creates a database row (thing), or reuses an existing one.
- The pad property is told of this row with “Attach this file to”.
- User presses Save
- The pad does an upload to storage for the Bubble app.
- The pad attaches the uploaded file to the database row.
- The pad outputs the file url (will look different to the public type).
- The pad emits an event “is saved”.
- A workflow triggers from this event.
- A workflow step reads the pad’s output url and stores it in a database field, usually the same one that the file is “attached to”.
Hmmm I could make step 2 more flexible by allowing a workflow step to set the row. If anyone would prefer using it that way, let me know.
There’s an example page “private” on the same app demo.
1 Like
Thanks for the help. I ended up staying up to 5 in the morning but I figured it out. Thanks, I am new to bubble.
1 Like
Hey @mishav, great plugin here. I looked through this whole topic and didn’t see a response to where we can change the border around the signature area. Is this possible? Or is it better to have a pop-up happen? Right now there is quick a large border around that area (image attached).
If you have a possible tweak or if I missed something, let me know! Thanks for doing this by the way.
Hi @hattford, thanks!
I didn’t have an option in the properties for this, but you can alter the styles to achieve this.
Put an HTML element on the page, so that it overrides the plugin style. The default position of the “body” is 20,20,20,60 px, altering it dramatically as follows:
<style>
.m-signature-pad--body {
position: absolute;
left: 2px;
right: 2px;
top: 2px;
bottom: 2px;
border: 1px solid #f4f4f4;
}
</style>
The style classes that can be overridden are:
.m-signature-pad
.m-signature-pad–body
.m-signature-pad–body canvas
2 Likes
The plugin suddenly stopped working. It worked flawless but now it cannot save a signature and gives the error “The plugin Signature Pad / action Save a Signature Pad threw the following error: TypeError: Cannot read property ‘toLowerCase’ of undefined”. Somebody knows what to do?
indeed. Same goes to me
1 Like
It is working now. It is bubble issue. The team fix it. Thanks
3 Likes
Hi @mishav, awesome plugin! Is there any consideration of making the ink color and pixel size dynamic to other inputs. For example, the signing user could change Input A to #FF0000 and Input B to 20, and these would change the ink color to red and size to 20px on the signature pad.
If you’re interested, I would be happy to fund the project and/or collaborate. Cheers!
I just tried the example plugin page and it didn’t work on desktop or mobile. Anyone else seeing this?
scratch that - I just noticed that the original post isn’t the latest way to use this plugin. This is phenomenal mishav!
Maybe update the original post to include an example with the latest plugin, as well as these two how tos
how to save the customers signature to the database User presses Save The pad does an upload to S3 storage for the Bubble app. The pad outputs the S3 file url. The pad emits an event “is saved”. A workflow triggers from this event. A workflow step reads the pad’s output S3 url and stores it in a database field.
and
To save as a “private file”, (see Bubble’s reference for what a private file is), the steps are …
Workflow creates a database row (thing), or reuses an existing one. The pad property is told of this row with “Attach this file to”. User presses Save The pad does an upload to storage for the Bubble app. The pad attaches the uploaded file to the database row. The pad outputs the file url (will look different to the public type). The pad emits an event “is saved”. A workflow triggers from this event. A workflow step reads the pad’s output url and stores it in a database field, usually the same one that the file is “attached to”.
1 Like
Hey @mishav, the plugin works extremely well and I even left a review for you. It’s been working just fine for me for the last few months until today. I’ve had some users complain that they can’t even write within the SignaturePad area.
Is this Bubble being finicky again or is there something wrong with your plugin?