D7 Media

Provides a comprehensive media management framework for Drupal 7 with file browser, field widgets, WYSIWYG integration, and support for remote media sources.

media
59,808 sites
56
drupal.org
gui api field
media file management upload WYSIWYG browser youtube vimeo multimedia field widget Views

Overview

The Media module is a complete file and multimedia asset management framework for Drupal 7. It provides a unified user interface where editors and administrators can upload, manage, and reuse files and multimedia assets, regardless of whether they are hosted locally or on third-party services like YouTube or Vimeo.

The module replaces standard file upload fields with a sophisticated media browser interface that allows users to select existing files from a media library, upload new files, or add media from remote URLs. It integrates seamlessly with WYSIWYG editors through a dedicated submodule, enabling content creators to embed media assets directly into rich text content.

Media 7.x-2.x represents a significant architectural shift from earlier versions, moving from a custom media entity type to leveraging the File Entity module for file management. This provides better integration with Drupal's field system and Views while maintaining backward compatibility through migration helpers.

Features

  • Media browser dialog interface for selecting and uploading files with jQuery UI-based popup window
  • Field widget (Media browser) for file and image fields that replaces standard upload widgets
  • Views integration with custom display and style plugins for creating media browsing interfaces
  • WYSIWYG editor integration (CKEditor, TinyMCE) for embedding media in rich text content via submodule
  • Internet/remote media sources support for importing from URLs and services like YouTube and Vimeo
  • Bulk upload functionality using Plupload for uploading multiple files simultaneously
  • Thumbnail grid view for media administration alongside standard table view
  • Extensible browser plugin architecture for adding custom media sources
  • Custom image style (media_thumbnail) for consistent thumbnail display
  • File type icons for various media types (image, video, audio, document)
  • Entity Translation support for multilingual file management
  • Stream wrapper support for both local and remote file storage schemes
  • Input filter for converting media tags to rendered markup in text content

Use Cases

Building a Media Library for Content Editors

Enable Media and configure file fields on content types to use the Media browser widget. Editors can then browse existing media, upload new files, or search through the library when adding content. The thumbnail view at admin/content/file/thumbnails provides a visual way to manage all site media.

Embedding Media in WYSIWYG Content

Enable Media WYSIWYG submodule, configure your WYSIWYG profile to include the Media button, and enable the 'Convert Media tags to markup' filter on your text format. Content creators can click the Media button to browse and embed images, videos, and other files directly in their rich text content.

Adding YouTube/Vimeo Videos

Enable the Media Internet Sources submodule and install a provider module like Media: YouTube. Users can then paste YouTube URLs or embed codes, and the video will be stored as a file entity that can be embedded in content or attached to fields.

Bulk Uploading Media Assets

Enable Media Bulk Upload submodule (requires Plupload). The upload tab in the media browser will support multiple simultaneous uploads. Use the Import feature at admin/content/file/import to batch import files from the server filesystem.

Creating Custom Media Sources

Implement hook_media_browser_plugin_info() to add custom tabs to the media browser, and hook_media_internet_providers() to add support for new remote media services. Create a class extending MediaBrowserPlugin or MediaInternetBaseHandler.

Restricting Media Types per Field

Configure field widget settings for each media field to specify allowed file types (image, video, document), enabled browser plugins, and allowed URI schemes. This restricts what users can select or upload for specific fields.

Tips

  • Use the 'media_thumbnail' image style for consistent thumbnail display across the media browser and admin interfaces.
  • When creating Views for media browsing, use the 'media_browser' display and style plugins for proper integration with the media browser interface.
  • For better performance with large media libraries, configure Views caching on the media library view.
  • The media browser theme can be set separately from the site theme - use the admin theme for better compatibility with the popup interface.
  • Custom browser plugins should extend MediaBrowserPlugin and implement the view() method to provide their tab content.
  • Use hook_media_browser_params_alter() to customize media browser behavior based on context (e.g., different file type restrictions per field).
  • The 'WYSIWYG' view mode added by Media WYSIWYG can be configured separately to control how media appears in the editor vs. the rendered page.

