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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-minimal.min.css" />
<script type="module">
    import * as UC from "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js";
    UC.defineComponents(UC);
</script>

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

// Paste in body tag

<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.