(cx);
+
+ let UseDropZoneReturn {
+ is_over_drop_zone,
+ files,
+ } = use_drop_zone_with_options(
+ cx,
+ drop_zone_el,
+ UseDropZoneOptions::default()
+ .on_drop(move |_| set_dropped(true))
+ .on_enter(move |_| set_dropped(false)),
+ );
+
+ view! { cx,
+
+
+
Drop files into dropZone
+
+
+
+ is_over_drop_zone:
+
+
+ dropped:
+
+
+
+ Name: {file.name()}
+ Size: {file.size()}
+ Type: {file.type_()}
+ Last modified: {file.last_modified()}
+
+ }
+ } />
+
+
+
+
(cx);
+///
+/// let on_drop = |event| {
+/// // called when files are dropped on zone
+/// };
+///
+/// let UseDropZoneReturn {
+/// is_over_drop_zone,
+/// ..
+/// } = use_drop_zone_with_options(
+/// cx,
+/// drop_zone_el,
+/// UseDropZoneOptions::default().on_drop(on_drop)
+/// );
+///
+/// view! { cx,
+///
+/// "Drop files here"
+///
+/// }
+/// # }
+/// ```
+///
+/// ## Server-Side Rendering
+///
+/// Please refer to ["Functions with Target Elements"](https://leptos-use.rs/server_side_rendering.html#functions-with-target-elements)
+pub fn use_drop_zone
(cx: Scope, target: El) -> UseDropZoneReturn
+where
+ El: Clone,
+ (Scope, El): Into>,
+ T: Into + Clone + 'static,
+{
+ use_drop_zone_with_options(cx, target, UseDropZoneOptions::default())
+}
+
+/// Version of [`use_drop_zone`] that takes a `UseDropZoneOptions`. See [`use_drop_zone`] for how to use.
+pub fn use_drop_zone_with_options(
+ cx: Scope,
+ target: El,
+ options: UseDropZoneOptions,
+) -> UseDropZoneReturn
+where
+ El: Clone,
+ (Scope, El): Into>,
+ T: Into + Clone + 'static,
+{
+ let UseDropZoneOptions {
+ mut on_drop,
+ mut on_enter,
+ mut on_leave,
+ mut on_over,
+ } = options;
+
+ let (is_over_drop_zone, set_over_drop_zone) = create_signal(cx, false);
+ let (files, set_files) = create_signal(cx, Vec::::new());
+
+ let counter = store_value(cx, 0_usize);
+
+ let update_files = move |event: &web_sys::DragEvent| {
+ if let Some(data_transfer) = event.data_transfer() {
+ let files: Vec = data_transfer
+ .files()
+ .map(|f| js_sys::Array::from(&f).to_vec())
+ .unwrap_or_default()
+ .into_iter()
+ .map(web_sys::File::from)
+ .collect();
+
+ set_files.update(move |f| *f = files);
+ }
+ };
+
+ let _ = use_event_listener(cx, target.clone(), dragenter, move |event| {
+ event.prevent_default();
+ counter.update_value(|counter| *counter += 1);
+ set_over_drop_zone.set(true);
+
+ update_files(&event);
+
+ on_enter(UseDropZoneEvent {
+ files: files.get(),
+ event,
+ });
+ });
+
+ let _ = use_event_listener(cx, target.clone(), dragover, move |event| {
+ event.prevent_default();
+ update_files(&event);
+ on_over(UseDropZoneEvent {
+ files: files.get(),
+ event,
+ });
+ });
+
+ let _ = use_event_listener(cx, target.clone(), dragleave, move |event| {
+ event.prevent_default();
+ counter.update_value(|counter| *counter -= 1);
+ if counter.get_value() == 0 {
+ set_over_drop_zone.set(false);
+ }
+
+ update_files(&event);
+
+ on_leave(UseDropZoneEvent {
+ files: files.get(),
+ event,
+ });
+ });
+
+ let _ = use_event_listener(cx, target, drop, move |event| {
+ event.prevent_default();
+ counter.update_value(|counter| *counter = 0);
+ set_over_drop_zone.set(false);
+
+ update_files(&event);
+
+ on_drop(UseDropZoneEvent {
+ files: files.get(),
+ event,
+ });
+ });
+
+ UseDropZoneReturn {
+ files: files.into(),
+ is_over_drop_zone: is_over_drop_zone.into(),
+ }
+}
+
+/// Options for [`use_drop_zone_with_options`].
+#[derive(DefaultBuilder, Default, Clone, Debug)]
+pub struct UseDropZoneOptions {
+ /// Event handler for the [`drop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event) event
+ on_drop: Box>,
+ /// Event handler for the [`dragenter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event) event
+ on_enter: Box>,
+ /// Event handler for the [`dragleave`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event) event
+ on_leave: Box>,
+ /// Event handler for the [`dragover`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event) event
+ on_over: Box>,
+}
+
+/// Event passed as argument to the event handler functions of `UseDropZoneOptions`.
+#[derive(Clone, Debug)]
+pub struct UseDropZoneEvent {
+ /// Files being handled
+ pub files: Vec,
+ /// The original drag event
+ pub event: web_sys::DragEvent,
+}
+
+/// Return type of [`use_drop_zone`].
+pub struct UseDropZoneReturn {
+ /// Files being handled
+ pub files: Signal>,
+ /// Whether the files (dragged by the pointer) are over the drop zone
+ pub is_over_drop_zone: Signal,
+}