Media card

Don't forget to add polyfills for fetch, ES6 & ES7 to your product build if you want to target older browsers. We recommend the use of babel-preset-env & babel-polyfill

Description

This package provides the capability to display a preview of a file that has been already uploaded. It leverages the returned id opon a successful file upload and does all the work required to show the preview. Additionaly it also takes care of displaying the upload status of the file.

Usage

Props Definition

  import { Card } from '@atlaskit/media-card';
  import { MediaClientConfig } from '@atlaskit/media-core';

  const mediaClientConfig = {
    authProvider,
  };

  // external url preview
  const urlPreviewId = {
    mediaItemType: 'external-image',
    dataURI: 'http://external-image-url',
  };

  <Card mediaClientConfig={mediaClientConfig} identifier={urlPreviewId} />;

  // stored file
  const fileId = {
    mediaItemType: 'file',
    id: 'some-file-id',
    collectionName: 'some-collection-name',
  };

  <Card mediaClientConfig={mediaClientConfig} identifier={fileId} />;

File Card

Generic file

Video file

Error UI Design Matrix for Media Card

In the past we have refactored the list of Media Card's error UI in 4 categories: Generic Error, Rate Limited Error, Polling Max Attempts Error and Upload Error. All of this is available to be previewed in Card View Matrix example page.

The list of the error UI design can be referenced here.