web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Microsoft Dynamics 365 | Integration, Dataverse...
Suggested Answer

PCF control input property

(4) ShareShare
ReportReport
Posted on by 89
Hi everyone,
 
My business requirement is upload the tif file from local pc and convert to base64 and then pass through custom API  to plugin. The tif file is minimum 350MB. The solution I want to use is to develop a PCF which takes the tif file as input property, then convert to base64 and pass to custom API. Per check with documentation(Property Element - Power Apps | Microsoft Learn), the data type we can use contains maximum 1,048,576 text characters(Multiple). if this is true, is there any workaround for this technical hurdle? And I also have to handle output property if it exists.
 
Thanks in advance!
I have the same question (0)
  • Suggested answer
    Ramesh Kumar Profile Picture
    7,529 Super User 2025 Season 2 on at
    Hi,
     
    I think you can do split the Base64 string into multiple parts or you can also use the Azure Blob Storage or SharePoint which is good option to save the data and upload.
     
    Thanks
    Ramesh
     
    If this helped you, please check the box Does this answer your question?
     
     
  • HH-22102055-0 Profile Picture
    89 on at
    @Ramesh Kumar Actually after the base64 file passes through custom API to plugin, the plugin will spilt the file into individual PDF and store in SharePoint. So ideally before the plugin process, we do not want to store the base64 file into Azure Blob Storage or SharePoint. I am thinking if it's possible to include everything into that PCF control, like upload tiff file, convert to base64, and then pass to custom API while use Object as output property. but so far I cannot find out any file size limit for output Object type.
  • Suggested answer
    Dharanidharan Profile Picture
    638 Super User 2025 Season 2 on at

    Chunking the File: One approach is to split the TIFF file into smaller chunks, convert each chunk to base64, and then send these chunks sequentially to the API. This way, you can bypass the character limit by processing smaller segments of the file.

     

    Using External Storage: Another option is to upload the TIFF file to an external storage service (e.g., Azure Blob Storage) and then pass the URL of the stored file to the custom API. This method avoids the need to handle large base64 strings within PowerApps.

     

    Custom Connector: You could create a custom connector that handles the file upload and conversion outside of PowerApps. The connector can manage the large file and return the necessary data or status to your PowerApps component.

     

    I hope these suggestions help! If you need further assistance or have any questions, feel free to ask. 😊

  • HH-22102055-0 Profile Picture
    89 on at
    @Dharanidharan Thank you very much for the tips and advise.
     
    Now I am writing everything(pick a tiff file from local PC, and extract fileName to store in the responding fields shown in the UI) into that PCF. The PCF is React field template, which I will insert it into a custom page. Right now the passing of custom API request parameters to custom API(an action)is another technical hurdle for me.
     
    During debug, the webAPI is available under this.props.context. I tried this.props.context.webAPI.execute(apiRequest). It complains that Property 'execute' does not exist on type 'WebApi'. And I tried this.props.context.webAPI.createRecord(apiRequest). It complains that Expected 2 arguments, but got 1; An argument for 'data' was not provided. I want to say that this custom API is a custom action, which is not really related to any entity/table. The base64 file contents has to be split into individual PDF and then create record on corresponding table. that's why I cannot supply 2 arguments to createRecord(). 
     
    I commented out above 2 methods and still use this.context.webAPI.execute(apiReqest). but the console give error: TypeError: Cannot read properties of undefined (reading 'execute').
    below is my code:  
    private callCustomAPI= async () =>{
     
        // Prepare the input parameter as a JSON string
        const inputParamValue = {
           new_customAPI_TifBase64FileParam: [this.state.fileContent], // String array for Base64 encoded file
            new_customAPI_RollTypeParam: this.state.rollType,
            new_customAPI_RollYearParam: this.state.rollYear,
            new_customAPI_RollNumberParam: this.state.rollNum
        };
     
        try {
            console.log('Calling custom action with input:', inputParamValue);
     
            console.log('DEGUG PROPS CONTEXT: ', this.props.context);
         
            // Prepare the API request with the correct metadata and parameters
            const apiRequest = {
                getMetadata: () => ({
                    operationType: 0, // Operation type (0 for action)
                    operationName: "new_customAPI", // Custom API action name
                    parameterTypes: {
                        new_customAPI_TifBase64FileParam: {
                            typeName: "Collection(Edm.String)", // Define the array of strings (Base64 encoded file)
                            structuralProperty: 4
                        },
                        new_customAPI_RollTypeParam: {
                            typeName: "Edm.String", // Define string parameter
                            structuralProperty: 1
                        },
                        new_customAPI_RollYearParam: {
                            typeName: "Edm.String", // Define string parameter
                            structuralProperty: 1
                        },
                        new_customAPI_RollNumberParam: {
                            typeName: "Edm.String", // Define string parameter
                            structuralProperty: 1
                        }
                    }
                }),
                new_customAPI_TifBase64FileParam: inputParamValue.new_customAPI_TifBase64FileParam,
                new_customAPI_RollTypeParam: inputParamValue.new_customAPI_RollTypeParam,
                new_customAPI_RollYearParam: inputParamValue.new_customAPI_RollYearParam,
                new_customAPI_RollNumberParam: inputParamValue.new_customAPI_RollNumberParam
            };
     
            // Log for debugging
            console.log(`Calling custom action 'new_customAPI' with Input Parameter: ${JSON.stringify(inputParamValue)}`);
     
            // ts-expect-error Suppressing type error due to custom Web API call
            const response = await this.context.webAPI.execute(apiRequest);
            // const response = await this.props.context.webAPI.execute(apiRequest);                  // const response = await this.props.context.webAPI.createRecord(apiRequest);
     
           
            const jsonResponse = await response.json();
            console.log(`Custom action response: ${JSON.stringify(jsonResponse)}`);
     
            // Extract and return the output value from the response if needed
            const result = jsonResponse.result || "";
            if (result) {
                alert('File passed successfully!');
            } else {
                alert('Error occurred during the file pass through custom API.');
            }
     
        } catch (error) {
            console.error('Error calling custom action: ', error);
            alert('An error occurred while passing the file.');
            throw error;
        }
    }

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Leaderboard > Microsoft Dynamics 365 | Integration, Dataverse, and general topics

#1
iampranjal Profile Picture

iampranjal 41

#2
Martin Dráb Profile Picture

Martin Dráb 36 Most Valuable Professional

#3
Satyam Prakash Profile Picture

Satyam Prakash 35

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans