Tab-product inspection fixed for android and IOS

OfficeDev · Sep 16, 2024 · 4660b26 · 4660b26
1 parent bdb90f0
commit 4660b26
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/samples/tab-product-inspection/csharp/ProductInspection/Views/Home/ScanProduct.cshtml b/samples/tab-product-inspection/csharp/ProductInspection/Views/Home/ScanProduct.cshtml
@@ -23,7 +23,7 @@
         let productName;
         let image = "";
 
-        // Method to scan barcode
+        //Method to scan barcode
         function scanBarCode() {
             var config = {
                 timeOutIntervalInSec: 30
@@ -67,24 +67,37 @@
             }, config);
         }
 
-        // Method to capture product image
-        function captureImage() {
+        //Method to capture product image  
+        function selectMedia() {
             microsoftTeams.app.initialize().then(() => {
+                
+                var imageProp = {
+                    sources: [microsoftTeams.media.Source.Camera, microsoftTeams.media.Source.Gallery],
+                    startMode: microsoftTeams.media.CameraStartMode.Photo,
+                    ink: false,
+                    cameraSwitcher: false,
+                    textSticker: false,
+                    enableFilter: true
+                };
 
-                // Method to ask for image capture permission and then capture image
-                microsoftTeams.media.captureImage((error, files) => {
-                    // If there's any error, an alert shows the error message/code
+                var mediaInput = {
+                    mediaType: microsoftTeams.media.MediaType.Image,
+                    maxMediaCount: 1,
+                    imageProps: imageProp
+                };
+
+                microsoftTeams.media.selectMedia(mediaInput, function (error, attachments) {
                     if (error) {
                         if (error.message) {
                             alert(" ErrorCode: " + error.errorCode + error.message);
                         } else {
                             alert(" ErrorCode: " + error.errorCode);
                         }
-                    } else if (files) {
-                        image = files[0].content;
-                        $("#productImg").attr("src", "data:image/png;base64," + image);
-                        $("#productStatus").show();
-                    }
+                    } else if (attachments) {
+                         image = attachments[0];
+                            $("#productImg").attr("src", "data:image/png;base64," + image.preview);
+                            $("#productStatus").show();
+                        }
                 });
             });
         }
@@ -93,7 +106,7 @@
             var productStatus = status ? "Approved" : "Rejected";
             const formData = new FormData();
             formData.append('productId', productId);
-            formData.append('image', "data:image/png;base64," + image);
+            formData.append('image', "data:image/png;base64," + image.preview);
             formData.append('status', productStatus);
             $("#productStatus").hide();
             $("#captureImage").hide();
@@ -125,7 +138,7 @@
     <div class="surface">
         <div class="panel">
             <div id="captureImage">
-                <button type="button" class="btn btn-outline-info" onclick="captureImage()">Capture Image</button>
+                <button type="button" class="btn btn-outline-info" onclick="selectMedia()">Capture Image</button>
             </div>
             <div id="productStatus">
                 <label id="scannedText"></label>