HOWTO: Use Catbox in MIT App Inventor! ๐Ÿฑ

If you don't know what is Catbox, it is one of the simplest file storage systems (and easiest to use) in the world!

Catbox can be used for permanent storage (plus it is free), and for temporary storage you can use its sister Litterbox where you can set a timer after which the file will self-destruct.

FYKI, you can host files in Catbox whose size is not more than 200MB.

You can access it from
And API docs from Catbox Tools and a bit of scrolling down...

So what we will do here? We will take advantage of its API and use the Web component of MIT App Inventor!

Let's get started!

First and foremost go create an account (or login) by going to and get your user hash after logging in by going to

Step 1 = Create a new project.

Step 2 = Drag and Drop a Web Component onto the Screen Viewer.

Step 3 = Go to the blocks section to code the procedures (We will do this now to streamline our workflow)

Continuation from Step 4 to Step 6 - Uploading via existing URL such as Imgur to Catbox

Step 4 = Drag out a blank procedure and name it 'UploadFromURL' (copy the name if needed)

Step 5 = Add 2 parameters called 'fileUrl' and 'userHash' (copy the name if needed)

Step 6 = Fill in the procedure with this code (explanation below code image)

(When procedure is triggered, the web URL is set to Then we post some text via the Web component to that url with parameters reqtype with value urlupload & url = fileUrl (the URL which will be put into the fileUrl parameter when we use this procedure later) and the userhash is used to store the file into your account, and do not give any trailing spaces!)

Continuation from Step 7 - Uploading via file path from device to Catbox

(copy file to ASD when executing this procedure)

Step 7 = Copy the procedure from earlier steps and change the parameters as shown below...

Final block should look like this:

(again, do not add trailing spaces)

Continuation from Step 8 to Step 9 - Removing files from Catbox

(After getting the generated link from Catbox after uploading a file, you can delete it, you only need the filename part from the link)

Step 8 = Create a blank procedure with 2 parameters userHash and fileName, and name it 'DeleteFile' (copy name if needed)

Step 9 = Fill it with this code

(This posts to the API with the user hash provided and the generated file name by Catbox
Example - If the generated link is after uploading a file, aQ3Fcvg.png is the filename required to delete the file. FYI, you can only delete files from your user hash only for security reasons;and do not add trailing spaces)

Continuation from Step 10 - Designing the App

I will make a very simple UI for testing (this does not have to be good right now)

Component Qty.
Button 2
ImagePicker 1
TextBox 1
Label 1

Button 1 = Upload from URL
Button 2 = Delete
ImagePicker (Upload from file; here img)

Go to the blocks editor

Add a Web1.GotText event and inside set Label1.Text to response content

and when, and imagepicker.afterpicking, execute those procedures accordingly

(no trailing spaces)

Also, uploading by file path works with just the filename best, so you need to copy the file in ASD to get it working...

All tested, works great. Please check the tutorial again if any error happens or report it below.

And now I have to give credit where it is due.
Ton of credit goes to Catbox API docs, and its developers, and once again thanks to them for making this free. If you can, please donate to them to keep it running.

Also I wasn't sponsored by them, I am just a Catbox fan and wanted to cover this with all of you.

Thank you! Also, you can suggest better methods and improvements down below!

Rate this tutorial
  • :star::star::star::star::star:
  • :star::star::star::star:
  • :star::star::star:
  • :star::star:
  • :star:
0 voters

(In this same topic, but in another part I will talk about Litterbox, which is for next time)

1 Like

Hello, when I try to upload any file using API I got a "No files given." error, I should be using the wrong file path. The path that I're using is like that: "/storage/emulated/0/Android/data/com.niotron.companion/files/Pictures/_app_inventor_image_picker/picked_image3503658867462032985.jpg".
Please help me :ยด(

Have you tried with ASD? You can search for those here in the forums and modify your code based on that...
I now won't be able to give exact blocks because I am busy at the moment...
If not, someone else might be able to help you.

Sure, I'll try thanks.

1 Like