react-dropzone - npm Package Compare versions

Comparing version 12.0.1 to 12.0.2

dist/es/index.js

@@ -489,3 +489,3 @@ var _excluded = ["children"],
   useEffect(function () {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+    if (window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()) {
       return function () {};
@@ -687,3 +687,5 @@ }
   var openFileDialog = useCallback(function () {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+    // No point to use FS access APIs if context is not secure
+    // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection
+    if (window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()) {
       dispatch({
@@ -690,0 +692,0 @@ type: "openDialog"

examples/accept/README.md

@@ -10,4 +10,11 @@ By providing `accept` prop you can make the dropzone accept specific file types and reject the others.
 
-For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
+For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input.
 
+**IMPORTANT** As of [v12.0.0](https://github.com/react-dropzone/react-dropzone/releases/tag/v12.0.0), there has been some changes that affect how `accept` works.
+See [file dialog cancel callback](../../README.md#file-dialog-cancel-callback) to read more about why this change was introduced. In summary:
+1. In browsers that **do not support** the FS access API, the `accept` attr works exactly the same as in previous versions of react-dropozone, for both file picker and dag 'n' drop
+2. In browsers that **support** the FS access API, when passing file extensions to `accept` (e.g `".jpg,.png"`), the file picker will not apply those filters, but drag 'n' drop will - though, the [browser limitations](#browser-limitations) described in this document still apply
+3. If you want the same behaviour in all browsers, regardless of using the FS access API or not, you need to use MIME types - [browser limitations](#browser-limitations) still apply
+4. The use of FS access API can be turned off via `useDropzone({useFsAccessApi: false})`
+
 ```jsx harmony
@@ -24,3 +31,3 @@ import React from 'react';
   } = useDropzone({
-    accept: 'image/jpeg, image/png'
+    accept: 'image/jpeg,image/png'
   });
@@ -115,3 +122,3 @@
   } = useDropzone({
-    accept: 'image/jpeg, image/png'
+    accept: 'image/jpeg,image/png'
   });
@@ -118,0 +125,0 @@

package.json

@@ -33,7 +33,7 @@ {
       "path": "dist/index.js",
-      "limit": "7 KB"
+      "limit": "7.5 KB"
     },
     {
       "path": "dist/es/index.js",
-      "limit": "7 KB"
+      "limit": "7.5 KB"
     }
@@ -175,3 +175,3 @@ ],
   "typings": "typings/react-dropzone.d.ts",
-  "version": "12.0.1",
+  "version": "12.0.2",
   "engines": {
@@ -178,0 +178,0 @@ "node": ">= 10.13"

README.md

@@ -348,2 +348,6 @@ ![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png)
 
+Also keep in mind that the FS access API can only be used in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
+
+**NOTE** You can disable using the FS access API with the `useFsAccessApi` property: `useDropzone({useFsAccessApi: false})`.
+
 ## Supported Browsers
@@ -350,0 +354,0 @@ We use [browserslist](https://github.com/browserslist/browserslist) config to state the browser support for this lib, so check it out on [browserslist.dev](https://browserslist.dev/?q=ZGVmYXVsdHM%3D).

src/index.js

@@ -471,3 +471,7 @@ /* eslint prefer-template: 0 */
   useEffect(() => {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+    if (
+      window.isSecureContext &&
+      useFsAccessApi &&
+      canUseFileSystemAccessAPI()
+    ) {
       return () => {};
@@ -682,3 +686,9 @@ }
   const openFileDialog = useCallback(() => {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+    // No point to use FS access APIs if context is not secure
+    // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection
+    if (
+      window.isSecureContext &&
+      useFsAccessApi &&
+      canUseFileSystemAccessAPI()
+    ) {
       dispatch({ type: "openDialog" });
@@ -685,0 +695,0 @@ onFileDialogOpenCb();

testSetup.js

 // https://www.npmjs.com/package/jest-dom
 require("@testing-library/jest-dom/extend-expect");
+
+Object.defineProperty(global, "isSecureContext", {
+  value: true,
+  writable: true,
+  enumerable: true,
+});

No alert changes

Improved metrics

Total package byte prevSize

405253

1.03%

Lines of code

6396

0.98%

Number of lines in readme file

436

0.93%

No dependency changes