How can I resolve the 500 (Internal Server Error) I am encountering while trying to upload a file into a form using Webflow with uploadcare integration?

A 500 (Internal Server Error) when using Uploadcare with a Webflow form typically points to an issue on the server side of the Uploadcare integration, or a misconfiguration in the widget or third-party scripting involved.

1. Check Uploadcare Public API Key

• Make sure you are using the correct Uploadcare public key.
• An incorrect or missing public key will prevent the widget from initializing properly and may cause server errors when a file is uploaded.

2. Verify Uploadcare Widget Initialization

• Ensure the Uploadcare widget script is properly embedded in your Webflow project. Go to Page Settings > Before tag and confirm this script exists:
• (You should not see raw HTML here; use the Uploadcare-provided JS snippet.)
• Confirm that the input element using Uploadcare has the attributes:
• role="uploadcare-uploader"
• data-public-key="your_public_key"

3. Check Input Field Configuration

• The form input field connected to Uploadcare should not have both Uploadcare attributes and Webflow’s file input type at the same time.
• Prefer a simple Webflow text input or custom embed using Uploadcare’s widget.

4. Review Any Custom Code

• If you’ve written custom JavaScript to handle Uploadcare callbacks or form submission, errors in this code (like missing URLs or undefined variables) can invoke 500 errors.
• Use browser DevTools Console to check for JS errors before the form is submitted.

5. Confirm Domain Whitelisting in Uploadcare

• In the Uploadcare dashboard, go to your API Keys and check the “Allowed origins” setting.
• Include your Webflow domain (both the webflow.io subdomain and any custom domains).

6. Test With Uploadcare Dashboard or Standalone HTML

• Try uploading a file using just the Uploadcare widget in a blank HTML page.
• If the error persists outside of Webflow, the issue is likely in Uploadcare's setup (e.g., API settings, file restrictions, etc.).

7. Contact Uploadcare Support

• If everything seems correct and you still get 500 errors, this likely reflects a problem on Uploadcare’s backend, not Webflow.
• Collect your network logs and widget config, then contact Uploadcare support directly.

Summary

To resolve a 500 error using Uploadcare in Webflow, verify your public API key, ensure the Uploadcare widget is correctly initialized, check for JavaScript errors, and confirm domain whitelisting in Uploadcare’s dashboard. If all areas are correct and errors persist, the issue is likely on Uploadcare’s server side.