Connector operations with `format: "binary"` body parameters upload corrupted files.

[pavankm]

Instead of raw binary content, the file stored in OneDrive contains the Base64 string wrapped in JSON quotes: "<base64>".
Similarly the downloaded files are corrupted in the same way

[MYMaj]

As for #237 i found workorund for this with Custom Conector and C# code in it.

The Problem

When building a PCF control (or Power Apps Custom Page) that needs to upload files to SharePoint via Microsoft Graph API through a Custom Connector, the file content never arrives correctly at the API endpoint.

The Graph API upload endpoint (PUT /drives/{driveId}/root:/{filePath}:/content) expects raw binary in the request body. The custom connector swagger defines this as:

- name: body
  in: body
  required: true
  schema:
    type: string
    format: binary

However, the PAC framework's executeAsync() method always JSON-serializes the body parameter before sending. This means:

What you pass | What gets sent | Result -- | -- | -- ArrayBuffer | {} | Empty file (2 bytes) Blob / File | {} | Empty file (2 bytes) Base64 string | "iVBORw0KGgo..." | Corrupted file (base64 text saved as-is) {$content, $content-type} | {"$content-type":"...","$content":"..."} | Corrupted file (JSON object saved)

The root cause is in connectorDataOperationExecutor.js → _buildOperationBodyParam():

// PAC framework always does this — no special handling for binary
return JSON.stringify(value);

There is no special handling for format: binary, Blob, ArrayBuffer, or the Power Automate $content/$content-type convention. Everything gets JSON.stringify()'d.

Note: This works perfectly fine in Power Automate flows (which have native binary support), but not from PCF controls using executeAsync().

The Solution: Custom Code in the Connector

Custom Connectors support C# custom code that intercepts requests before they reach the target API. The approach:

1. Send base64 as a plain JSON string from the PCF app (the framework handles this correctly)
2. Decode base64 → binary in the connector's custom code before forwarding to Graph API

Step 1: Update the Swagger Definition

Change the UploadFile operation body from format: binary to a plain type: string:

/drives/{driveId}/root:/{filePath}:/content:
  put:
    summary: Upload file to folder
    operationId: UploadFile
    consumes:
      - application/json          # ← was application/octet-stream
    parameters:
      - name: driveId
        in: path
        required: true
        type: string
      - name: filePath
        in: path
        required: true
        type: string
      - name: Content-Type
        in: header
        required: false
        type: string
      - name: body
        in: body
        required: true
        schema:
          type: string             # ← plain string, no format: binary
          description: Base64-encoded file content
    responses:
      default:
        description: default
        schema: {}

