Add "multiple files" toggle

Andrei Pfeiffer · GitHub
1 parent 8e34ebf2
Showing 1 changed file with 21 additions and 2 deletions Show diff stats
docs/index.html
@@ -20,10 +20,11 @@
       align-items: center;
       justify-content: center;
     }
+
     strong {
       line-height: 2;
     }
-</style>
+  </style>
 </head>
  
 <body>
@@ -31,6 +32,11 @@
   <form action="#">
     <p>
       <label>
+        <input type="checkbox" id="toggle-multiple" /> multiple files
+      </label>
+    </p>
+    <p>
+      <label>
         <strong>Default</strong> (no accept attr)
         <br>
         <input type="file" />
@@ -62,6 +68,19 @@
     </p>
   </form>
  
+  <script>
+    const $toggleMultiple = document.getElementById("toggle-multiple");
+    $toggleMultiple.addEventListener("change", event => {
+      document.querySelectorAll("input[type='file']").forEach(input => {
+        if (event.target.checked) {
+          input.setAttribute("multiple", true);
+        } else {
+          input.removeAttribute("multiple");
+        }
+      });
+    })
+  </script>
+
 </body>
  
-</html>
 \ No newline at end of file
+</html>
...	...	@@ -20,10 +20,11 @@
20	20	align-items: center;
21	21	justify-content: center;
22	22	}
	23	+
23	24	strong {
24	25	line-height: 2;
25	26	}
26		-</style>
	27	+ </style>
27	28	</head>
28	29
29	30	<body>
...	...	@@ -31,6 +32,11 @@
31	32	<form action="#">
32	33	<p>
33	34	<label>
	35	+ <input type="checkbox" id="toggle-multiple" /> multiple files
	36	+ </label>
	37	+ </p>
	38	+ <p>
	39	+ <label>
34	40	<strong>Default</strong> (no accept attr)
35	41	<br>
36	42	<input type="file" />
...	...	@@ -62,6 +68,19 @@
62	68	</p>
63	69	</form>
64	70
	71	+ <script>
	72	+ const $toggleMultiple = document.getElementById("toggle-multiple");
	73	+ $toggleMultiple.addEventListener("change", event => {
	74	+ document.querySelectorAll("input[type='file']").forEach(input => {
	75	+ if (event.target.checked) {
	76	+ input.setAttribute("multiple", true);
	77	+ } else {
	78	+ input.removeAttribute("multiple");
	79	+ }
	80	+ });
	81	+ })
	82	+ </script>
	83	+
65	84	</body>
66	85
67		-</html>
68	86	\ No newline at end of file
	87	+</html>
...	...