Uploading compressed image(s) into CloudDB

I'm developing an Instant Messaging app, and I met a problem while developing it-How to upload a user's profile picture.
At first, I used a method that users need to upload their profile pictures into a 3rd-party image sharing service, and paste the direct link into the app so the server will only store the link of the image, not the image itself, but this method may cause images not displaying or malicious things get injected into users' devices, like the image storing services' servers being down/got blocked in their countries/their internet providers' firewall/the image itself got deleted by the 3rd parties/the direct link got blocked, these can cause the images not displaying and the user inputting a malicious link can cause security problems since I have changed the image loading mechanism, the original image loading method that app inventor provides will freeze the app until the image is loaded, I want a smoother experience while using app even if the users' network were slow/having low bandwidth, so I used an extension (Extension to download a file to ASD (app-specific directory) without WRITE permission - Extensions - MIT App Inventor Community) that downloads the file into app's ASD to cache it for next time usage, then display the image stored in app's ASD using app inventor's prebuilt image loading method, but the problem is the extension accepts all files format from the internet, and it may cause problems, and the image URL method is inconvenient for most of users, so I want to use this method: uploading a compressed image into CloudDB, but I have no idea how to do this, I'm using a free Redis server plan that only provides 5MB of space, please tell me a way to do this on App Inventor, it will be very thankful.

If you are using the AppInventor cloudDB blocks you have a couple of choices with images:

  1. Convert the image to a base64 string and upload it as a part of the users profile information. You will need to decode the base64 string back to an image to display it in the app.

  2. You can directly upload an image to cloudDB, but it has to be in its own tag, and you must use a full path to the file when you send it to cloudDB. Files returned are stored as new files each time they are accessed in a user folder called AppInventorBinaries.

If you keep your profile images size down (you can use a resize extension in the app), then you should have sufficient space for several hundred users, depending on what else is stored on the cloudDB server.

I used Image to Base64 Extension here: Metricrat Extensions (metricrat-hosting.web.app) and the image displays partially, is this a compatibility issue with my device or is there anything wrong with my code?
Note

  1. Device: Google Pixel 7(GVU6C) 128GB Model
  2. Android Version: 14(UP1A.231005.007)
  3. Action done on companion/complied app: Compiled app
    My AIA below.
    Base64Test.aia (11.3 KB)
    Screenshot

    Image used for testing
    0DSOo2xl
    Base64

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

Update: this bug doesn't occur on Sony Xperia Z(C6603) Android 4.2.2(10.3.A.0.423)

I do not recommend putting the base64 string to a label, this has been known to crash the app. Use a separate image component to view the image returned from base64 string (or a canvas without having to decode)


Thanks, problem fixed with separating the output into a variable.
Base64Test (1).aia (11.7 KB)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.