V12+ DialogV2 change background

main.js

const backgrounds = [
  "/full/path/to/file.webp",
  "https://or.even.urls"
  // ... list of images here
]

// Generate the dialog content
let content = '<form><div class="form-group" style="display: flex">'

backgrounds.forEach((bg, index) => {
  content += `
    <div style="flex:none">
      <input type="radio" name="background" value="${index}" id="bg-${index}">
      <img src="${bg}" width="300" height="200" style="margin: 1px;">
    </div>`
})

content += '</div></form>'

foundry.applications.api.DialogV2.wait({
  window: { title: "Change Background" },
  position: { width: window.innerWidth * .8, height: window.innerHeight * .8 },
  content,
  id: "select-background-dialog",
  buttons: [{
    action: "1",
    label: `Change Background`,
    icon: "fas fa-check",
    callback: () => {
      const selected = document.querySelector('#select-background-dialog input[name="background"]:checked')?.value
      if (!selected) return
      // Get the selected background image
      const background = backgrounds[selected]

      // Update the scene's background
      canvas.scene.update({ "background.src": background })
    }
  }],
})

// add a scrollbar
setTimeout(() => {
  document.querySelector("#select-background-dialog section").style.overflow = "auto"
}, 200)