Drop event

[asmith20002]

Hello,

I'd like to catch a file drop event when the file is dropped on the backdrop area. How would you do it?
I've tried to do it manually but it doesn't work. Tried to catch it via adding event listerner to Fancybox.getInstance().container or Fancybox.getInstance().container.querySelector('.fancybox__backdrop') or evenFancybox.getInstance().container.querySelector('.fancybox__slide'). None works.

on:
{
	"done": () => {
		Fancybox.getInstance().container.querySelector('.fancybox__backdrop').addEventListener('drop', function(e: Event)
		{
		        e.preventDefault();
			console.log('works?');

		});
	},
}

[fancyapps]

Hi,

Since backdrop element is behind the carousel, I think you have to attach your event listener to the carousel slide, something like this:

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    "done": (fancybox, slide) => {
      slide.el.addEventListener('drop', function(e) {
        e.preventDefault();
        console.log('works?');
      });
    },
  },
});

[asmith20002]

Thanks for the reply. The 'drop' event is not working. I changed it to 'mouseenter' and it works but when 'drop' happens, Firefox tries to open up the file instead. If the file is an image, it just leaves the current page and displays the image.

[fancyapps]

Well, that is up to you :)

[asmith20002]

Does the 'drop' event work for you? It doesn't fire up at all.

[asmith20002]

OK figured it out. The event 'dragover' on the body was causing it. The 'dragover' must be prevented for this to work.