Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

// Paste in head tag

<!-- UC uploadcare stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css" />

<!-- UC uploadcare widget config options -->
<uc-config
  ctx-name="my-uploader"
     pubkey="" // add your own pubkey from uploadcare dashboard
     max-local-file-size-bytes="10000000"
     img-only="true"
     source-list="local, url, camera, dropbox"
     use-cloud-image-editor="false"
     multiple="true"
     multiple-min="1"
     multiple-max="10"
></uc-config>

// Paste in body tag

<!-- Image uploader script -->
<script>
/// Image uploader
   document.addEventListener("DOMContentLoaded",()=>{
     const ctx = document.querySelector('uc-upload-ctx-provider');
     /// On file upload success event
    ctx.addEventListener('file-upload-success', e => {
    let valImg =  document.querySelector("#url-image").value.length === 0 ? e.detail.cdnUrl : document.querySelector("#url-image").value + "," + e.detail.cdnUrl;
      document.querySelector("#url-image").value = valImg;
})
//// On file deleted by user
 ctx.addEventListener('file-removed', e => {
 console.log(e);
 let imagesVal = document.querySelector("#url-image").value;
 let arrImagesCurrent = imagesVal.split(",");
let arrImgUpdated = arrImagesCurrent.filter(img=>img !== e.detail.cdnUrl);
     document.querySelector("#url-image").value = arrImgUpdated.join(",");
})
   })
</script>

Not available

Upgrage to access the custom code @$14/ lifetime

Not available

Not available

This is a success message.
This is an error message.
This is also an error message.