Upload beautify

resources/js/app.js

@@ -1,7 +1,24 @@
 import './bootstrap';
 
 import Alpine from 'alpinejs';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import AvatarUploader from './components/profile/AvatarUploader';
 
 window.Alpine = Alpine;
 
 Alpine.start();
+
+document.querySelectorAll('[data-avatar-uploader="true"]').forEach((element) => {
+	const uploadUrl = element.getAttribute('data-upload-url') || '';
+	const initialSrc = element.getAttribute('data-initial-src') || '';
+	const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+
+	createRoot(element).render(
+		React.createElement(AvatarUploader, {
+			uploadUrl,
+			initialSrc,
+			csrfToken,
+		})
+	);
+});