1 Reply Latest reply on Sep 16, 2017 6:30 AM by kerrishotts

    how to open gallery in using inappbrowser plugin?

    tarnumk57253864

      Dear sir/Mam,

      Currently i am working how to open gallery in hybrid application.

      This code add in InAppBrowser link then this code not working.

      I am also the add  camera plugin.

       

       

      for my code.

      <!DOCTYPE html>

      <html>

       

      <head>

          <meta charset="utf-8" />

          <meta name="format-detection" content="telephone=no" />

          <meta name="msapplication-tap-highlight" content="no" />

          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

       

          <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

       

       

          <link rel="stylesheet" type="text/css" href="css/index.css" />

          <title>Hello World</title>

      </head>

       

      <body>

         

          <script type="text/javascript" src="cordova.js"></script>

          <script type="text/javascript" src="js/index.js"></script>

           <script type="text/javascript" src="js/jquery.js"></script>

          <script type="text/javascript">

              app.initialize();

          </script>

              <style type="text/css">

              div {border: 1px solid black;}

              input {width: 100%;}

          </style>

          <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>

          <script type="text/javascript" charset="utf-8">

         

          var deviceReady = false;

       

          /**

           * Take picture with camera

           */

          function takePicture() {

              navigator.camera.getPicture(

                  function(uri) {

                      var img = document.getElementById('camera_image');

                      img.style.visibility = "visible";

                      img.style.display = "block";

                      img.src = uri;

                      document.getElementById('camera_status').innerHTML = "Success";

                  },

                  function(e) {

                      console.log("Error getting picture: " + e);

                      document.getElementById('camera_status').innerHTML = "Error getting picture.";

                  },

                  { quality: 20, destinationType: navigator.camera.DestinationType.FILE_URI});

          };

       

          /**

           * Select picture from library

           */

          function selectPicture() {

              navigator.camera.getPicture(

                  function(uri) {

                      var img = document.getElementById('camera_image');

                      img.style.visibility = "visible";

                      img.style.display = "block";

                      img.src = uri;

                      document.getElementById('camera_status').innerHTML = "Success";

                  },

                  function(e) {

                      console.log("Error getting picture: " + e);

                      document.getElementById('camera_status').innerHTML = "Error getting picture.";

                  },

                  { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});

          };

         

          /**

           * Upload current picture

           */

          function uploadPicture() {

             

              // Get URI of picture to upload

              var img = document.getElementById('camera_image');

              var imageURI = img.src;

              if (!imageURI || (img.style.display == "none")) {

                  document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";

                  return;

              }

             

              // Verify server has been entered

              server = document.getElementById('serverUrl').value;

              if (server) {

                 

                  // Specify transfer options

                  var options = new FileUploadOptions();

                  options.fileKey="file";

                  options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);

                  options.mimeType="image/jpeg";

                  options.chunkedMode = false;

                  options.headers = {

                  Connection: "close"

                  };

       

                  // Transfer picture to server

                  var ft = new FileTransfer();

                  ft.upload(imageURI,server, function(r) {

                      document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";               

                  }, function(error) {

                      document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               

                  }, options,true);

              }

          }

       

          /**

           * View pictures uploaded to the server

           */

          function viewUploadedPictures() {

             

              // Get server URL

              server = document.getElementById('serverUrl').value;

              if (server) {

                 

                  // Get HTML that lists all pictures on server using XHR   

                  var xmlhttp = new XMLHttpRequest();

       

                  // Callback function when XMLHttpRequest is ready

                  xmlhttp.onreadystatechange=function(){

                      if(xmlhttp.readyState === 4){

       

                          // HTML is returned, which has pictures to display

                          if (xmlhttp.status === 200) {

                              document.getElementById('server_images').innerHTML = xmlhttp.responseText;

                          }

       

                          // If error

                          else {

                              document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";

                          }

                      }

                  };

                  xmlhttp.open("GET", server , true);

                  xmlhttp.send();          

              }   

          }

         

          /**

           * Function called when page has finished loading.

           */

          function init() {

              document.addEventListener("deviceready", function() {deviceReady = true;}, false);

              window.setTimeout(function() {

                  if (!deviceReady) {

                      alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");

                  }

              },2000);

          }

       

          </script>

       

        </head>

        <body onload="init();">

          <h3>PhoneGap Camera Upload Demo</h3>

         

          <div>

              <h3>Server URL for upload.php:</h3>

              <input id="serverUrl" type="text" value="http://192.168.0.100:8080/fileupload/go/UploadServlet" />

          </div>

          <br/>

       

          <!-- Camera -->

          <div>

              <h3>Camera:</h3>

              <b>Status:</b> <span id="camera_status"></span><br>

              <b>Image:</b> <img style="width:120px;visibility:hidden;display:none;" id="camera_image" src="" />

          </div>

             

          <!-- Actions -->

          <div>

              <input type="button" onclick="takePicture();" value="Take Picture" /><br/>

              <input type="button" onclick="selectPicture();" value="Select Picture from Library" /><br/>

              <input type="button" onclick="uploadPicture();" value="Upload Picture" />

          </div>

          <br/>

         

          <!-- Server pictures -->

          <div>

              <h3>Server:</h3>

              <b>Images on server:</b>

              <div id="server_images"></div>

          </div>

       

          <!-- Actions -->

          <div>

              <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />

          </div>

         

      </body>

       

      </html>