Only accept images to upload for OpenCV.js tutorials

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>