feat: add drag-and-drop logo upload for organizations - #4765

What is this PR about?

This PR introduces a drag-and-drop feature for uploading Organization Profiles/Logos. It brings parity to how icons are managed elsewhere in the application, but with a heavy emphasis on security, performance, and user experience.

User Experience (UX)

• Drag-and-Drop Integration: Integrated the Dropzone component into the "Add/Update Organization" dialog for seamless file uploads.
• Intelligent Input Masking: Instead of cluttering the "Logo URL" input with a massive Base64 string upon upload, the input gracefully masks it by displaying the uploaded filename (e.g., logo.png) or a fallback "Uploaded image" text.
• Instant Preview & Layout Stability: Added a fixed-size thumbnail preview next to the input field. It defaults to a GlobeIcon and instantly swaps to the uploaded image without causing jarring layout shifts.
• Dialog Stability Fix: Resolved a native UI conflict where clicking the file picker inside a nested DropdownMenu caused the dialog to prematurely close. Fixed by decoupling the AddOrganization dialog from the dropdown trigger.

Security

• SVG Sanitization: All .svg uploads are parsed through DOMPurify to strip arbitrary <script> tags and mitigate XSS risks.
• Unicode Base64 Safety: The sanitized SVG is converted to a byte array using TextEncoder before btoa encoding, completely preventing browser crashes when an SVG contains Unicode characters or emojis.
• Race Condition Prevention: Implemented a robust useRef invalidation system. If a user manually edits the URL, clears the input, or closes the dialog while a background upload is processing, the pending background task is instantly aborted and guaranteed not to overwrite the form state.

Performance

• Client-Side Compression: To prevent severe database bloat on the organization table, any raster images (JPG, PNG) uploaded via the dropzone are instantly processed through a background HTML Canvas, resized to a maximum of 256x256 pixels, and compressed into the highly efficient WebP format. This shrinks typical 2MB user uploads to roughly ~15KB before they ever hit the database.

Why and How

Users requested the ability to easily upload organization logos. However, storing raw, massive Base64 images directly into the PostgreSQL TEXT column creates unnecessary network/DB bottlenecks. Utilized FileReader to extract file contents, DOMPurify for SVG cleaning, and a native canvas context for downscaling raster images. Furthermore, the global Dropzone UI component was updated with a new classNameContent prop to allow targeted height overrides, ensuring this specific dropzone fits the form perfectly without affecting global instances.

Verification

• Tested manually in the browser.
• Verified dialog stability (no auto-close on file picker focus loss).
• Confirmed SVG sanitization strips arbitrary tags.
• Verified client-side compression drastically shrinks the Base64 payload prior to form submission.
• Checked local formatting and changes.

Checklist

Before submitting this PR, please make sure that:

• You created a dedicated branch based on the canary branch.
• You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
• You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

closes #4727

Screenshots (if applicable)

• Custom URL Input Working Perfectly
  

• Drag and Drop Working Perfectly
  

Greptile Summary

The PR adds drag-and-drop organization logo uploads with SVG sanitization, raster resizing, previews, and lifecycle safeguards.

• Supports JPEG, PNG, WebP, and sanitized SVG uploads.
• Resizes raster images to a maximum of 256×256 and stores them as WebP data URLs.
• Prevents stale upload completion after replacement, editing, clearing, or dialog closure.
• Adds configurable Dropzone content sizing for the organization form.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

_{Reviews (6): Last reviewed commit: "Merge branch 'Dokploy:canary' into feat/..." | Re-trigger Greptile}