Add fallback if crypto.randomUUID() is not available

[ildyria]

This pull request refactors how unique IDs are generated for uploadable files throughout the application. Instead of directly using crypto.randomUUID(), a new useRandomId composable is introduced to provide a consistent and fallback-safe method for generating random IDs. All relevant file upload logic is updated to use this new approach.

ID Generation Consistency and Fallback:

• Added a new useRandomId composable in resources/js/composables/useRandomId.ts that generates a UUID using crypto.randomUUID() if available, or falls back to a manual UUID implementation if not.

Refactoring Upload Logic to Use useRandomId:

• Updated all instances in CameraCapture.vue, UploadPanel.vue, album/folderDrop.ts, and album/uploadEvents.ts to generate file uids using generateId() from the new composable instead of crypto.randomUUID(). This ensures consistent and reliable ID generation across all upload entry points. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Summary by CodeRabbit

• Refactor
  • Consolidated upload ID generation across all upload methods (file selection, folder drops, and pasted media) to improve reliability and consistency.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new useRandomId composable is introduced that wraps UUID generation, preferring crypto.randomUUID() and falling back to a Math.random-based UUID template. All upload entry points (CameraCapture, UploadPanel, folderDrop, uploadEvents) replace their direct crypto.randomUUID() calls with generateId() from this composable.

Changes

useRandomId composable and upload UID migration

Layer / File(s)	Summary
useRandomId composable definition resources/js/composables/useRandomId.ts	Exports useRandomId() returning a generator that uses crypto.randomUUID() when available and falls back to a Math.random-based UUID-like string.
Upload UID migration to generateId() resources/js/components/modals/CameraCapture.vue, resources/js/components/modals/UploadPanel.vue, resources/js/composables/album/folderDrop.ts, resources/js/composables/album/uploadEvents.ts	Each file imports useRandomId, initializes a local generateId function, and replaces crypto.randomUUID() with generateId() at every point where a uid is assigned to an upload queue entry.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Poem

🐇 A UUID once lived, wild and free,
Calling crypto wherever it'd be.
Now a composable wraps it with care,
With a fallback for browsers laid bare.
No more scattered calls — just one tidy place,
The rabbit hops forward with elegant grace! 🎉

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

resources/js/composables/useRandomId.ts (1)

3-11: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Consider adding crypto.getRandomValues() as an intermediate fallback.

The current implementation falls back directly from crypto.randomUUID() to Math.random(). However, crypto.getRandomValues() is more widely supported than crypto.randomUUID() (available since Chrome 11 vs. Chrome 92) and provides cryptographically secure randomness, while Math.random() is neither secure nor guaranteed to have sufficient entropy for collision avoidance.

A three-tier approach would improve ID uniqueness and quality:

1. crypto.randomUUID() (best, newest)
2. crypto.getRandomValues() (good, widely supported)
3. Math.random() (fallback for very old environments)

🔐 Proposed three-tier fallback implementation

 export function useRandomId(): () => string {
 	function generateId(): string {
 		if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
 			return crypto.randomUUID();
 		}
+
+		// Fallback to crypto.getRandomValues if available (more secure than Math.random)
+		if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+			const bytes = new Uint8Array(16);
+			crypto.getRandomValues(bytes);
+			// Set version (4) and variant bits per RFC 4122
+			bytes[6] = (bytes[6] & 0x0f) | 0x40;
+			bytes[8] = (bytes[8] & 0x3f) | 0x80;
+			const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+			return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+		}
 
+		// Final fallback to Math.random for very old environments
 		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
 			const r = (Math.random() * 16) | 0;
 			const v = c === "x" ? r : (r & 0x3) | 0x8;
 			return v.toString(16);
 		});
 	}
 
 	return generateId;
 }

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 073c0572-8d68-4fa8-91f0-8ce93fe9dc4d

📥 Commits

Reviewing files that changed from the base of the PR and between 41c3cef and a03fcbf.

📒 Files selected for processing (5)

• resources/js/components/modals/CameraCapture.vue
• resources/js/components/modals/UploadPanel.vue
• resources/js/composables/album/folderDrop.ts
• resources/js/composables/album/uploadEvents.ts
• resources/js/composables/useRandomId.ts