From 79dd3b167ef54287c5a83e4729c63b22586481e8 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Tue, 26 Oct 2021 17:23:57 +0800
Subject: [PATCH] feat(H5): judge user activation when choose file

---
 src/core/view/mixins/interact.js              | 23 ++++++++++---------
 .../h5/service/api/media/choose-file.js       |  9 +++++++-
 .../h5/service/api/media/choose-image.js      | 10 ++++++--
 .../h5/service/api/media/choose-video.js      |  9 +++++++-
 .../h5/service/api/media/create_input.js      |  4 ++++
 5 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/core/view/mixins/interact.js b/src/core/view/mixins/interact.js
index e0048a7c7..71666c2e9 100644
--- a/src/core/view/mixins/interact.js
+++ b/src/core/view/mixins/interact.js
@@ -9,21 +9,17 @@ const passiveOptions = supportsPassive ? {
 const vms = []
 let userInteract = 0
 let inited
-function addInteractListener (vm) {
+function addInteractListener (vm = {}) {
   if (!inited) {
     const eventNames = ['touchstart', 'touchmove', 'touchend', 'mousedown', 'mouseup']
     eventNames.forEach(eventName => {
       document.addEventListener(eventName, function () {
-        vms.forEach(vm => {
-          vm.userInteract = true
-          userInteract++
-          setTimeout(() => {
-            userInteract--
-            if (!userInteract) {
-              vm.userInteract = false
-            }
-          }, 0)
-        })
+        !userInteract && vms.forEach(vm => (vm.userInteract = true))
+        userInteract++
+
+        setTimeout(() => {
+          !--userInteract && vms.forEach(vm => (vm.userInteract = false))
+        }, 0)
       }, passiveOptions)
     })
     inited = true
@@ -51,5 +47,10 @@ export default {
   },
   beforeDestroy () {
     removeInteractListener(this)
+  },
+  addInteractListener,
+  // true -> interact
+  getStatus () {
+    return !!userInteract
   }
 }
diff --git a/src/platforms/h5/service/api/media/choose-file.js b/src/platforms/h5/service/api/media/choose-file.js
index 949b8de8c..23562f0cf 100644
--- a/src/platforms/h5/service/api/media/choose-file.js
+++ b/src/platforms/h5/service/api/media/choose-file.js
@@ -1,5 +1,6 @@
 import { fileToUrl } from 'uni-platform/helpers/file'
 import _createInput from './create_input'
+import { interact } from 'uni-mixins'
 
 const {
   invokeCallbackHandler: invoke
@@ -55,5 +56,11 @@ export function chooseFile ({
     // TODO 用户取消选择时，触发 fail，目前尚未找到合适的方法。
   })
 
-  fileInput.click()
+  if (interact.getStatus()) {
+    fileInput.click()
+  } else {
+    invoke(callbackId, {
+      errMsg: 'chooseFile:fail File chooser dialog can only be shown with a user activation.'
+    })
+  }
 }
diff --git a/src/platforms/h5/service/api/media/choose-image.js b/src/platforms/h5/service/api/media/choose-image.js
index ab7e69bb6..3a950f523 100644
--- a/src/platforms/h5/service/api/media/choose-image.js
+++ b/src/platforms/h5/service/api/media/choose-image.js
@@ -1,5 +1,6 @@
 import { fileToUrl } from 'uni-platform/helpers/file'
 import _createInput from './create_input'
+import { interact } from 'uni-mixins'
 
 const {
   invokeCallbackHandler: invoke
@@ -27,7 +28,6 @@ export function chooseImage ({
     type: 'image'
   })
   document.body.appendChild(imageInput)
-
   imageInput.addEventListener('change', function (event) {
     const tempFiles = []
     const fileCount = event.target.files.length
@@ -54,5 +54,11 @@ export function chooseImage ({
     // TODO 用户取消选择时，触发 fail，目前尚未找到合适的方法。
   })
 
-  imageInput.click()
+  if (interact.getStatus()) {
+    imageInput.click()
+  } else {
+    invoke(callbackId, {
+      errMsg: 'chooseImage:fail File chooser dialog can only be shown with a user activation.'
+    })
+  }
 }
diff --git a/src/platforms/h5/service/api/media/choose-video.js b/src/platforms/h5/service/api/media/choose-video.js
index 5b9c70414..e4797c4fe 100644
--- a/src/platforms/h5/service/api/media/choose-video.js
+++ b/src/platforms/h5/service/api/media/choose-video.js
@@ -1,5 +1,6 @@
 import { fileToUrl, revokeObjectURL } from 'uni-platform/helpers/file'
 import _createInput from './create_input'
+import { interact } from 'uni-mixins'
 
 const {
   invokeCallbackHandler: invoke
@@ -67,5 +68,11 @@ export function chooseVideo ({
     // TODO 用户取消选择时，触发 fail，目前尚未找到合适的方法。
   })
 
-  videoInput.click()
+  if (interact.getStatus()) {
+    videoInput.click()
+  } else {
+    invoke(callbackId, {
+      errMsg: 'chooseVideo:fail File chooser dialog can only be shown with a user activation.'
+    })
+  }
 }
diff --git a/src/platforms/h5/service/api/media/create_input.js b/src/platforms/h5/service/api/media/create_input.js
index 50e9bd669..885830323 100644
--- a/src/platforms/h5/service/api/media/create_input.js
+++ b/src/platforms/h5/service/api/media/create_input.js
@@ -1,5 +1,9 @@
 import { updateElementStyle } from 'uni-shared'
 import MIMEType from './MIMEType'
+import { interact } from 'uni-mixins'
+
+interact.addInteractListener()
+
 const ALL = '*'
 
 function isWXEnv () {
-- 
GitLab