Merge pull request #9728 from huningxin:fix_9727

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

doc/js_tutorials/js_assets/utils.js

@@ -12,7 +12,7 @@ function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
             onloadCallback();
         });
         script.addEventListener('error', () => {
-            this.printError('Failed to load ' + OPENCV_URL);
+            self.printError('Failed to load ' + OPENCV_URL);
         });
         script.src = OPENCV_URL;
         let node = document.getElementsByTagName('script')[0];
@@ -98,8 +98,11 @@ function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
     this.addFileInputHandler = function(fileInputId, canvasId) {
         let inputElement = document.getElementById(fileInputId);
         inputElement.addEventListener('change', (e) => {
-            let imgUrl = URL.createObjectURL(e.target.files[0]);
-            loadImageToCanvas(imgUrl, canvasId);
+            let files = e.target.files;
+            if (files.length > 0) {
+                let imgUrl = URL.createObjectURL(files[0]);
+                self.loadImageToCanvas(imgUrl, canvasId);
+            }
         }, false);
     };