Fix Blank Editor for S3-hosted Files (>80KB) and Improve Upload UX (#1516) #3765
+45
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1516 #1516
Changes:
The Visibility Issue: Files under 80KB are stored in the database's content field. However, files exceeding 80KB are hosted on an S3 bucket, leaving the content field empty and providing a url instead. The editor component was previously only rendering the content property; since this was empty for S3 files, the editor window remained blank.
The UX Confusion: In uploader.js, large plaintext files are intercepted to be handled locally. Passing a string to Dropzone's done() callback automatically triggers an "error" state, rendering a red notification box that users mistook for an upload failure.
A. Lazy-Loading S3 Content
Action Implementation (client/modules/IDE/actions/files.js): Created fetchS3FileContent to handle asynchronous GET requests for files that have a url but no content.
Thunk Update (client/modules/IDE/actions/ide.js): Modified the setSelectedFile thunk. Now, whenever a file is selected, the IDE checks if it is a text file with missing content. If so, it triggers the fetch action to populate the editor on-demand.
B. UX Styling Improvements
Message Update (client/modules/IDE/actions/uploader.js): Updated the local interceptor message to be more descriptive.
CSS Enhancement (client/styles/components/_uploader.scss): Added a scoped override for .dz-error-message. When a file is marked with the .dz-success class, the background color now transitions to a success green, clearly indicating that the local handling was intended and successful.
Since a local development environment typically lacks production AWS/S3 credentials, I verified the fix using a State Injection (Mocking) Strategy:
Redux State Manipulation: Temporarily exposed the store globally and manually cleared the content of a local test file while injecting a raw GitHub URL into the url property.
Selection Trigger: Clicked the modified file in the sidebar to trigger the updated setSelectedFile thunk.
Network Confirmation: Observed the Network Tab in Chrome DevTools to verify a successful GET request was fired to the mock URL.
State Consistency: Confirmed via store.getState() that the fetched text successfully replaced the empty state, allowing the editor to render the file content correctly.
Users: Can now view and use larger scripts (e.g., jszip.min.js) that were previously inaccessible in the editor interface.
Clarity: The upload UX is now more intuitive, providing positive visual feedback for local file handling.
I have verified that this pull request:
npm run lint)npm run test)npm run typecheck)developbranch.Fixes #123