From 315dac487874f8ab2e2cb8f94b404d013ae2c744 Mon Sep 17 00:00:00 2001
From: Ningxin Hu <ningxin.hu@intel.com>
Date: Wed, 27 Sep 2017 14:45:33 +0800
Subject: [PATCH] Only accept images to upload for OpenCV.js tutorials

---
 doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html     | 2 +-
 doc/js_tutorials/js_assets/js_basic_ops_roi.html                | 2 +-
 doc/js_tutorials/js_assets/js_canny.html                        | 2 +-
 doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html         | 2 +-
 doc/js_tutorials/js_assets/js_colorspaces_inRange.html          | 2 +-
 .../js_assets/js_contour_features_approxPolyDP.html             | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_area.html        | 2 +-
 .../js_assets/js_contour_features_boundingRect.html             | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_convexHull.html  | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html  | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_fitLine.html     | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html | 2 +-
 .../js_assets/js_contour_features_minEnclosingCircle.html       | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_moments.html     | 2 +-
 doc/js_tutorials/js_assets/js_contour_features_perimeter.html   | 2 +-
 doc/js_tutorials/js_assets/js_contour_properties_transpose.html | 2 +-
 doc/js_tutorials/js_assets/js_contours_begin_contours.html      | 2 +-
 .../js_assets/js_contours_more_functions_convexityDefects.html  | 2 +-
 .../js_assets/js_contours_more_functions_shape.html             | 2 +-
 doc/js_tutorials/js_assets/js_face_detection.html               | 2 +-
 doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html       | 2 +-
 doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html    | 2 +-
 doc/js_tutorials/js_assets/js_filtering_blur.html               | 2 +-
 doc/js_tutorials/js_assets/js_filtering_filter.html             | 2 +-
 doc/js_tutorials/js_assets/js_filtering_medianBlur.html         | 2 +-
 doc/js_tutorials/js_assets/js_fourier_transform_dft.html        | 2 +-
 .../js_geometric_transformations_getAffineTransform.html        | 2 +-
 .../js_assets/js_geometric_transformations_resize.html          | 2 +-
 .../js_geometric_transformations_rotateWarpAffine.html          | 2 +-
 .../js_assets/js_geometric_transformations_warpAffine.html      | 2 +-
 .../js_assets/js_geometric_transformations_warpPerspective.html | 2 +-
 doc/js_tutorials/js_assets/js_grabcut_grabCut.html              | 2 +-
 doc/js_tutorials/js_assets/js_gradients_Laplacian.html          | 2 +-
 doc/js_tutorials/js_assets/js_gradients_Sobel.html              | 2 +-
 doc/js_tutorials/js_assets/js_gradients_absSobel.html           | 2 +-
 doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html    | 2 +-
 .../js_assets/js_histogram_equalization_createCLAHE.html        | 2 +-
 .../js_assets/js_histogram_equalization_equalizeHist.html       | 2 +-
 doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html   | 2 +-
 doc/js_tutorials/js_assets/js_houghlines_HoughLines.html        | 2 +-
 doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html       | 2 +-
 doc/js_tutorials/js_assets/js_image_display.html                | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html   | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_closing.html    | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_dilate.html     | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_erode.html      | 2 +-
 .../js_assets/js_morphological_ops_getStructuringElement.html   | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_gradient.html   | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_opening.html    | 2 +-
 doc/js_tutorials/js_assets/js_morphological_ops_topHat.html     | 2 +-
 doc/js_tutorials/js_assets/js_pyramids_pyrDown.html             | 2 +-
 doc/js_tutorials/js_assets/js_pyramids_pyrUp.html               | 2 +-
 doc/js_tutorials/js_assets/js_setup_usage.html                  | 2 +-
 .../js_assets/js_template_matching_matchTemplate.html           | 2 +-
 .../js_assets/js_thresholding_adaptiveThreshold.html            | 2 +-
 doc/js_tutorials/js_assets/js_thresholding_threshold.html       | 2 +-
 doc/js_tutorials/js_assets/js_watershed_background.html         | 2 +-
 doc/js_tutorials/js_assets/js_watershed_distanceTransform.html  | 2 +-
 doc/js_tutorials/js_assets/js_watershed_foreground.html         | 2 +-
 doc/js_tutorials/js_assets/js_watershed_threshold.html          | 2 +-
 doc/js_tutorials/js_assets/js_watershed_watershed.html          | 2 +-
 61 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html b/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
