Feat: Add FileUploadDialog #3221 (#4327)

### What problem does this PR solve?

Feat: Add FileUploadDialog #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/use-callback-ref.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined,
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    [],
+  );
+}
+
+export { useCallbackRef };