Power Apps

Unable to upload Video using PCF control. Error "Failed to upload. check console details"

(1) Share

Report

Posted on by johnjohnPter

2,002 Season of Giving Solutions 2025

Hi All,

I added this PCF control:-

https://blog.binaryrepublik.com/2025/05/step-by-step-guide-create-pcf-control.html?m=1

but when i start recording >> stop recording >> upload recording i got this error:-

did anyone try this ? and if so , did you face similar issue?

Thanks

Categories:

Building Power Apps

General topics

I have the same question (0)

All responses (10)

Answers (0)

Sort by

Suggested answer

Valantis 5,936 on at

Like (2)

Report
Copy link

Link copied!

Hi @johnjohnPter,

The "Failed to upload" error from this specific PCF control is most likely one of these causes:
1. File size limit: Power Apps has a default file upload limit of 2MB for controls. Video recordings can easily exceed this. Check the app's Settings > General > Data row size limit and increase the Max attachment size if possible. For larger videos you'd need to upload directly to SharePoint or Azure Blob Storage via a flow instead of through the PCF control's built-in upload.

2. CORS or permission issue: the PCF control uses the MediaRecorder API and then tries to upload the blob. Open browser DevTools (F12) > Console and check the exact error message. It will tell you whether it's a network error, a CORS issue, or a size rejection.

3. The upload target is not configured: check the PCF control's manifest and index.ts to see where it's trying to upload. If it's pointing to a SharePoint or Dataverse endpoint, the connection or permissions may not be set up correctly in your environment.

Share the console error and it'll be much easier to pinpoint the exact cause.

Best regards,

Valantis

✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/

💼 LinkedIn

▶️ YouTube

Was this reply helpful? Yes No
johnjohnPter 2,002 Season of Giving Solutions 2025 on at

Like (1)

Report
Copy link

Link copied!

here is the full error, i think it is a location issue? now if i need to specify the end point inside the code, then how i can manage having test and prod sharepoint sites and 2 environments, as each will have different location? Also in my case i want to place the video dynamically inside specific SharePoint folders instead of static location, is it supported?

Upload error: Error: Upload failed:
at VideoRecorder.eval (index.ts:144:19)
at Generator.next (<anonymous>)
at fulfilled (index.ts:14:24)
at Object.p [as _notify] (base.js:2:37490)
at Object.enter (base.js:2:41064)
at c.Class.derive._oncancel._run (base.js:2:42892)
at c.Class.derive._oncancel._completed (base.js:2:42333)

index.ts:130 POST https://runtime-app.powerplatform.com/publishedapp/e/default-0bcccd25-af10-4583-95d7-53f14b7a506e/preloadindex/Your_Power_Automate_Http_Request_Url 404 (Not Found)
eval @ index.ts:130
eval @ index.ts:29
c.Class.derive._oncancel @ base.js:2
e @ pa.core.bundle3.js:7
__awaiter @ index.ts:11
reader.onloadend @ index.ts:124
FileReader
eval @ index.ts:123
eval @ index.ts:29
c.Class.derive._oncancel @ base.js:2
e @ pa.core.bundle3.js:7
__awaiter @ index.ts:11
uploadVideo @ index.ts:110
_uploadButton.onclick @ index.ts:56
index.ts:140 Upload status: 404

index.ts:142 Response text: {"code":"RouteNotFound","message":"The request URI https://runtime-app.powerplatform.com/d39cac3d-1f41-4209-b033-8ed8e90df2b1/134245757026945791/publishedapp/e/default-0bcccd25-af10-4583-95d7-53f14b7a506e/preloadindex/Your_Power_Automate_Http_Request_Url does not match any known API routes."}

Was this reply helpful? Yes No
Suggested answer

Valantis 5,936 on at

Like (2)

Report
Copy link

Link copied!

Hi @johnjohnPter,

The PCF control is trying to POST to:

Your_Power_Automate_Http_Request_Url

That's a placeholder in the code that was never replaced with an actual endpoint. try to:

1. Create a Power Automate flow with an HTTP Request trigger
2. Copy the HTTP POST URL from that trigger
3. Go into the PCF control's index.ts file and replace 'Your_Power_Automate_Http_Request_Url' with your actual flow URL
4. Rebuild and redeploy the PCF

For your question about multiple environments and dynamic SharePoint folders: the blog-based PCF hardcodes the endpoint URL in the control code which is not ideal for multi-environment scenarios.

The better approach is to expose the URL as a PCF input property in the manifest so you can pass it dynamically from the canvas app formula.

The canvas app would then pass different URLs per environment, and you can also pass a dynamic folder path as another input property.

This requires modifying the PCF code to accept input parameters rather than hardcoding the endpoint.

Best regards,

Valantis

✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/

💼 LinkedIn

▶️ YouTube

Was this reply helpful? Yes No
johnjohnPter 2,002 Season of Giving Solutions 2025 on at