index 152db303c3..448269c323 100644
--- a/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
+++ b/doc/js_tutorials/js_assets/js_basic_ops_copymakeborder.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_basic_ops_roi.html b/doc/js_tutorials/js_assets/js_basic_ops_roi.html
index 6d08f8729d..c23390b3c8 100644
--- a/doc/js_tutorials/js_assets/js_basic_ops_roi.html
+++ b/doc/js_tutorials/js_assets/js_basic_ops_roi.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_canny.html b/doc/js_tutorials/js_assets/js_canny.html
index 7101b73787..cf06df66d3 100644
--- a/doc/js_tutorials/js_assets/js_canny.html
+++ b/doc/js_tutorials/js_assets/js_canny.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html b/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
index db0b474116..2eb60d238a 100644
--- a/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
+++ b/doc/js_tutorials/js_assets/js_colorspaces_cvtColor.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_colorspaces_inRange.html b/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
index 1574085fa4..6d8ec0630f 100644
--- a/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
+++ b/doc/js_tutorials/js_assets/js_colorspaces_inRange.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html b/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
index ed3aafc563..4323fe8975 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_approxPolyDP.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_area.html b/doc/js_tutorials/js_assets/js_contour_features_area.html
index 5aff938fb9..ffb6379393 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_area.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_area.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <p><strong>The area is: </strong><span id="areaOutput"></span></p>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html b/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
index 0fc168867f..44ff22eb16 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_boundingRect.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_convexHull.html b/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
index 67b83f728b..0275569cd2 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_convexHull.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html b/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
index 4e0efdecf0..9b66f0bb70 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_fitEllipse.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_fitLine.html b/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
index 4a1fa7623d..d36434d16f 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_fitLine.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html b/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
index 518c97a26c..837f17a8aa 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_minAreaRect.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html b/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
index 1bfd1fb6ea..c3253cabfd 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_minEnclosingCircle.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_moments.html b/doc/js_tutorials/js_assets/js_contour_features_moments.html
index f9f2b049dd..a4ed3a3abf 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_moments.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_moments.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <p><strong>The m00 is: </strong><span id="momentsOutput"></span></p>
diff --git a/doc/js_tutorials/js_assets/js_contour_features_perimeter.html b/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
index c773cc9ff5..477768ec14 100644
--- a/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
+++ b/doc/js_tutorials/js_assets/js_contour_features_perimeter.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <p><strong>The perimeter is: </strong><span id="perimeterOutput"></span></p>
diff --git a/doc/js_tutorials/js_assets/js_contour_properties_transpose.html b/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
index 04e8c37477..54c8195c40 100644
--- a/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
+++ b/doc/js_tutorials/js_assets/js_contour_properties_transpose.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contours_begin_contours.html b/doc/js_tutorials/js_assets/js_contours_begin_contours.html
index 7fe9a94622..67255cf9f5 100644
--- a/doc/js_tutorials/js_assets/js_contours_begin_contours.html
+++ b/doc/js_tutorials/js_assets/js_contours_begin_contours.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html b/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
index 5df0762a2b..7fc6a88352 100644
--- a/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
+++ b/doc/js_tutorials/js_assets/js_contours_more_functions_convexityDefects.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html b/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
index 529b40e5eb..06d448f68c 100644
--- a/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
+++ b/doc/js_tutorials/js_assets/js_contours_more_functions_shape.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_face_detection.html b/doc/js_tutorials/js_assets/js_face_detection.html
index b92c10747e..7a3033a31d 100644
--- a/doc/js_tutorials/js_assets/js_face_detection.html
+++ b/doc/js_tutorials/js_assets/js_face_detection.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html b/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
index c204e50253..7bb9064b21 100644
--- a/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_GaussianBlur.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html b/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
index 3144ae6903..dd8ea1ebc6 100644
--- a/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
+++ b/doc/js_tutorials/js_assets/js_filtering_bilateralFilter.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_filtering_blur.html b/doc/js_tutorials/js_assets/js_filtering_blur.html
index cad49249c3..e1c3c525b3 100644
--- a/doc/js_tutorials/js_assets/js_filtering_blur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_blur.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_filtering_filter.html b/doc/js_tutorials/js_assets/js_filtering_filter.html
index dffa65ebd2..7d31d0a34e 100644
--- a/doc/js_tutorials/js_assets/js_filtering_filter.html
+++ b/doc/js_tutorials/js_assets/js_filtering_filter.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_filtering_medianBlur.html b/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
index 26e4eeb845..e3ec63b46f 100644
--- a/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
+++ b/doc/js_tutorials/js_assets/js_filtering_medianBlur.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_fourier_transform_dft.html b/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
index 53e7cae76c..6551b542d1 100644
--- a/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
+++ b/doc/js_tutorials/js_assets/js_fourier_transform_dft.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html b/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
index c0eb3099ca..5d3025e2c8 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_getAffineTransform.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html b/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
index ab0a8793ec..27a4105dc3 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_resize.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html b/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
index 88df91261c..f798926836 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_rotateWarpAffine.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html b/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
index 047cbd8852..3ba1759da2 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_warpAffine.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html b/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
index 69588518fc..2699003bf5 100644
--- a/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
+++ b/doc/js_tutorials/js_assets/js_geometric_transformations_warpPerspective.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_grabcut_grabCut.html b/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
index 732d9ef8e2..e83ac71769 100644
--- a/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
+++ b/doc/js_tutorials/js_assets/js_grabcut_grabCut.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_gradients_Laplacian.html b/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
index 198ee091c5..a37f9b401b 100644
--- a/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
+++ b/doc/js_tutorials/js_assets/js_gradients_Laplacian.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_gradients_Sobel.html b/doc/js_tutorials/js_assets/js_gradients_Sobel.html
index 9ef8efa055..38296906d1 100644
--- a/doc/js_tutorials/js_assets/js_gradients_Sobel.html
+++ b/doc/js_tutorials/js_assets/js_gradients_Sobel.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutputx"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_gradients_absSobel.html b/doc/js_tutorials/js_assets/js_gradients_absSobel.html
index 86d6bb306f..7fba5e5e44 100644
--- a/doc/js_tutorials/js_assets/js_gradients_absSobel.html
+++ b/doc/js_tutorials/js_assets/js_gradients_absSobel.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput8U"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html b/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
index ef2383adda..e1b3a28df5 100644
--- a/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
+++ b/doc/js_tutorials/js_assets/js_histogram_begins_calcHist.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html b/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
index a739095e4b..017326d505 100644
--- a/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
+++ b/doc/js_tutorials/js_assets/js_histogram_equalization_createCLAHE.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html b/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
index de6a6779b8..e8db41d53f 100644
--- a/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
+++ b/doc/js_tutorials/js_assets/js_histogram_equalization_equalizeHist.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html b/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
index 20243865f1..2af7829f6a 100644
--- a/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
+++ b/doc/js_tutorials/js_assets/js_houghcircles_HoughCirclesP.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html b/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
index 1a382673cc..2153881426 100644
--- a/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
+++ b/doc/js_tutorials/js_assets/js_houghlines_HoughLines.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html b/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
index db499ad410..64fd1e7231 100644
--- a/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
+++ b/doc/js_tutorials/js_assets/js_houghlines_HoughLinesP.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_image_display.html b/doc/js_tutorials/js_assets/js_image_display.html
index a309912431..83b5c148f5 100644
--- a/doc/js_tutorials/js_assets/js_image_display.html
+++ b/doc/js_tutorials/js_assets/js_image_display.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html b/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
index 063dd67528..20235fbe30 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_blackHat.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_closing.html b/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
index 585208f391..d77bb9128f 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_closing.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html b/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
index ed578fb06b..ef08404fbc 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_dilate.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_erode.html b/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
index 86fe282477..19677db772 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_erode.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html b/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
index 4a90f8c6ea..edcb9ce7d7 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_getStructuringElement.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html b/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
index 46d5c3c367..3851c438ed 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_gradient.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_opening.html b/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
index 1afd34037f..582e86f8b9 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_opening.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html b/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
index 6781b3856b..0c07151358 100644
--- a/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
+++ b/doc/js_tutorials/js_assets/js_morphological_ops_topHat.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html b/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
index c664d4a769..e80beba724 100644
--- a/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
+++ b/doc/js_tutorials/js_assets/js_pyramids_pyrDown.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html b/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
index 16b77f0fdf..e7e9572edb 100644
--- a/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
+++ b/doc/js_tutorials/js_assets/js_pyramids_pyrUp.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_setup_usage.html b/doc/js_tutorials/js_assets/js_setup_usage.html
index fce929027e..6d4a6aadf5 100644
--- a/doc/js_tutorials/js_assets/js_setup_usage.html
+++ b/doc/js_tutorials/js_assets/js_setup_usage.html
@@ -11,7 +11,7 @@
 <div>
     <div class="inputoutput">
         <img id="imageSrc" alt="No Image" />
