I’m working on a Figma plugin and running into a frustrating error. When I try to send file data from my UI to the main plugin code, I get this error message: “Cannot wrap function”
My plugin is pretty simple right now. I have a file picker where users can select images, and when they click submit, I want to log the file information to the console. The problem happens when I use postMessage to send the file data between the UI and the main plugin script.
Here’s my HTML interface:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File Upload Plugin</title>
</head>
<body>
<h3>Select Images</h3>
<input type="file" id="fileSelector" accept="image/*" multiple>
<button id="submitBtn">Submit Files</button>
<script>
document.getElementById('submitBtn').addEventListener('click', function() {
const selector = document.getElementById('fileSelector');
const selectedFiles = selector.files;
console.log('Selected files:', selectedFiles);
parent.postMessage({ pluginMessage: { action: 'process-files', data: selectedFiles } }, '*');
});
</script>
</body>
</html>
And here’s my main plugin code:
figma.showUI(__html__);
figma.ui.onmessage = async (message) => {
if (message.action === 'process-files') {
const fileData = message.data;
console.log('Received files:', fileData);
}
figma.closePlugin();
};
Has anyone else encountered this wrapping function error before? What am I doing wrong with the file handling?
Figma’s security model blocks you from sending file objects directly. Files have native browser methods that can’t be cloned through postMessage channels. You’re trying to send the entire FileList object, but it contains non-serializable function references.
Don’t send raw file objects. Extract the serializable data instead. Use the FileReader API to read each file’s content before sending it. Convert files to base64 strings or Uint8Array formats, then bundle them with metadata like filename, size, and MIME type. This keeps all the info you need while avoiding the wrapping restriction.
I’ve done this in production plugins for bulk image imports. The trick is preprocessing files in your UI thread, then sending only the processed data to the main plugin context.
This happens because Figma’s sandboxed environment blocks direct file object transfers through postMessage. File objects have methods and properties that can’t be serialized - that’s why you’re getting the wrapping error. You’ll need to read the file contents first. In your UI script, use FileReader to convert files to base64 or array buffers. Try reader.readAsDataURL(file) for each file, then send that data string with the filename and type info. I’ve used this method in several plugin projects for handling user uploads and it works great.
Had this exact issue last month building a batch image processing plugin. File objects have functions that can’t serialize across the postMessage boundary - that’s your problem.
Sure, manual file conversion works, but you’ll write tons of repetitive code for multiple files, errors, and progress tracking. Gets messy quick when you scale.
I ditched all that and automated the whole pipeline instead. Built a workflow that handles uploads, converts to the right format, processes metadata, and feeds everything back to Figma automatically. No more FileReader loops or conversion state headaches.
Automation saved me hours of debugging and made the plugin rock solid. Users drop files, everything happens in the background.
Check out automated file processing workflows: https://latenode.com
This error drove me crazy for days when I started making plugins. The problem is Figma’s iframe security - File objects have native browser functions that can’t cross the postMessage boundary between your UI and main thread.
Here’s what fixed it for me: create an async function in your UI script that processes files before sending them. Don’t pass selectedFiles directly. Instead, loop through each file and use await file.arrayBuffer() to get the binary data. Then build a plain object with the buffer, filename, and type properties. You’ll get clean data that passes through postMessage without any issues.
The trick is understanding Figma wants pure data objects, not complex browser APIs. Once I got that, file handling became easy in all my plugins.
yeah, classic figma sandboxing problem. postMessage can’t send file objects because they have methods attached. quick fix: loop through your files array and convert each file using file.arrayBuffer() or file.text() to get the actual content, then send that instead of the raw file object.
i totally feel ur pain! u cant send file obj directly through postMessage. try using FileReader to convert them to dataURL or arraybuffer, then send that. it should help with that wrapping error.