In the application below, the drop method is never called. The drop target (div2) is indicated by cancelling event in dragEnter and dragOver events but drop is not triggered. HTML and .dart are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dandd</title>
<link rel="stylesheet" href="dandd.css">
</head>
<body>
<h1>Drag and drop</h1>
<p>Hello world from Dart!</p>
<div>
<label id='lbl' draggable='true' style='border: 1px solid; '>div1</label>
</div>
<p></p>
<div id='div2'>
<label>div2</label>
</div>
<script type="application/dart" src='dandd.dart > </script>
<script type='text/javascript'
src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
and here is dart file
import 'dart:html';
void main() {
query('#lbl')
..on.dragStart.add(onDragStart)
..on.dragEnd.add(onDragEnd);
query('#div2')
..on.dragEnter.add(onDragEnter)
..on.dragOver.add(onDragOver)
..on.drop.add(onDrop);
query('#div2')
..on.dragLeave.add(onDragLeave);
}
onDragStart(MouseEvent e) {
print('started');
var lbl = e.target as LabelElement;
lbl.style.opacity = '0.4';
e.dataTransfer.setData('text', lbl.id);
}
onDragEnd(MouseEvent e) {
var lbl = e.target as LabelElement;
lbl.style.opacity = '1.0';
print('drag end called');
}
onDragEnter(MouseEvent e) {
e.stopPropagation();
e.dataTransfer.dropEffect = 'move';
var x = e.target as DivElement;
x.classes.add('blueborder');
}
onDragOver(MouseEvent e) {
e.stopPropagation();
e.dataTransfer.dropEffect = 'move';
var x = e.target as DivElement;
x.classes.add('blueborder');
}
onDragLeave(MouseEvent e) {
var x = e.target as DivElement;
x.classes.remove('blueborder');
}
onDrop(MouseEvent e){
print('on drop called');
var x = e.target as DivElement;
x.classes.remove('blueborder');
String sid = e.dataTransfer.getData('text');
var v = query('#{sid}');
x.children.add(v);
}
It looks like a bug. See issue 6646.
Related
I'm trying to create a simple webapp button that it will duplicate sheet in Google sheets , I created the button in HTML and linked it to run the code when its clicked ! but it doesnt seem to work !, can someone tell me what I did wrong ?
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="btn">Create</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.userClicked();
}
</script>
</body>
</html>
And here is the code for duplication :
function doGet() {
return HtmlService.createHtmlOutputFromFile('page');
}
function userClicked() {
SpreadsheetApp.getActiveSpreadsheet().duplicateActiveSheet();
var myValue = SpreadsheetApp.getActiveSheet().getRange("M1").getDisplayValue();
SpreadsheetApp.getActiveSpreadsheet().renameActiveSheet("Daily Report " + myValue);
}
Duplicating & Deleting Sheets from a WebApp
Code.gs:
function dupSheet(dObj) {
var ss=SpreadsheetApp.getActive();
var sh=ss.setActiveSheet(ss.getSheetByName(dObj.name));
ss.duplicateActiveSheet();
var name="Daily Report " + sh.getRange("A1").getDisplayValue();
if(!sheetExists(name)) {
ss.renameActiveSheet("Daily Report " + sh.getRange("A1").getDisplayValue());
}
dObj['sA']=getSheetNames().sA;
return dObj;
}
function getSheetNames() {
var ss=SpreadsheetApp.getActive();
var shts=ss.getSheets();
var sObj={sA:[]};
shts.forEach(function(sh){
sObj.sA.push(sh.getName());
})
return sObj;
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('dup');
}
function delSheet(dObj) {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName(dObj.name);
ss.deleteSheet(sh);
dObj['sA']=getSheetNames().sA;
return dObj;
}
function sheetExists(name) {
var ss=SpreadsheetApp.getActive();
var sA=ss.getSheets();
for(var i=0;i<sA.length;i++) {
if(name==sA[i].getName()) {
return true
}
}
return false;
}
dup.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(sObj){
var select=document.getElementById('sel1');
sObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<sObj.sA.length;i++) {
select.options[i]=new Option(sObj.sA[i],sObj.sA[i]);
}
})
.getSheetNames();
});
function dupSheet() {
$("#sel1").css('background-color','#ffff00');
google.script.run
.withSuccessHandler(function(rObj){
$('#sel1').css('background-color','#ffffff');
var select=document.getElementById('sel1');
rObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<rObj.sA.length;i++) {
select.options[i]=new Option(rObj.sA[i],rObj.sA[i]);
}
})
.dupSheet({name:$('#sel1').val()});
}
function delSheet() {
$("#sel1").css('background-color','#ffff00');
google.script.run
.withSuccessHandler(function(rObj){
$('#sel1').css('background-color','#ffffff');
var select=document.getElementById('sel1');
rObj.sA.unshift('Please Select A File Name');
select.options.length=0;
for(var i=0;i<rObj.sA.length;i++) {
select.options[i]=new Option(rObj.sA[i],rObj.sA[i]);
}
})
.delSheet({name:$('#sel1').val()});
}
</script>
<style>
input{margin:2px 5px;}
</style>
</head>
<body>
<select id="sel1"></select><label for="sel1">Sheet Name</label>
<br /><input type="button" value="Duplicate Sheet" onClick="dupSheet();" />
<br /><input type="button" value="Delete Sheet" onClick="delSheet();" />
</body>
</html>
I used a little JQuery in there too.
As stated in the SpreadsheetApp reference.
getActiveSheet()
Gets the active sheet in a spreadsheet. The active sheet in a spreadsheet is the sheet that is being displayed in the spreadsheet UI.
Since you are not using any UI you should instead use other methods of accessing your Sheets and Spreadsheets, such as:
Obtaining your Spreadsheet
SpreadsheetApp.openById(id)
SpreadsheetApp.openByUrl(url)
Obtaining your Sheet(s)
Spreadsheet.getSheetByName(name)
Spreadsheet.getSheets()
i wish to use google place autocomplete for one of my project but the issue is that i need to store entry of county, state and city as different entry in mysql. i.e when someone type mum and result is displayed as Mumbai(city), Maharashtra(state), India(country), then all this 3 entry should be stored as different entry in mysql. Is it possible to do this ?
See this page and Enjoy.
<!DOCTYPE HTML>
<html>
<head>
<title>Place Autocomplete Address and type</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=it"></script>
</head>
<body>
<input id="autocomplete" placeholder="Enter your address"
type="text"></input>
<br>
<br>
<div id="divToPrint" style="clear: both; float: left; border:solid 1px black; height: 32px;"></div>
<script>
/* set a default Bounds */
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.207606672865225, -0.9448242187499911),
new google.maps.LatLng(52.464377026041284, -0.2746582031249841));
/* get a input tag with id = autocomplete */
var input = document.getElementById('autocomplete');
/* set a options */
var options = {
bounds: defaultBounds,
types: ['geocode'],
};
/* register a autocomplete object into a variable named autocomplete */
var autocomplete = new google.maps.places.Autocomplete(input, options);
/* listen a place_changed event into variable autocomplete and do: */
google.maps.event.addListener(autocomplete, 'place_changed', function() {
/* reset a defaultBounds into variable */
autocomplete.setBounds(defaultBounds);
/* get a response place */
var place = autocomplete.getPlace();
/* initilize the componentsTypePlace */
var componentsTypePlace = "";
/* get a div tag with id = divToPrint */
var divToPrint = document.getElementById('divToPrint');
/* get a legth of request address */
var addressLengthplace = place.address_components.length;
/* cycle into a adress_components */
for(var i=0; i < addressLengthplace; i++){
/* get a value of address_component type */
componentsTypePlace = place.address_components[i].types[0];
/* get a value of address_component array[i] */
var val = place.address_components[i].long_name;
/* insert into div a value of address component and its type */
divToPrint.innerHTML += "//"+ componentsTypePlace + " : " + val +" //";
}
});
</script>
</body>
</html>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** #type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//fillInAddress();
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
</script>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" value= <?php if(isset($location)): echo $location; else: echo '""'; endif; ?> name="data[Location][location]" class ="input-block-level" required ="required">
</div>
</body>
I'm running the simple Echo example of WebSockets but it doesn't seem to establish a connection. This is happening on Windows 7, Eclipse, and Tomcat.
The error messages in firefox are:
"NetworkError: 404 Not Found - http://my_ip_address:8080/websockets/echo"
and
Firefox can't establish a connection to the server at ws://my_ip_address:8080/websockets/echo.
What am I missing? Is there some configuration I need to set up?
The jars I have in the build path are javax.annotation_1.0.jar and websocket-api-0.2.jar
The code I'm running:
package org.javaee.glassfishwebsocket;
import org.glassfish.websocket.api.annotations.WebSocket;
import org.glassfish.websocket.api.annotations.WebSocketMessage;
#WebSocket(path="/echo")
public class EchoBean {
#WebSocketMessage
public String echo(String message) {
System.out.println("##################### Message received");
return message + " (from your server)";
}
}
This is index.jsp:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<meta charset="utf-8">
<title>WebSocket Echo Client</title>
<script language="javascript" type="text/javascript">
console.log("trying to connect");
var wsUri = "ws://my_ip_address:8080/websockets/echo";
console.log("wsUri = ");
console.log(wsUri);
var websocket = new WebSocket(wsUri);
console.log("websocket = " );
console.log(websocket);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
function init() {
console.log("init called");
output = document.getElementById("output");
}
function send_echo() {
console.log("sending_echo with " + textID.value);
websocket.send(textID.value);
writeToScreen("SENT: " + textID.value);
}
function onOpen(evt) {
console.log("onOpen");
writeToScreen("CONNECTED");
}
function onMessage(evt) {
console.log("onMessage");
writeToScreen("RECEIVED: " + evt.data);
}
function onError(evt) {
console.log("onError");
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2 style="text-align: center;">WebSocket Echo Client</h2>
<div style="text-align: center;"><img style=" width: 64px; height: 64px;" alt=""src="HTML5_Logo_512.png"></div>
<br></br>
<div style="text-align: center;">
<form action="">
<input onclick="send_echo()" value="Press me" type="button">
<input id="textID" name="message" value="Hello WebSocket!" type="text"><br>
</form>
</div>
<div id="output"></div>
</body>
</html>
We have been playing around with the canvas element, but are encountering sluggishness on Mobile Safari whereas the app works smoothly on the desktop.
The test app is very primitive. It just lets the user draw a line using the mouse on a desktop or a finger on smart phones.
In Mobile Safari, the drawing of the line is often very jerky. The first bit of a line will render in real-time, but the rest won't render until after the finger is lifted from the screen.
Any ideas why?
Code below.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />
<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>
<style type='text/css'>
#canvas { border:1px solid red }
</style>
</head>
<body>
<div id='draw_page' data-role='page'>
<canvas id="canvas" width="500" height="350"></canvas>
</div>
<script type="text/javascript">
$('#draw_page').live('pageinit', function() {
prep_canvas();
});
</script>
</body>
</html>
JavaScript:
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var canvas;
var context;
function prep_canvas() {
canvas = $('#canvas')[0];
context = canvas.getContext("2d");
}
$('#canvas').live('vmousedown', function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').live('vmousemove', function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').live('vmouseup', function(e){
paint = false;
});
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "black";
context.lineJoin = "round";
context.lineWidth = 2;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
I followed this: http://dev.opera.com/articles/view/html5-canvas-painting/ and it works fluidly on the phone (you'll see a commented out line for img_update() which is used in the two canvas method mentioned by BumbleB2na...but I wasn't using any shapes, just lines, so left it out)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="startup-iphone.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Untitled Document</title>
<style type="text/css">
body {background:#ccc; margin:0; padding:0}
html {margin:0; padding:0;}
#container { position: relative; margin:0; padding:0px; }
#canvas { border: 1px solid #000; background-color:#FFF; position:relative; width:298px; margin-left:11px; margin-top:5px; }
</style>
</head>
<body onload="listen()">
<div id="container">
<canvas id="canvas" width="298" height="298">
</canvas><br/>
<button onclick="clearImage()">Clear</button>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
if(canvas){var context= canvas.getContext('2d');}
var tool;
tool = new tool_pencil();
document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);
function listen(){
canvas = document.getElementById('canvas');
if(canvas){
context= canvas.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone||ipad){
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchend', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
}
else{
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
}
}
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
//img_update();
}
};
this.touchstart = function (ev) {
ev.preventDefault();
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.touchmove = function (ev) {
ev.preventDefault();
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.touchend = function (ev) {
ev.preventDefault();
if (tool.started) {
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse position relative to the canvas element.
function ev_canvas (ev) {
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if (((iphone)||(ipad))&&(ev.touches[0])){ //iPad
ev._x = ev.touches[0].clientX;
ev._y = ev.touches[0].clientY;
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
function clearImage(){
var yes=confirm('Clear drawing?');
if(yes){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
</script>
</html>
In my iPhone phonegap application I want to capture image using camera of device.I have done with the following code but it not works.Am not able to capture image.
In the following code in HTML section i have one button and when it clicked then i will call method defined of java script.
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
function onLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
// PhoneGap is ready to be used!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved (taken with camera)
function onPhotoDataSuccess(imageData) {
alert("Your photo was taken successfully.");
}
// Called when a photo is successfully retrieved (out of the device's library)
function onPhotoURISuccess(imageURI) {
// Get image handle
var largeImage = document.getElementById('largeImage');
// Unhide image elements
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
largeImage.src = imageURI;
var options = new FileUploadOptions();
options.fileKey="file";
//options.fileName="newfile.txt";
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, "http://www.yourdomain.com/upload.php", win, fail, options);
// Make sure you use your own site!
}
// Success reporting
function win(r) {
alert("Code = " + r.responseCode);
alert("Response = " + r.response);
}
// Error reporting
function fail(message) {
alert('Failed because: ' + message);
}
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, fail, { quality: 30 });
}
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, fail, {
quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
</script>
</head>
<body onload="onLoad()">
<button onclick="capturePhoto();">Take a Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Upload a Photo</button>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
will you please try with the following snippet.
It capture the image from camera and also load in img tag. I tested on device.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PGCamera</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
function PictureSourceType() {};
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
function getPicture(sourceType){
var options = { quality: 10 };
if (sourceType != undefined) {
options["sourceType"] = sourceType;
}
// if no sourceType specified, the default is CAMERA
navigator.camera.getPicture(getPicture_Success, null, options);
};
function getPicture_Success(imageData){
alert("getpic success");
document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;
}
</script>
</head>
<body onload="onBodyLoad()">
<img style="width:60px;height:60px" id="test_img" src="" />
<!-- for testing, add the buttons below -->
<button onclick="getPicture()">From Camera</button>
<button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>
</body>
</html>
thanks,
Mayur