Step 2: Add Custom Code (C#)

In the connector editor → Code tab → enable Code Enabled → select UploadFile in the operations dropdown:

public class Script : ScriptBase
{
    public override async Task<HttpResponseMessage> ExecuteAsync()
    {
        if (this.Context.OperationId == "UploadFile")
        {
            // PAC framework sends: "iVBORw0KGgo..." (JSON-serialized base64 string)
            var json = await this.Context.Request.Content
                .ReadAsStringAsync()
                .ConfigureAwait(false);
        // Strip JSON quotes
        var base64 = json.Trim().Trim('"');

        // Decode base64 → binary
        var fileBytes = Convert.FromBase64String(base64);

        // Get Content-Type from header
        var mimeType = "application/octet-stream";
        if (this.Context.Request.Headers
            .TryGetValues("Content-Type", out var ctValues))
        {
            mimeType = ctValues.First();
        }

        // Replace body with raw binary
        this.Context.Request.Content = new ByteArrayContent(fileBytes);
        this.Context.Request.Content.Headers.ContentType =
            new System.Net.Http.Headers.MediaTypeHeaderValue(mimeType);
    }

    return await this.Context.SendAsync(
        this.Context.Request,
        this.CancellationToken
    ).ConfigureAwait(false);
}

}

Step 3: Client-side Code (TypeScript)

function fileToBase64(file: File): Promise<string> {

return new Promise((resolve, reject) => {

const reader = new FileReader();

reader.onload = () => {

const dataUrl = reader.result as string;

resolve(dataUrl.split(",")[1] ?? "");

};

reader.onerror = () => reject(new Error("Failed to read file."));

reader.readAsDataURL(file);

});

}

async function uploadDocument(driveId: string, filePath: string, file: File) {

const base64 = await fileToBase64(file);

const contentType = file.type || "application/octet-stream";
// base64 string passes through JSON serialization cleanly

return await SpgraphService.UploadFile(driveId, filePath, base64, contentType);

}

How It Works

Browser (PCF)          PAC Framework           APIM / Custom Code         Graph API

│                      │                        │                       │

│  base64 string       │                        │                       │

├─────────────────────►│  JSON.stringify()      │                       │

│                      ├───────────────────────►│  C# decodes base64   │

│                      │  "iVBORw0KGgo..."      │  to byte[]           │

│                      │                        ├──────────────────────►│

│                      │                        │  raw binary PUT       │

│                      │                        │                       │  ✅ File saved

Limitations

• 4 MB max — base64 encoding adds ~33% overhead, and custom connector custom code has a request size limit. For larger files, consider chunked upload or a Power Automate flow proxy.
• Custom code provisioning — enabling custom code requires an available Azure Function App slot in your region. If you get a FindAndAssignFunctionApp error, try a different region or wait.

Environment

• Power Apps Custom Pages (PAC CLI)
• @microsoft/power-apps SDK
• Custom Connector with OAuth2 → Microsoft Graph API

The Problem When building a PCF control (or Power Apps Custom Page) that needs to upload files to SharePoint via Microsoft Graph API through a Custom Connector, the file content never arrives correctly at the API endpoint.

The Graph API upload endpoint (PUT /drives/{driveId}/root:/{filePath}:/content) expects raw binary in the request body. The custom connector swagger defines this as:

• name: body
  in: body
  required: true
  schema:
  type: string
  format: binary
  However, the PAC framework's executeAsync() method always JSON-serializes the body parameter before sending. This means:

What you pass What gets sent Result
ArrayBuffer {} Empty file (2 bytes)
Blob / File {} Empty file (2 bytes)
Base64 string "iVBORw0KGgo..." Corrupted file (base64 text saved as-is)
{$content, $content-type} {"$content-type":"...","$content":"..."} Corrupted file (JSON object saved)
The root cause is in connectorDataOperationExecutor.js → _buildOperationBodyParam():

// PAC framework always does this — no special handling for binary
return JSON.stringify(value);
There is no special handling for format: binary, Blob, ArrayBuffer, or the Power Automate $content/$content-type convention. Everything gets JSON.stringify()'d.

Note: This works perfectly fine in Power Automate flows (which have native binary support), but not from PCF controls using executeAsync().

The Solution: Custom Code in the Connector
Custom Connectors support C# custom code that intercepts requests before they reach the target API. The approach:

Send base64 as a plain JSON string from the PCF app (the framework handles this correctly)
Decode base64 → binary in the connector's custom code before forwarding to Graph API
Step 1: Update the Swagger Definition
Change the UploadFile operation body from format: binary to a plain type: string:

/drives/{driveId}/root:/{filePath}:/content:
put:
summary: Upload file to folder
operationId: UploadFile
consumes:
- application/json # ← was application/octet-stream
parameters:
- name: driveId
in: path
required: true
type: string
- name: filePath
in: path
required: true
type: string
- name: Content-Type
in: header
required: false
type: string
- name: body
in: body
required: true
schema:
type: string # ← plain string, no format: binary
description: Base64-encoded file content
responses:
default:
description: default
schema: {}
Step 2: Add Custom Code (C#)
In the connector editor → Code tab → enable Code Enabled → select UploadFile in the operations dropdown:

public class Script : ScriptBase
{
public override async Task ExecuteAsync()
{
if (this.Context.OperationId == "UploadFile")
{
// PAC framework sends: "iVBORw0KGgo..." (JSON-serialized base64 string)
var json = await this.Context.Request.Content
.ReadAsStringAsync()
.ConfigureAwait(false);

        // Strip JSON quotes
        var base64 = json.Trim().Trim('"');

        // Decode base64 → binary
        var fileBytes = Convert.FromBase64String(base64);

        // Get Content-Type from header
        var mimeType = "application/octet-stream";
        if (this.Context.Request.Headers
            .TryGetValues("Content-Type", out var ctValues))
        {
            mimeType = ctValues.First();
        }

        // Replace body with raw binary
        this.Context.Request.Content = new ByteArrayContent(fileBytes);
        this.Context.Request.Content.Headers.ContentType =
            new System.Net.Http.Headers.MediaTypeHeaderValue(mimeType);
    }

    return await this.Context.SendAsync(
        this.Context.Request,
        this.CancellationToken
    ).ConfigureAwait(false);
}

}
Step 3: Client-side Code (TypeScript)

function fileToBase64(file: File): Promise {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const dataUrl = reader.result as string;
resolve(dataUrl.split(",")[1] ?? "");
};
reader.onerror = () => reject(new Error("Failed to read file."));
reader.readAsDataURL(file);
});
}

async function uploadDocument(driveId: string, filePath: string, file: File) {
const base64 = await fileToBase64(file);
const contentType = file.type || "application/octet-stream";

// base64 string passes through JSON serialization cleanly
return await SpgraphService.UploadFile(driveId, filePath, base64, contentType);
}
How It Works

Browser (PCF) PAC Framework APIM / Custom Code Graph API
│ │ │ │
│ base64 string │ │ │
├─────────────────────►│ JSON.stringify() │ │
│ ├───────────────────────►│ C# decodes base64 │
│ │ "iVBORw0KGgo..." │ to byte[] │
│ │ ├──────────────────────►│
│ │ │ raw binary PUT │
│ │ │ │ ✅ File saved
Limitations
4 MB max — base64 encoding adds ~33% overhead, and custom connector custom code has a request size limit. For larger files, consider chunked upload or a Power Automate flow proxy.
Custom code provisioning — enabling custom code requires an available Azure Function App slot in your region. If you get a FindAndAssignFunctionApp error, try a different region or wait.
Environment

Custom Connector with OAuth2 → Microsoft Graph API

[eschavez]

Thank you for your patience! The issue has been fixed in version 1.1.3 of the @microsoft/power-apps package.

To pick up the fix:

1. Update @microsoft/power-apps to 1.1.3 or later in your package.json
2. Run npm install
3. Re-run any setup commands using npx power-apps instead of the PAC CLI

For more details, see the npm quickstart documentation.

Please reopen if you continue to see this after upgrading.