Technical Details

Admin Pages 4
Media browser settings /admin/config/media/browser

Configure the behavior and display of the media browser dialog, including theme selection, popup dimensions, and overlay settings.

Thumbnails /admin/content/file/thumbnails

Manage files using a thumbnail grid view instead of the standard table view. Provides visual file browsing with checkboxes for bulk operations.

Import files /admin/content/file/import

Import files from the local filesystem into the media library. Requires the Media Bulk Upload submodule.

Web /file/add/web

Add files from internet URLs or remote services. Supports direct URLs and embed codes from services like YouTube and Vimeo.

Permissions 5
Administer media browser

Access media browser settings at admin/config/media/browser.

Use the media browser

Access and use the media browser popup to select and upload files.

Use Media WYSIWYG in an editor

Use the Media browser button in WYSIWYG editors. Restricted due to potential DoS vulnerability from image derivative generation.

Add media from remote services

Add media from remote sources such as other websites, YouTube, Vimeo, etc.

Import media files from the local filesystem

Use the file import functionality to add files from the server filesystem. Restricted access.

Hooks 13
hook_media_parse

Parses a URL or embedded code into a unique URI for media file storage.

hook_media_parse_alter

Alters the parsing of URLs and embedded codes into unique URIs.

hook_media_browser_plugin_info

Returns a list of plugins for the media browser tabs.

hook_media_browser_plugin_info_alter

Alters the list of media browser plugins.

hook_media_browser_plugins_alter

Alters the plugins before they are rendered in the media browser.

hook_media_browser_params_alter

Alters the parameters passed to the media browser for customization.

hook_media_widget_multiple_alter

Alters the media multiple elements widget table before rendering.

hook_media_internet_providers

Returns a list of Internet media providers for URL/embed code handling.

hook_media_internet_providers_alter

Alters the list of Internet media providers.

hook_media_wysiwyg_allowed_view_modes_alter

Alters the list of view modes allowed for a file embedded in WYSIWYG.

hook_media_wysiwyg_format_form_prepare_alter

Alters the WYSIWYG view mode selection form before other alters run.

hook_media_wysiwyg_token_to_markup_alter

Alters the rendered output generated by Media filter tags.

hook_media_wysiwyg_allowed_attributes_alter

Alters the list of attributes allowed in WYSIWYG media embeds.

Troubleshooting 6
Media browser popup doesn't open or JavaScript errors occur

Ensure jQuery UI libraries (dialog, draggable, resizable, tabs) are available. Clear Drupal and browser caches. Check for JavaScript conflicts with other modules.

WYSIWYG Media button not appearing

Verify Media WYSIWYG submodule is enabled, the media button is enabled in your WYSIWYG profile settings, and the user has 'use media wysiwyg' permission.

Embedded media not rendering in content

Enable the 'Convert Media tags to markup' filter on the text format used by the content. Ensure it runs before the 'Convert URLs into links' filter.

File types not matching after upgrade from Media 1.x

Enable the Media Migrate File Types submodule and visit admin/structure/file-types/upgrade to migrate legacy file types to File Entity types.

Permission denied errors when uploading

Check that users have 'create files' permission from File Entity and 'access media browser' from Media. For WYSIWYG, also grant 'use media wysiwyg' permission.

Bulk upload not working

Ensure Plupload and Multiform (7.x-1.3+) modules are installed and enabled. Check PHP upload limits (upload_max_filesize, post_max_size) in server configuration.

Security Notes 5
  • The 'use media wysiwyg' permission is marked as restricted because WYSIWYG forms generate image derivatives, which could lead to DoS vulnerabilities if exploited.
  • The 'import media' permission is restricted as it allows importing files from the server filesystem, which could expose sensitive files if misconfigured.
  • Media browser parameters from the HTTP query should not be trusted for security-sensitive decisions. Use hook_media_browser_params_alter() for secure parameter injection.
  • When implementing custom media internet providers, validate and sanitize all user input to prevent injection attacks.
  • File type restrictions in field widget settings are enforced client-side and server-side, but always validate uploads at the server level.