Explain what you are hoping to achieve with geo location
Permissions must be requested successively (one after the other) and only on Android versions where they are available. Storage permissions are no longer available or permitted on all Android versions.
See also here:
In my website with the geolocation I have the exact position with the place
Vitamarinaweb (2).aia (801.4 KB)
this is my project here the geolocation works but the uploading not works.
The location of the device? Is that what you require?
The location of the device
You can get this using geolocation in the html:
This in the webviewer. If you also use webviewextra extension you can upload your files as well 
Also looking at your blocks, the locationChanged blocks are incorrect:
They should be like so:
assumes that your site is receiving this correctly (looks like the user needs to be logged in to the site)
The app told me permess denied because I'm using webviewextra but webviewextra is for file uploading
Use the helper blocks for permissions, and do as @Anke said with respect to asking for many permissions
Because I have read on the web that if you are using webviewextra for file uploading android denied the permissions geolocation, other side if I use geolocalization with webviewer the uploading doesn't work, I ' m working too many days to find the solution but I'm going crazy is too difficult to work in specific blocks created by other people, if there a genius that show me the blocks correct solution, I will thank you him very much, thanks
Where did you read this?
If you are patient, do not create any new topics, and give me a chance, let me see if I can come up with a working solution, that on upload of a file, the file, the filename, and the users location are stored. It may take me a little while to set all of this up.
“Thank you so much for taking the time to help me. I really appreciate your dedication, and I’m happy to wait while you work on this. I’m sure your solution will be very valuable.”
I read that webviewextra don't permit geolocation in a powerfull program that search all informations on the web, but I don't sure of this information..
I have a working method for AI2 with the webviewer, just need to tidy things up a bit. Will be ready some time tomorrow.
Thank you
OK, sorry to have taken so long, been doing much testing, and with the release of nb202, ensuring that everything was still behaving.
This issue regarding geolocation and webviewextra: you are correct to a degree, they work together just fine when using companion in some situations, and always when calling a local html file, occasionally when using a remote file. There appears to be a permission or setting being blocked, what, where and when I am yet to resolve! But in general, they won't work together with a remote html.
The workaround for this is to grab the device's coordinates locally, and then feed this into the remote html file (easily done if you have control of the remote html file. I use a second webviewer to run a simple get coordinates script, this then passes out the fetched coordinates using the webviewstring to the app. The app can then pass these values into the remote html (the one with the file upload and webviewextra) and everything works as expected. There are other methods to perform this, it should be possible to run a javascript to inject the values when you do not have control over the remote html file.
We also have to handle whether the remote html is being accessed on the appinventor app, on a device, or being accessed using a computer browser or other method.
I have tested with companion and compiled app on Pixel 8a Android 16, with AppInventor running at nb202.
Here first are the blocks in the test app:
A timer is used to set the FineLocation permission, the hidden webviewer running the local html gets the coordinates and passes them to the visible webviewer's webviewstring. Javascript sets these values into the upload form.
Here is the local html file:
gl1.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>gl1</title>
</head>
<body>
<p>Get your coordinates...</p>
<p id="geo"></p>
<p id="lat"></p>
<p id="lon"></p>
<script>
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, error, options);
} else {
document.getElementById("geo").innerHTML("Geolocation is not supported by this browser");
if( window.AppInventor ){
var msg = "Geolocation is not supported by this browser";
window.AppInventor.setWebViewString(msg);
}
};
function showPosition(position) {
document.getElementById("lat").innerHTML = "lat: " + position.coords.latitude;
document.getElementById("lon").innerHTML = "lon: " + position.coords.longitude;
if( window.AppInventor ){
var msg = "[" + position.coords.latitude + "," + position.coords.longitude + "]"
window.AppInventor.setWebViewString(msg);
}
};
function error(err) {
document.getElementById("geo").innerHTML = 'ERROR(' + err.code + '): ' + err.message;
};
</script>
</body>
</html>
and here is the remote html file used for the file upload:
locandup.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>locandup</title>
</head>
<body>
<form action="/upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload"><br><br>
<input type="text" id="txtLat" name="txtLat" value="empty"><br><br>
<input type="text" id="txtLon" name="txtLon" value="empty"><br><br>
<input type="submit" value="Upload Image" name="submit">
</form>
<script>
if (window.AppInventor) {
var coords = JSON.parse(window.AppInventor.getWebViewString());
document.getElementById("txtLat").value = coords[0];
document.getElementById("txtLon").value = coords[1];
}
else {
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, error, options);
} else {
alert("Geolocation is not supported by this browser");
};
function showPosition(position) {
document.getElementById("txtLat").value = position.coords.latitude;
document.getElementById("txtLon").value = position.coords.longitude;
};
function error(err) {
alert( 'ERROR(' + err.code + '): ' + err.message);
};
}
</script>
</body>
</html>
You should be able to see that if appinventor is not present, then I use the html5 geolocation in this page
and a screenshot of the app in action:
Once a file has been selected, it is passed to a php file on the remote server (in same directory as the remote html file) This makes some checks (is it an image etc.), then stores the image file. At the same time the filename, lat and lon are appended to a text file (what you do with the values is down to your requirements)
Here is the php file:
upload.php
<?php
$target_dir = "images/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$lat = $_REQUEST['txtLat'];
$lon = $_REQUEST['txtLon'];
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
// echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
//if ($_FILES["fileToUpload"]["size"] > 500000) {
// echo "Sorry, your file is too large.";
// $uploadOk = 0;
//}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
// Get the lat and lon values and append thse to a text file with the filename
$myfile = fopen("images/datafile.txt", "a+") or die("Unable to open file!");
$txt = basename( $_FILES["fileToUpload"]["name"]) . " Lat: " . $lat . " Lon: " . $lon . "\n";
fwrite($myfile, $txt);
fclose($myfile);
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
I have commented out the file size check...
Uploaded image files are stored in a directory called images, along with the datafile.txt
Images folder
datafile.text contents
ai2metricrat.png Lat: 53.1416528 Lon: -2.327943
pinkSquare.png Lat: 53.1416528 Lon: -2.327943
star.png Lat: 53.11908 Lon: -2.3703808
orangeSquare.png Lat: 53.1416406 Lon: -2.3279549
purpleSquare.png Lat: 53.1416388 Lon: -2.3279316
redSquare.png Lat: 53.1416504 Lon: -2.3279644
ros.png Lat: 52.1416504 Lon: -1.3279644
framed_1738083675927_img.jpg Lat: 52.1416504 Lon: -1.3279644
You should be able to build in the required html and php to your existing files ?
This a bit of a workaround, but it works, and at present the best I can offer. You can of course go back to CustomWebView which has all the required features built-in, you will just have to find the method that handles both geolocation and upload!
1 Like
Ok, thank you very much, now I try your solution.
I believe I have now fixed webviewextra, so no need for the second webviewer/running local html.
Please try this version:
uk.co.metricrat.webviewextraV2.15GeoLoc2.aix (25.1 KB)
You do need to request FINE_LOCATION permission.
1 Like
Hi Sir, I uploaded gl1.html into my App Inventor project and I’m loading it in a hidden WebViewer to get the device location.
In the app I pass the coordinates to my profile page with this link: <li><a href="https://www.vitamarinaweb.com/indexb.php?lat=LAT&lon=LON">Profile</a></li> In my profile page (indexb.php), where the position is saved, I added this script at the end:<script> (function(){ // If no query params, try to get coords from localStorage const q = new URLSearchParams(location.search); if(!q.get('lat') || !q.get('lon')){ const lat = localStorage.getItem('app_lat'); const lon = localStorage.getItem('app_lon'); if(lat && lon){ // reload profile page with lat/lon location.replace(location.pathname + '?lat=' + lat + '&lon=' + lon); } } })(); </script>
This way, in the homepage index.html don't take coordinates and the profile page indexb.php is opened without the lat/lon parameters, it can still retrieve them from localStorage and reload itself with the correct coordinates. Here are my blocks, thank you
in advance, Ok now take the coordinates is working! I don't remembered to add the url in the webviewer2 in settings.. thank you very much for now!
1 Like