Concise Code for File Upload in Power Apps with Fetch API

Upload file to Dataverse from PowerApps

Sometimes, business users want to be able to update and upload files to records in a custom UI outside of the built in file upload controls.  

In this concise dev guide, we’ll explore a streamlined approach to uploading files to a file attribute column in Power Apps. We’ll be uploading to our file-type column: dev_document column on our custom table: dev_document 

This method will work whether you’re writing Javascript web resources or writing a PCF control.  

The code snippet emphasizes simplicity, creating the record first and then utilizing the modern Fetch API for a PATCH request.  

Code Overview

				
					const entityId = "..."; 
const fileName = "..."; 
const file: File; 
 
const documentRecord = { 
    dev_name: fileName, 
}; 
 
webapi.createRecord("dev_document", documentRecord) 
    .then(async (res) => { 
        if (res.id) { 
            const url = `<ORG-BASE-URL>/api/data/v9.2/dev_documents(${res.id})/dev_documentcolumn`; 
 
            const arrayBuf = await file.arrayBuffer(); 
 
            const headers = new Headers({ 
                'x-ms-file-name': fileName, 
                'Content-Type': 'application/octet-stream', 
                'Accept-Encoding': 'gzip, deflate', 
                'OData-MaxVersion': '4.0', 
                'OData-Version': '4.0' 
            }); 
 
            const options = { 
                method: 'PATCH', 
                headers: headers, 
                body: arrayBuf 
            }; 
 
            const response = await fetch(url, options); 
 
            if (response.ok) { 
                console.log("Upload success!"); 
            } else { 
                const error = await response.json(); 
                console.log(`Error: ${error.error.message}`); 
            } 
        } 
    }).catch((err) => { 
        console.error(err); 
    }); 
				
			

Key Points: 

  1. Entity and Column Specifics: This code is tailored for the dev_document entity with a file-type column named dev_documentcolumn. 

  2. Record Creation First: The script starts by creating a record using the webapi.createRecord function, ensuring the record ID is obtained for later use. 

  3. Direct PATCH Request: Instead of the legacy XMLHttpRequest, this approach utilizes the modern Fetch API to directly send a PATCH request, simplifying the file upload process. 

  4. Binary File Compatibility: The code crucially calls .arrayBuffer() to obtain the raw bytes of the file. This step ensures compatibility with binary files, allowing for a seamless upload process. 

  5. Async/Await: The modern standard when writing Javascript is to use the async/await keywords to perform non-blocking operations instead of the callback pattern.  

Important Note: File Size Limitation: This method supports file uploads up to 128 MB. Files exceeding this size may encounter issues during the upload process. 

For a more detailed understanding of file column data in Power Apps, including additional considerations and best practices, refer to the official Microsoft documentation: Upload a file in a single request using Web API.

Explore this resource to enhance your knowledge and address specific scenarios related to file uploads in Power Apps.