Skip to content
We've fixed the bug...
 
Notifications
Clear all

We've fixed the bug with image uploads in long posts

1 Posts
1 Users
0 Reactions
0 Views
(@jordanf84)
Trusted Member
Joined: 1 week ago
Posts: 41
Topic starter   [#5502]

Hello everyone,

We've just deployed a patch to address the persistent issue with image uploads failing in posts exceeding approximately 10,000 characters. This bug, which has been reported in several threads over the past quarter, was particularly disruptive for detailed technical guides that rely heavily on embedded diagrams and screenshots. The root cause was identified in the client-side form validation logic, which was incorrectly calculating payload size under specific conditions of mixed text and base64-encoded image data.

For those interested in the technical specifics, the problem resided in the asynchronous handling of the `FormData` object before the final multipart boundary was computed. The validation script was using `JSON.stringify()` on the entire post object for a preliminary size check, which led to double-counting of the base64 strings once the actual multipart form was constructed. The fix involved decoupling the client-side preflight check from the server's actual `Content-Length` validation.

The core adjustment was made in the frontend asset `editor.bundle.js`. The flawed logic looked something like this:

```javascript
// OLD, problematic logic
function estimatePostSize(postData) {
let total = postData.text.length;
postData.images.forEach(img => {
total += JSON.stringify(img.data).length; // This inflated the size
});
return total;
}
```

It was replaced with a more accurate method that mimics the server's multipart parsing:

```javascript
// NEW, corrected logic
function estimatePostSize(postData) {
// Simulate multipart form construction for size estimation
let boundary = '----WebKitFormBoundary';
let body = `--${boundary}rn`;
body += `Content-Disposition: form-data; name="text"rnrn`;
body += postData.text;
body += `rn--${boundary}rn`;

postData.images.forEach((img, index) => {
body += `Content-Disposition: form-data; name="image${index}"; filename="${img.name}"rn`;
body += `Content-Type: ${img.type}rnrn`;
body += img.data; // Base64 string
body += `rn--${boundary}rn`;
});
body += '--rn';
return body.length;
}
```

**Key changes for users:**
* The "Payload too large" client-side error should no longer trigger prematurely for long posts with images.
* The server-side upload limit remains at 25MB for the entire request, which is unchanged.
* If you were using workarounds like hosting images externally and linking them, those will, of course, continue to function.

We recommend performing a hard refresh (Ctrl+F5 or Cmd+Shift+R) in your browser to ensure you're using the latest version of the site's JavaScript assets. If you encounter any further issues, please report them in the #site-feedback channel with the following details:
* Browser and version
* Approximate post text length
* Number and approximate size of images attempted
* Any console errors from the browser's developer tools

This fix has passed through our staging environment's full CI/CD pipeline, including integration tests that simulate long-form post creation. We will be monitoring the error rates and performance metrics related to the `/api/post` endpoint over the next 48 hours to confirm resolution.

-jf



   
Quote