App to upload videos

[justaniceguy]

What I want to do

I want to create an app that only has a browser and a camera view and does the following:

1. User will only use the browser and think this is the app. There is a hidden view for the camera.

2. When the user visit some specific URL pattern (http://localhost:8000/post/<post_id>/upload-video?post_type=<post_type>) it should open the camera and temporarily store the query parameters in hidden labels.
   Example: In this case of the URL http://localhost:8000/post/1125/upload-video?post_type=co it should open the camera and store the 1125 in a label named post_id and co in a label named post_type.

3. Then, when the user capture an image, I want him to be able to see he video and decide if they want to save it or re record.it.

4. When thay saves it, they should save it to a website via API. This an example of how it would be saved using CURL:

curl -X POST http://localhost:8000/api/post/ \
    -F "post=1125" \
    -F "media_file=@/path/to/file.mp4" \
    -F "post_type=co" \
    -F "post_sub_type=" \
    -H "Content-Type: multipart/form-data"

5. Finally, They should ve redirected to the browser, to some specific URL, for example: http://localhost:8000/post/<post_id>.

What I know (and what I don't)

• Step 1: I know how to do the browser. I don't know how to use the camera, but I found this tutorial: https://www.youtube.com/watch?v=W_BbCd-TDNs
• Step 2: I know to save the values in hidden labels (once extracted). But I don't kwon how to keep an eye in the visited URL, test the URL pattern, and open the camera.
• Step 3: I guess I can find a way to do it by my self..
• Step 4: I know there is a way to work with APIs but I don't know how ir how to send a recorded video. This is the main reason why I came here.
• Step 5: I can figure it out. Probably I just need to update the browser URL in the same block that saves the video.

What I need.

I would appreciate any help on the things that I don't know (test the URL pattern and posting the video with the API).

[Taifun]

@justaniceguy

Step 4: I know there is a way to work with APIs but I don't know how ir how to send a recorded video. This is the main reason why I came here

The web component does not offer multipart/form-data, see

Image upload (Api)

Upload Get an Upload URL Uploads shall be POSTed to the upload URL returned by our API and shall be multipart/form-data encoded. The web component does not yet have provision for multipart/form-data It may be possible to use the webviewer for this ?

for a possible workaround...

Taifun

[justaniceguy]

Hmm... it looks like a possible solution! (direct link for future reference).

Also, do you know how to test the browser URL against certain pattern?

[Taifun]

A simple solution could be the contains block to check, if the url contains the string
http://localhost:8000/post/

For more advanced solutions you can try one of the regex extensions

• Matches Regex Extension by luv.ak.tech
• RegEx Extension by Appsbeheerder
• Xreg Regex Extension by danielmistura, PCRE regular expressions for App

taken from the extensions directory App Inventor Extensions | Pura Vida Apps

Taifun

[kennylajara]

It has been hard for me to use the purposed method as it takes too long to convert the video into base 64 so it can be added to the form. Is there another method? I can change the API if necessary. Maybe if I change the API to be used this way?

curl -X POST \
    -H "Content-Type: application/octet-stream" \
    --data-binary @/path/to/video/file.mp4 http://yourserver.com/upload_video/filename.mp4

[TIMAI2]

You can use one of two extensions to select a video file from your browser (if the web page is using an input tag/button, in order to select a file from shared storage)

WebViewExtra
CustomWebView

[Taifun]

@kennylajara

curl -X POST \
    -H "Content-Type: application/octet-stream" \
    --data-binary @/path/to/video/file.mp4 

Yes you can
This might help to get the blocks

cURL to blocks automatic generator

You can convert cURL command to AppInventor blocks hassle free Convert curl to blocks by Getaix Preiview [image] How to? Copy & Paste curl text into the textbox Hover over generated blocks and click download image Drag and drop downloaded image to AppInventor workspace Report bug if found cURL to blocks by Getaix is inspired from CurlToBlocks by @HritikR . CurlToBlocks by Getaix is still in beta and would like to know your reviews. Thank you Jerin Jacob

Taifun

[kennylajara]

@TIMAI2
You can use one of two extensions to select a video file from your browser

Uhh! Nice extensions!
They doesn't solve the issue I am facing right now as my use case requires me to force users to record the video from the camera at the moment when they try to upload it (and prevent them from uploading an old video). But, those extensions will be helpful for another feature of the app, so, thanks.

@Taifun
This might help to get the blocks

Awesome tool! It helped me to figure out some block composition that will probably solve my issue. Here it is:

The problem I am getting now is:

Error 908: The permission READ_EXTERNAL_STORAGE has been denied. Please enable it in the Settings app.

Based on this thread, I think the problem must be that I'm not using the ASD. I don't know how to work with it. This is my first app in many, many years. I am using the Taifun File Extension, and I see there are some ASD-related blocks. So, any help to fix it with that this specific extension would be appreciated.

[Taifun]

Please provide a Do it result of the path to the file you like to post

use Do it to debug your blocks, see also tip 4 here App Inventor: How to Learn | Pura Vida Apps
see also Live Development, Testing, and Debugging Tools
Taifun

---

Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

[kennylajara]

I can't provide the Do it because, for some reason, my companion app gets disconnected from App Inventor when I record a video and the provided block gets excecuted after saving the video. But, if you are looking for the final path after the join, it is: file:///storage/emulated/0/DCIM/Camera/20231215_093400.mp4

Or are you looking for something different? @Taifun

[kennylajara]

I am still getting this error:

Error 908: The permission READ_EXTERNAL_STORAGE has been denied. Please enable it in the Settings app.

But know I don't think it is related to the ASD. In this threat, @Anke mentions that you can't specify the saving directory. Si, its weird that I can write a file there (without asking for permissions) but then I cannot read the file I just created, even if I try to ask for permission.

[Anke]

Maybe the Web.PostFile method needs a relative path:
/DCIM/Camera/<fileName.mp4>
and not an absolute or full path.

Try also to set DefaultFileScope = Legacy.

---

Which Android version are you testing with?

[Anke]

Try also to request READ_EXTERNAL_STORAGE permission on Android < 13 and READ_MEDIA_VIDEO on Android 13+ with your current blocks.

[Emissary95]

is there a solution to this error? The option you specified does not solve this error on Android 13.

[Taifun]

@Emissary95

The option you specified does not solve this error on Android 13.

It would really help if you provided a screenshot of your relevant blocks, so we can see what you are trying to do, and where the problem may be.

To get an image of your blocks, right click in the Blocks Editor and select "Download Blocks as Image". You might want to use an image editor to crop etc. if required. Then post it here in the community.

Taifun

---

Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

[Emissary95]

error 908