Preview uploaded image before form sumbit

Learn how to display an uploaded image as an element on your page to preview it before you submit the form.

Example

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Snippets

Config Code

Have this code places in your <head> tag for each uploader you have on a page.

1<lr-config
2	ctx-name="uploader-1"
3	pubkey="your_public_key"
4	max-local-file-size-bytes="10000000"
5	multiple="false"
6	img-only="true"
7></lr-config>

Uploader Code

Have this code within your form, where the uploader will actually be displayed.

1<lr-file-uploader-minimal
2	css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.25.0/web/lr-file-uploader-regular.min.css"
3    ctx-name="uploader-1"
4    class="my-config"
5></lr-file-uploader-minimal>

Data Output Code

Have this code after your uploaders: e.g. in the end of the form or <body> tag.

1<script>
2	window.addEventListener('LR_UPLOAD_FINISH', (e) => {
3  	console.log(e.detail);
4    document.getElementById("uuid-field").value = e.detail.data[0].uuid;
5    document.getElementById("url-field").value = e.detail.data[0].cdnUrl;
6    document.getElementById("profile-image").src = e.detail.data[0].cdnUrl;
7    document.getElementById("profile-image").srcset = e.detail.data[0].cdnUrl;
8	});
9</script>