-        <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">imageSrc <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput" ></canvas>
diff --git a/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html b/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
index 0532c7d7f4..0d218d452f 100644
--- a/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
+++ b/doc/js_tutorials/js_assets/js_template_matching_matchTemplate.html
@@ -22,7 +22,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="imageCanvasInput"></canvas>
-        <div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">imageCanvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="templateCanvasInput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html b/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
index a7a2a3e817..2ce8854015 100644
--- a/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
+++ b/doc/js_tutorials/js_assets/js_thresholding_adaptiveThreshold.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_thresholding_threshold.html b/doc/js_tutorials/js_assets/js_thresholding_threshold.html
index 24cb9ab116..b36d5987f2 100644
--- a/doc/js_tutorials/js_assets/js_thresholding_threshold.html
+++ b/doc/js_tutorials/js_assets/js_thresholding_threshold.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_watershed_background.html b/doc/js_tutorials/js_assets/js_watershed_background.html
index 243878876e..fb6a679732 100644
--- a/doc/js_tutorials/js_assets/js_watershed_background.html
+++ b/doc/js_tutorials/js_assets/js_watershed_background.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html b/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
index e3857e4761..6f8056de5b 100644
--- a/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
+++ b/doc/js_tutorials/js_assets/js_watershed_distanceTransform.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_watershed_foreground.html b/doc/js_tutorials/js_assets/js_watershed_foreground.html
index c41f156802..75e41ed424 100644
--- a/doc/js_tutorials/js_assets/js_watershed_foreground.html
+++ b/doc/js_tutorials/js_assets/js_watershed_foreground.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_watershed_threshold.html b/doc/js_tutorials/js_assets/js_watershed_threshold.html
index b0f118e360..5280c9541e 100644
--- a/doc/js_tutorials/js_assets/js_watershed_threshold.html
+++ b/doc/js_tutorials/js_assets/js_watershed_threshold.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>
diff --git a/doc/js_tutorials/js_assets/js_watershed_watershed.html b/doc/js_tutorials/js_assets/js_watershed_watershed.html
index bab7fa7bd4..1094af2348 100644
--- a/doc/js_tutorials/js_assets/js_watershed_watershed.html
+++ b/doc/js_tutorials/js_assets/js_watershed_watershed.html
@@ -21,7 +21,7 @@
 <div>
     <div class="inputoutput">
         <canvas id="canvasInput"></canvas>
-        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" /></div>
+        <div class="caption">canvasInput <input type="file" id="fileInput" name="file" accept="image/*" /></div>
     </div>
     <div class="inputoutput">
         <canvas id="canvasOutput"></canvas>