Like (1)

Report
Copy link

Link copied!

@Valantis Thanks for your helpful replies.

now i created a flow that get call by anyone, and i passed the flow url as a parameter, but i got this error message inside the dev tools:-

Response text: {"error":{"code":"DirectApiAuthorizationRequired","message":"The request must be authenticated only by Shared Access scheme.","messageTemplate":"DirectApiAuthorizationRequired"}}

Was this reply helpful? Yes No
Suggested answer

Valantis 5,936 on at

Like (2)

Report
Copy link

Link copied!

Hi @johnjohnPter no problem :)

The DirectApiAuthorizationRequired error means the flow's HTTP trigger URL requires authentication and the PCF control is calling it without the correct auth scheme.

When you create a Power Automate HTTP Request trigger, it generates a URL that includes a Shared Access Signature (SAS) token in the query string (sv, sig, sp parameters). The full URL from the trigger already has this token embedded.

Make sure you're passing the complete URL including all query parameters from the flow trigger. It should look like:
https://prod-xx.westeurope.logic.azure.com/workflows/.../triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxxxx

If you truncated the URL or only copied the base path without the query parameters, that's why it fails.

Copy the full URL from the flow trigger and pass that as the parameter to your PCF control.

Best regards,

Valantis

✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/

💼 LinkedIn

▶️ YouTube

Was this reply helpful? Yes No
johnjohnPter 2,002 Season of Giving Solutions 2025 on at

Like (1)

Report
Copy link

Link copied!
@Valantis Thanks agin for your help. so i am not sure how secure is this approach? to send a url that contain SAS token inside the browser? is it secure? i usually send such token from the server.

also i copied the full url and defined that the flow can only be run by users inside our organization, i got this error:-

{"error":{"code":"DirectApiAuthorizationRequired","message":"The OAuth authorization scheme is required. Please add authentication scheme and try again.","messageTemplate":"DirectApiAuthorizationRequired"}}

if i allow the flow to be run by any user the issue will be fixed, but i need to secure the flow to be called by our internal users only ..

any advice? Thanks

Was this reply helpful? Yes No
Suggested answer

Valantis 5,936 on at

Like (1)

Report
Copy link

Link copied!

Hi @johnjohnPter,

You're absolutely right and my Apologies for not flagging this earlier, I should have mentioned the security concern from the start.

I beleive the cleanest and most secure fix for your scenario without needing Azure Functions or APIM:

1. Modify the PCF control to expose the recorded video as a base64 output property instead of uploading internally. The PCF records, stops, and outputs the video blob as base64 string via notifyOutputChanged()
2. In the canvas app, bind a variable to that PCF output property
3. On your upload button's OnSelect in the canvas app, call a Power Automate flow and pass the base64 video content and the target SharePoint folder path as parameters
4. The flow runs in the signed-in user's context, writes the file to SharePoint using the SharePoint connector, no token exposed in the browser, no SAS URL needed

This approach is fully secure because the flow uses the user's own Entra ID credentials through the Power Apps connector, the token never touches the browser, and you can control folder paths dynamically per user or environment by passing them as flow parameters.

This is the recommended pattern for file handling between PCF and SharePoint in Power Apps.

Best regards,

Valantis

✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/

💼 LinkedIn

▶️ YouTube

Was this reply helpful? Yes No
johnjohnPter 2,002 Season of Giving Solutions 2025 on at

Like (1)

Report
Copy link

Link copied!

@Valantis sorry seems i did not get your point, as i am already exposing the Video 64x-bit and the files name and the folder pht, and send them to a flow.. but i need to secure the flow to be called by the internal users only??

Was this reply helpful? Yes No
Suggested answer

Valantis 5,936 on at

Like (1)

Report
Copy link

Link copied!

@johnjohnPter, Since your PCF already outputs base64, don't call the flow from inside the PCF at all. Move the flow call to the canvas app button OnSelect instead.
When you call a flow from a canvas app button (via the Power Apps connector, not HTTP), it automatically runs under the signed-in user's identity and is restricted to your org by default. No token management, no SAS URL, fully secure.

Best regards,

Valantis

✅ If this helped solve your issue, please Accept as Solution so others can find it quickly.

❤️ If it didn’t fully solve it but was still useful, please click “Yes” on “Was this reply helpful?” or leave a Like :).

🏷️ For follow-ups @Valantis.

📝 https://valantisond365.com/

💼 LinkedIn

▶️ YouTube

Was this reply helpful? Yes No
johnjohnPter 2,002 Season of Giving Solutions 2025 on at

Like (0)

Report
Copy link

Link copied!

@Valantis thanks do you have any sample code? as i am not sure how i can get the 64-Bit of the video from the PCF control and pass it to the flow? i need to pass the video 64-bit , file name and folder location. seems the PCF controller does not have a property that return the 64-bit of the recorded video

Was this reply helpful? Yes No