I am creating images using signature pad (signature pad allows the user to draw or "sign" and creates an image of the signature for you).
Signature pad creates an image using the toDataURL()
javascript method (see here).
I'm trying to attach this image (which I am calling "signature") to my Doc
model using an html.erb form and active storage.
Here is my model:
class Doc < ApplicationRecord
has_one_attached :signature
end
and here is a some of the html / javascript:
<%= f.hidden_field :signature, id: "signature_input", value: nil %>
<script>
// create image and attach to input field when the user submits the form.
// The ".toDataUrl()" create a data url image - this is where I'm struggling. I'm not familiar with data url images
$('#signature_input').val(signature_pad.toDataURL());
</script>
here's my controller (I think this is where I need to process the data url image and store with active storage... but I'm really struggling here)
class DocSignaturesController < ApplicationController
def update
# find doc
@doc = Doc.find(params[:id])
# assign the update params. NOTE: after assigning the "signature" the @doc will no longer be valid
@doc.assign_attributes(update_params)
# saving causes error: "ActiveSupport::MessageVerifier::InvalidSignature (ActiveSupport::MessageVerifier::InvalidSignature):"
@udoc_signature.save
end
private
def update_params
params.require(:doc).permit(:signature)
end
end
I think the way my form and javascript are set up, the "signature" image could be saved as a binary attribute on the Doc model directly to the database (I have not tried this, but this is what the tutorial I'm working through shows). However, with active storage, it is not working.
I've been able to upload images to active storage from other views (using rails f.file_field
inputs) but I'm having trouble with the data url and f.hidden_field
input.
Any help would be greatly appreciated!
Thanks