App Inventor and the Web component

How to overcome the App Inventor project limit of 30 MB

Note: the build limit has been increased to 30 MB starting from July 30, 2020!

The first thing you should do is to take a look at Enis' tips, because your assets might be too voluminous, too big or just unneeded: If you don't need them, get rid of them. If they're too big, either resize them or download them after the app runs the first time (see also below). Thank you Enis!

We currently have the following possibilities to overcome the App Inventor project limit of 30 MB:

• Use the code.appinventor.mit.edu server, which runs on Amazon Web Services and does not have this 30 MB limitation.
• Hossein's solution, which uses small resolution images in App Inventor. These images will be replaced after building the app with higher resolution images.
  To get it working, use AppToMarket version 4.1 and update your apktool.jar, see also here.
• Anke's solution (video instructions), which is a variation of Hossein's solution.
• Use a personal server to build your project:  AI2 Ultimate by krupong
  See also the overview, which helps you to decide, which personal server to choose.
• Another solution using Google Drive and a Google Spreadsheet you can find here. Thank you Tim!
• Adell_SE's solution, which uses the Extended Webviewer extenion to download files. Thank you Adell_SE!
• And finally The solution presented here, which downloads some files on first run of the app

With this example you can download several files one by one form the internet and store it on your device on first run of the app.
As example to download some files, I used the images and videos from the Video Wall tutorial.

Screenshots

Questions and Answers

Q1: I am making an app and it will be more than 5MB. I saw the file by file app and want o make it the same way. My question is where can I upload my images?
A: You can upload it to your own web server or any Cloud Storage service, just do Google Search... examples are Google Drive, Dropbox, etc.

Q2: I used your FileByFile method and every thing works great. The problem is after downloading the needed files. I dont know how to display it on my app.
A: This is the correct path for the first item:

Q3: I tested your webprefetch file by file with different cloud servers (dropbox; wuala; google drive), but it failed. The issue was, that images (only 2 .png, original size 8 kb) were shown in the new created folders, but couldn't be opened. So, is it impossible to download files from the cloud or did I miss something downloading from the cloud instead of a webserver.
A: I now looked into this issue and found this answer at stackoverflow. See my updated example for Google Drive in the download section below: I changed the logic a little bit and added a list named listFilenameDrive to store the file ids from Google Drive. Also I use this link: https://drive.google.com/uc?export=download&id=<fileId> to access the files to download, see screenshot.


See also How to get a shareble link.

Q4: I downloaded your zip file about overcoming the limit of 5 mb with Google Drive solution. I tried to change the code with my Google Drive files id but nothing happend. None of my assets didn't download to the "do not delete" folder. I searched through internet and found that: https://drive.google.com/uc?id=.........&export=download&pli=1 and replaced it at your address. Everything looks ok now and my files downloaded fine to my phone via Google Drive. Putting the pli=1 at the end and makes my assets to download correctly.
A: Thank you Tasos for this tip!

Q5: That's an interesting way of doing it. I'm not sure how I feel about hardcoding 700 to 1400+ blocks though. It looks like when you make the listFilename variable, you have to make a list of every file you want to download.
A: Well, downloading 700-1400+ files will take its time... But with a little bit of server logic you can get a list of all filenames in a specific directory on your server, then just use this list instead of hardcoding the list in App Inventor. See below an example php script, which provides a list in csv format of all mp3 and png files of a specific subdirectory passed as parameter to the script.

        <?PHP
        $dir = $_GET['dir'];
        printFiles($dir."/*.mp3");
        printFiles($dir."/*.png");

        function printFiles($type) {
          $matches = glob($type);
          if ( is_array ( $matches ) ) {
            foreach ( $matches as $filename) {
              echo $filename.",";
            }
          }
        }
        ?>
      

"Another solution using Google Drive and a Google Spreadsheet you can find here. Thank you Tim!

Q6: Your coding says that it will store the assets on the phone in a file on the sd card - what happens if the person downloading the app does not have an sd card in their phone or tablet?
A: In case a device does not have a sd card, this doesn't matter, because in this case the sd card will be emulated: file:///mnt/sdcard/ is some kind of generic path which also works for emulated sd cards, just try it.

Q7: It keeps on downloading any time I start the app. Someone may help me to solve this problem?.
A: This is, because there is a bug in the example ;) see screenshot, you have to remove the double quotes...

Download

Download aia file for App Inventor (solution for web server)
Download aia file for App Inventor (solution for Google Drive)
Back to top of page ...

This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.