Skip to content

Add Image to Data URL Tool#16

Open
sabeerbikba wants to merge 3 commits intomainfrom
add-image-to-data-url-tool-7783974950407123146
Open

Add Image to Data URL Tool#16
sabeerbikba wants to merge 3 commits intomainfrom
add-image-to-data-url-tool-7783974950407123146

Conversation

@sabeerbikba
Copy link
Owner

Added a new tool "Image to Data URL" that allows users to upload images and convert them into Data URLs. It supports standard image formats (PNG, JPG, etc.) generating Base64 strings, and specifically offers URL-encoded output for SVGs. The tool includes image preview, file size info, and warnings for large files.


PR created automatically by Jules for task 7783974950407123146 started by @sabeerbikba

- Add `src/pages/ImageToDataUrl.jsx` to convert images to Base64 or URL-encoded Data URLs.
- Update `src/routes.jsx` to include the new tool in the navigation.
- Tool supports PNG, JPG, GIF, WEBP, SVG.
- Provides URL-encoded option specifically for SVGs as requested.
- Shows image preview and file info.
- Warns if image size exceeds 200KB.

Co-authored-by: sabeerbikba <59386700+sabeerbikba@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@vercel
Copy link

vercel bot commented Feb 18, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dev-tools Ready Ready Preview, Comment Feb 18, 2026 2:00am

Addresses CodeQL alert for "DOM text reinterpreted as HTML" by ensuring the `src` attribute of the preview image strictly starts with `blob:`. This prevents potential XSS if `previewUrl` were somehow tainted with a `javascript:` URL.

Also removed the `title` attribute from the file name display to reduce surface area for attribute injection concerns, although React escapes it.

Co-authored-by: sabeerbikba <59386700+sabeerbikba@users.noreply.github.com>
Addresses CodeQL alert for "DOM text reinterpreted as HTML" by implementing a strict regex validation for the `src` attribute of the preview image.
The regex `^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,` ensures only safe, expected image MIME types are rendered, preventing XSS vectors.

Also includes previously requested features:
- State persistence using `useLocalStorageState`.
- Drag and drop support.
- Monaco Editor integration for output.
- Improved UI with centered input.

Co-authored-by: sabeerbikba <59386700+sabeerbikba@users.noreply.github.com>
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.

1 participant

Comments