Uploadcare Asset link

Hi @omkarka4, here is the HTML and CSS you have to use to get the URL in Marketo field.

Add this script in Rich text field

<script type="module">// <![CDATA[
import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js";

UC.defineComponents(UC);

const providerNode = document.getElementById("my-uploader-provider");
const previewsNode = document.getElementById("previews");

/*
Note: Event binding is the main way to get data and other info from File Uploader.
There plenty of events you may use.

See more: https://uploadcare.com/docs/file-uploader/events/
*/
providerNode.addEventListener("change", handleChangeEvent);

function handleChangeEvent(e) {
console.log("change event payload:", e);

renderFiles(e.detail.allEntries.filter((f) => f.status === "success"));
}

function renderFiles(files) {
const renderedFiles = files.map((file) => {
const fileNode = document.createElement("div");
fileNode.setAttribute("class", "preview-wrapper");

const imgNode = document.createElement("img");
imgNode.setAttribute("class", "preview-image");
imgNode.setAttribute("src", file.cdnUrl);
imgNode.setAttribute("width", "200");
imgNode.setAttribute("height", "auto");

fileNode.append(imgNode);

return fileNode;
});

previewsNode.replaceChildren(...renderedFiles);
}

function formatSize(bytes) {
if (!bytes) return "0 Bytes";

const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
}
// ]]></script>
<input type="hidden" role="my-uploader" name="my_file" id="uploadcare-file" /> <uc-config ctx-name="my-uploader" pubkey="Insert your key" sourcelist="local, url, camera, dropbox" source-list="local, url, camera, dropbox" style="--ctx-name: 'my-uploader';"></uc-config> <uc-file-uploader-regular ctx-name="my-uploader" class="uc-light" uc-wgt-common="" uc-file-uploader-regular="" style="--ctx-name: 'my-uploader';"></uc-file-uploader-regular> <uc-upload-ctx-provider ctx-name="my-uploader" id="my-uploader-provider" style="--ctx-name: 'my-uploader';"></uc-upload-ctx-provider>
<div class="previews" id="previews"><br /></div>

 Then again add this script in another rich text element

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>// <![CDATA[

MktoForms2.whenReady(function(form){ 

 form.onValidate(function() {

 var vals = form.vals();

var ImageURL = jQuery('.preview-image').attr('src'); 

 form.vals({"Add Hidden Field Name":ImageURL }); 

 if (vals.uploadedFile== "") {

            // Prevent form submission

            form.submittable(false);

            // Show error message, pointed at VehicleSize element

            var uploadCheck = form.getFormElem().find(".uc-light");

            form.showErrorMessage("Please upload receipt", uploadCheck);




        }

        else {

            // Enable submission for those who met the criteria

            form.submittable(true);




        }

 }); 

});

// ]]></script>

 Please add hidden field and update the same name in above script.

After that, please add these CSS in Custom CSS option

@import url("https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css");
.my-config {
--uc-primary-oklch-dark: 69% 0.1768 258.4;
--uc-primary-oklch-light: 59% 0.22 264;
}

 After adding this, you can see the value in hidden field and also the image will show the preview like this

Please let me know if you face any issue.

Thanks,

Disha