Re: Javascript in a form for UploadCare

Vincent_Ferugl1
Level 2

Javascript in a form for UploadCare

Hello,

 

I’d like to use the tool named UploadCare to allow visitors to upload documents in a Marketo embedded form.

Regarding our specific configuration with our website, we use a CMS component to integrate Marketo form and there is a call to Marketo form to display it. To use UploadCare, I have to insert the javascript code directly in the form.

 

I read that I can add the code in the editor of the form as a HTML rich-text element, I copied the code provided by UploadCare Support with my API key (below).

<div>
<script>
UPLOADCARE_PUBLIC_KEY = "my_Key";   UPLOADCARE_PREVIEW_STEP = true;
</script>
</div>
<div>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
</div>
<div><input type="hidden" role="uploadcare-uploader" data-multiple="true" data-multiple-min="1" data-crop="4:3" name="upload-file" /></div>

 

The UploadCare widget is displayed but twice! (see attached the preview).

 

2021-04-26_17h26_32.png

 

Despite the help of UploadCare Support, I wasn’t able to fix it.

Is this code correct?

 

Is it related to this post from @SanfordWhiteman ? https://nation.marketo.com/t5/Product-Blogs/HOWTO-Add-Forms-2-0-JS-behaviors-inside-a-Rich-Text-Area...

 

I tried to insert this code as a HTML rich-text element but same behavior, the widget is displayed twice:

[Form Behaviors JS - Do Not Delete!]
<script>
MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0];
  if( formEl.getAttribute("data-inline-behaviors-loaded") == "true" ) {
    return;
  }
  formEl.setAttribute("data-inline-behaviors-loaded", "true");
  // now continue
  console.log("Doing something special");
});
</script>

 

Any idea to fix it (note: I have no skill in development)?

 

Thank you!

BR,

 

Vincent

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Javascript in a form for UploadCare

Yes, you would have to do it as outlined in my blog post. But that's only if you have a compelling reason to include the UploadCare <script> elements within the form. Is there a specific reason you can't have the scripts outside (i.e. after) the form embed?

Vincent_Ferugl1
Level 2

Re: Javascript in a form for UploadCare

Hello @SanfordWhiteman,

Thank you for your reply.

Could you please tell me where to add your script? In the HTML of a new rich-text area or in the same as used for the script of UploadCare? (see screenshot)

I tried both but same behavior, the widget still appears twice, maybe I made a mistake in the process?

 

According to my IT team, I have to add the script directly in the form regarding our settings to call Marketo forms.

Nevertheless, I tried to add it on our website in a component dedicated to insert code, the UploadCare widget appears once but under the form (and so under the submit button). I'd like to have it before the submit button.

 

Thank you.

Vincent

2021-04-27_20h08_58.png