Media Library Usage Examples

Learn how to integrate the Media Library components into your Base44 app.

Single Image Selection
// Single image selection
import MediaPicker from "../components/media/MediaPicker";

const [selectedImage, setSelectedImage] = useState(null);
const [showPicker, setShowPicker] = useState(false);

const handleImageSelect = (mediaItem) => {
  setSelectedImage(mediaItem);
};

<MediaPicker
  open={showPicker}
  onOpenChange={setShowPicker}
  onSelect={handleImageSelect}
  title="Select Image"
/>
Multiple Image Selection
// Multiple image selection
const [selectedImages, setSelectedImages] = useState([]);
const [showPicker, setShowPicker] = useState(false);

const handleImagesSelect = (mediaItems) => {
  setSelectedImages(mediaItems);
};

<MediaPicker
  open={showPicker}
  onOpenChange={setShowPicker}
  onSelect={handleImagesSelect}
  multiple={true}
  title="Select Images"
/>
Display Media by ID
// Display media by ID
import MediaDisplay from "../components/media/MediaDisplay";
import { getMediaById } from "../components/utils/mediaHelpers";

// Method 1: Using MediaDisplay component
<MediaDisplay
  mediaId="your-media-id-here"
  className="w-full h-48 object-cover rounded-lg"
  alt="Your alt text"
/>

// Method 2: Using utility function
const media = await getMediaById("your-media-id-here");
if (media) {
  console.log(media.url, media.filename);
}
Search Media
// Search media
import { searchMedia } from "../components/utils/mediaHelpers";

const handleSearch = async (query) => {
  const results = await searchMedia(query);
  console.log("Search results:", results);
};

// Search by filename or tags
await searchMedia("headshot");
await searchMedia("studio");
Integration Tips

In Forms

Use MediaPicker in forms to let users select images for profiles, posts, or content.

// In a form component
const [featuredImage, setFeaturedImage] = useState(null);

<MediaPicker
  open={showImagePicker}
  onOpenChange={setShowImagePicker}
  onSelect={(media) => {
    setFeaturedImage(media);
    // Save media.id to your form data
    setFormData(prev => ({
      ...prev,
      featured_image_id: media.id
    }));
  }}
/>

In Content Display

Use MediaDisplay to show images stored as IDs in your entities.

// Display image from entity
const BlogPost = ({ post }) => (
  <div>
    <h1>{post.title}</h1>
    {post.featured_image_id && (
      <MediaDisplay
        mediaId={post.featured_image_id}
        className="w-full h-64 object-cover"
        alt={post.title}
      />
    )}
    <p>{post.content}</p>
  </div>
);

Best Practices

  • • Store media IDs in your entities rather than URLs for better management
  • • Use alt text for accessibility and SEO
  • • Tag your media for better organization and searchability
  • • Use the MediaDisplay component for consistent error handling
  • • Validate file types and sizes before uploading