Skip to content

Conversation

@singhmahipal
Copy link

@singhmahipal singhmahipal commented Dec 10, 2025

This PR improves the user experience in the p5.js Web Editor by making it clear that login is required to upload files. Previously, users could not see the “Upload File” button unless they were logged in, which caused confusion when trying to use the image() function or upload assets.

With this update:

Fixes #3079

  • The Upload File button is now visible even when unauthenticated.
  • Clicking the button prompts users to log in, clearly indicating that authentication is required.
  • Users receive immediate guidance on how to access the feature, improving accessibility and reducing friction.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • has no typecheck errors (npm run typecheck)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #3079
  • meets the standards outlined in the accessibility guidelines

Before:

Screenshot 2025-12-03 175300
  • Users could not see the Upload File button unless logged in.
  • Users attempting to use image() with local files had no indication that login was required.
  • This led to confusion and unnecessary trial-and-error.

After:

Screenshot 2025-12-10 192153
  • Upload File button is always visible.
  • Unauthenticated users are prompted to log in when attempting to upload a file.
  • A tooltip or message informs users about the login requirement directly in the UI.
  • Clear and consistent messaging enhances user guidance and accessibility.

Implementation Details:

  1. Added conditional rendering for the Upload File button to show it to all users.

  2. Integrated a login prompt for unauthenticated users attempting to upload.

  3. Updated the image() and file upload UI with:

    • A subtle 🔒 Login required badge.
    • Tooltip/inline message for clarity.
  4. Ensured design consistency with existing UI and accessibility standards.

  5. Modified relevant documentation and contributor guides to reflect this change.


Files Modified:

  • UI components: client/modules/IDE/components/CollectionList, client/components/Menubar, client/styles/components/_editor.scss, etc.
  • Utilities: client/utils/p5-instance-methods-and-creators.json, client/utils/p5-javascript.js.
  • Backend: server/controllers/user.controller, server/utils/fileUtils.js.
  • GitHub workflows and documentation for PR contribution.

Benefits:

  • Improves user onboarding for new contributors and students.
  • Enhances accessibility and clarity for unauthenticated users.
  • Reduces confusion when using image() and uploading assets.
  • Aligns UI behavior with expected functionality across the editor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Notation for the need of login to upload (image) files

1 participant