phlex-reactive 0.16.6 → 0.16.7

data/app/javascript/phlex/reactive/runtime.js

@@ -1490,16 +1490,36 @@ function previewFile(input, args, resolveTargets) {
   // `invalid` event fired into the app's own listeners.
   const files = [...(args.valid === true && input.validity?.valid === false ? [] : (input.files ?? []))]
   const accepts = previewAccepts(input, args.accept)
-  const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
-  // Only an image is painted: a listed PDF clears the preview, unrefused.
-  let file = listed.find((f) => f.type.startsWith("image/"))
-  // A refused file (issue #391) clears like an empty pick and says why. The
-  // input keeps its files and its validity: the page owns the reset. Size is
-  // read BEFORE an object URL exists, so an over-size file never gets one.
-  let reason = files.length > 0 && listed.length === 0 ? "type" : null
-  if (file && Number.isInteger(args.max_bytes) && file.size > args.max_bytes) reason = "size"
-  const refused = reason === "size" ? file : files[0]
-  if (reason) file = null
+  // Size is read BEFORE an object URL exists, so an over-size file never gets one.
+  const oversize = (f) => Number.isInteger(args.max_bytes) && f.size > args.max_bytes
+  const rejected = []
+  let file
+  if (args.per_file === true && input.multiple) {
+    // Several files (issue #439): every file is checked, accept then
+    // max_bytes. The refused ones leave input.files here, synchronously, so an
+    // action bound after the op on the same event posts only the kept ones.
+    const kept = files.filter((f, index) => {
+      const reason = typeof f?.type === "string" && accepts(f) ? oversize(f) && "size" : "type"
+      if (reason) rejected.push({ reason, file: f, index })
+      return !reason
+    })
+    // remaining: the files the input keeps, and so the ones an action posts.
+    const remaining = rejected.length > 0 && !keepFiles(input, kept) ? files.length : kept.length
+    for (const detail of rejected) detail.remaining = remaining
+    file = kept.find((f) => f.type.startsWith("image/"))
+  } else {
+    const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
+    // Only an image is painted: a listed PDF clears the preview, unrefused.
+    file = listed.find((f) => f.type.startsWith("image/"))
+    // A refused file (issue #391) clears like an empty pick and says why. The
+    // input keeps its files and its validity: the page owns the reset.
+    let reason = files.length > 0 && listed.length === 0 ? "type" : null
+    if (file && oversize(file)) reason = "size"
+    if (reason) {
+      rejected.push({ reason, file: reason === "size" ? file : files[0] })
+      file = null
+    }
+  }
   forgetPreview(img)
   if (file) {
     const url = URL.createObjectURL(file)
@@ -1516,9 +1536,23 @@ function previewFile(input, args, resolveTargets) {
   if (args.name != null) {
     for (const node of resolveTargets({ ...args, to: args.name })) node.textContent = file ? file.name : ""
   }
-  if (reason) {
-    input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail: { reason, file: refused } }))
+  for (const detail of rejected) input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail }))
+}
+
+// Rebuild input.files from the kept files (issue #439); true once it did. A
+// DataTransfer is the one way to make a FileList; without one the refused
+// files stay in the input (the rejections still fire), and a verbose root is told.
+function keepFiles(input, kept) {
+  if (typeof DataTransfer !== "function") {
+    if (input.closest?.('[data-reactive-verbose="true"], [data-reactive-debug="true"]')) {
+      warnPreview("per_file: has no DataTransfer to drop the refused files from the input")
+    }
+    return false
   }
+  const transfer = new DataTransfer()
+  for (const f of kept) transfer.items.add(f)
+  input.files = transfer.files
+  return true
 }
 
 // Which files the page takes: an image by default. accept: true reads the

data/lib/phlex/reactive/js.rb

@@ -329,8 +329,21 @@ module Phlex
       #   input(type: "file", id: "photo-file", accept: "image/png,image/jpeg",
       #     **on_client(:change, js.preview_file("#photo-file", into: "#photo",
       #       wrap: "#photo-frame", max_bytes: 2_000_000, accept: true)))
-
-      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil)
+      #
+      # Several files (issue #439): `per_file: true` on an input with
+      # `multiple` checks EVERY file (accept, then max_bytes), rebuilds
+      # input.files from the accepted ones (synchronously, so an
+      # `on(:action, event: "change")` mixed in AFTER the op posts only those),
+      # dispatches one `reactive:file-rejected` per refused file
+      # (detail.reason, file, index — its place in the pick — and remaining,
+      # how many files the input keeps), and paints the first accepted image.
+      # A single input, or per_file: omitted, keeps the behaviour above.
+      #   input(type: "file", id: "pick", name: "file", multiple: true, accept: "image/png",
+      #     **mix(on_client(:change, js.preview_file("#pick", into: "#shot", max_bytes: 1_000_000,
+      #       accept: true, per_file: true)), on(:upload, event: "change")))
+
+      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil,
+                       per_file: false)
         if [:root, ROOT_SENTINEL].include?(to)
           raise ArgumentError,
             "#{self.class}: preview_file reads a file input, not the component root — " \
@@ -344,6 +357,7 @@ module Phlex
         args["wrap"] = preview_selector(:wrap, wrap) unless wrap.nil?
         args["max_bytes"] = preview_max_bytes(max_bytes) unless max_bytes.nil?
         args["accept"] = preview_accept(accept) unless accept.nil? || accept == false
+        args["per_file"] = true if preview_per_file(per_file)
         append("preview_file", args.freeze)
       end
 
@@ -560,6 +574,15 @@ module Phlex
           "#{self.class}: preview_file max_bytes: must be a positive Integer, got #{bytes.inspect}"
       end
 
+      # per_file: is a strict boolean (nil, like the other keywords, means
+      # omitted): a typo'd truthy value must not change which files an upload posts.
+      def preview_per_file(per_file)
+        return per_file == true if [true, false, nil].include?(per_file)
+
+        raise ArgumentError,
+          "#{self.class}: preview_file per_file: must be true, false or nil, got #{per_file.inspect}"
+      end
+
       # true reads the input's accept attribute; a String is the list itself.
       def preview_accept(accept)
         return accept if accept == true || (accept.is_a?(String) && !accept.strip.empty?)

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.6"
+    VERSION = "0.16.7"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.16.6
+  version: 0.16.7
 platform: ruby
 authors:
 - Mikael Henriksson