Search code examples
salesforcerestpowerappspowerapps-canvas

Canvas Power App to upload file to Salesforce using Rest API


I am a newbie to PowerApps and the flow automations. I am building a simple Canvas Power App that receives the user input then the JSON is composed and the JSON is posted to the Salesforce using the REST API through the flows. Submit button action is like below

Collect(
     FormInfo,   {
         name: nameInput.Text,
         title: titleInput.Text,
         manager: managerInput.Text,
         phoneNumber: phoneNumInput.Text,
         email: emailInput.Text,
         startDate: Text(startDateInput.SelectedDate),
         roleProfileInfo: roleProfileInfoInput.Text,
         userSubmitting: User().Email   }
 );
 Set(FormObj,JSON(FormInfo));
    
 SFNewUserRequest_1.Run(FormObj);
    
    
 Reset(nameInput);
 Reset(titleInput);
 Reset(managerInput);
 Reset(phoneNumInput);
 Reset(emailInput);
 Reset(startDateInput);
 Reset(roleProfileInfoInput);

The user input is composed as JSON and sending it to the flow. I am not sure how I can add an upload file in the power app that needs to be sent to Salesforce through the REST service. Most of the examples out there are doing the loading the file to Sharepoint library, I just wanted to know if this is also ossible.


Solution

  • It is possible. In some cases, you have to get creative to parse out the correct Base64 encoded image data (if attempting to pass .jpg/.png's to Power Automate).

    Here is some code I use OnSelect of a Save button after user selects an image using the Add Media control:

    Set(varFileExt, Right(btnAddMedia.FileName, 3));
    
    Collect(colPhotoForFlow,
        {
            projectGUID: varGUID,
            picUri: imgAddedMedia.Image,
            picFilename:
                If(
                    btnAddMedia.FileName = "image.jpg",
                    Concatenate(
                        Text(Now(), "[$-en-US]yyyy-mm-dd_hhmmss"),
                        ".jpg"
                    ),
                    btnAddMedia.FileName
                ),
            fileExtension: varFileExt,
            picJSON: 
                If(
                    Or(
                        Lower(varFileExt) = "jpg",
                        Lower(varFileExt) = "jpeg"
                    ),
                        Mid(JSON(imgAddedMedia.Image, IncludeBinaryData), 25, Len(JSON(imgAddedMedia.Image, IncludeBinaryData)) - 25),
                    
                    Lower(varFileExt) = "png",
                        Mid(JSON(imgAddedMedia.Image, IncludeBinaryData), 24, Len(JSON(imgAddedMedia.Image, IncludeBinaryData)) - 24)
                ),
            picCaption: txtCaption.Text
        }
    );
    
    Reset(txtCaption);
    Reset(btnAddMedia)
    

    Theres a lot of (valuable) stuff to unpack here:

    • varFileExt is used because .jpg's have 4 characters in their Base64 header ("jpeg" whereas .png's have only 3 "png")
      • Hence the Mid(25) vs Mid(24) for Base64 parsing
    • If user is on mobile device and they take a picture using the app, PowerApps will autoname the image image.jpg
      • Hence the If() statement for file naming

    Here is some code I use OnSelect of a final Submit button after user is done uploading images:

    Set(varUploadPhotos, JSON(colPhotoForFlow, IncludeBinaryData));
    PA_PICS_TO_ENDPOINT.Run(varUploadPhotos)
    

    You can adapt this for other file types as well.