HOWTO: Test If Image Exists on Device (no extension required)

137 views
Skip to first unread message

TimAI2

unread,
Apr 30, 2018, 4:11:51 PM4/30/18
to mitappinv...@googlegroups.com
This one has been bugging me for a few days, and despite the wonderfulness of the File extension from Taifun, I have been searching for a way to test for the existence of an image file using just AI2 blocks and components.

Why do you need this? (for whatever reason you don't want to use an extension

You may have a situation where you download image files to the app when the user visits a particular part of the app.
Once downloaded, it makes more sense to use the image on the device, as opposed to downloading it again.

My solution was to use a little bit of javascript, a webviewer with webviewstring, a clock and some logic.
Works with webviewer not visible as well

I also used the file component to install the html file needed to the sdcard
Default location is file:///mnt.sdcard, but subdirectories work too, if the additional path is added

My example simply check for an image file, and if it exists displays it, along with a message.
If the file doesn't exist, displays a different "Sorry" image in the app, and a message.

Developers will be able to apply their own logic, so that if the file is not on the device, it
can be downloaded from online resources.

Most of the components used are likely to already be in an app whilst developing, so often simply a matter of reuse

BLOCKS

Please note, in production, for the filepath for the initial webviewstring and for the "else" setting of Image1.Picture
you may not need to include "file:///mnt/sdcard".

Also you can create a specific directory on the sdcard when you create the html file in Screen Initialise. 


HTML


<!DOCTYPE html >
<html>

<head>
<title>Test Image Exists</title>
</head>
<body>
<script>
function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

checkImage(window.AppInventor.getWebViewString(), 
function(){ window.AppInventor.setWebViewString("File exists"); }, 
function(){ window.AppInventor.setWebViewString("File doesn't exist"); } );


</script>
</body>

</html>


Credits: in html


aia attached :)


Enjoy!


testimageexists.aia

Abraham Getzler

unread,
Apr 30, 2018, 5:47:32 PM4/30/18
to MIT App Inventor Forum
Does this need to be modified for built versus Companion apps,
for the file paths?
ABG

TimAI2

unread,
Apr 30, 2018, 6:33:18 PM4/30/18
to mitappinv...@googlegroups.com
No, because the html file is saved to the sdcard folder when the app opens.

The file paths are the same for both. Tested in companion and compiled. :)

Now if on different devices to those tested the file paths are different .....

Abraham Getzler

unread,
Apr 30, 2018, 6:43:42 PM4/30/18
to MIT App Inventor Forum

Chris Ward

unread,
May 1, 2018, 7:47:01 AM5/1/18
to MIT App Inventor Forum
Works really nicely - one hellofa work-around though. I think App Inventor should be able perform this requirement with a native function for all file types (by verifying file size).

Chris Ward

unread,
May 1, 2018, 8:02:57 AM5/1/18
to MIT App Inventor Forum
I think you can verify if a file exists (image file or any other) without HTML/Javascript?




DoesFileExist.aia

TimAI2

unread,
May 1, 2018, 10:51:24 AM5/1/18
to MIT App Inventor Forum
Yes, but that way means you have to have the screen error occurred block set for every eventuality.

Wanted a solution that instead of seeking out an error took a more positive blocks approach :)

Chris Ward

unread,
May 1, 2018, 11:28:55 AM5/1/18
to MIT App Inventor Forum
Well, in normal circumstances, if an error occurs the device pops-up a Notification. We can preserve that if the error is not "file not found" (2101).


Reply all
Reply to author
Forward
0 new messages