Render files in the Atlaskit Media Viewer component

Atlassian Developer Tools
, ,
#1

In my app, I use the Media Viewer component from Atlaskit UI.

I can only render images with the mediaItemType property with the value “external-image”.

See the code 
import React, {useState} from 'react';
import {IntlProvider} from 'react-intl';
import {MediaViewer} from '@atlaskit/media-viewer';
import './App.css';

const imageUri = 'https://war.ukraine.ua/wp-content/uploads/2022/03/shutterstock_2029545419-2.png';
const pdfUri = 'https://www.buds.com.ua/images/Lorem_ipsum.pdf';

function App() {
  const [imageDisplayed, setImageDisplayed] = useState(false);
  const [pdfDisplayed, setPdfDisplayed] = useState(false);

  const toggleImageMediaViewer = () => setImageDisplayed(prevState => !prevState);
  const togglePdfMediaViewer = () => setPdfDisplayed(prevState => !prevState);

  let mediaViewer = null;

  if (imageDisplayed) {
    const mediaIdentifier = {
      mediaItemType: 'external-image',
      name: 'Some image',
      dataURI: imageUri
    };
    mediaViewer = (
      <MediaViewer mediaClientConfig={{}}
                   selectedItem={mediaIdentifier}
                   dataSource={{list: [mediaIdentifier]}}
                   collectionName={''}
                   onClose={toggleImageMediaViewer}/>
    );
  } else if (pdfDisplayed) {
    const mediaIdentifier = {
      mediaItemType: 'file',
      name: 'Some PDF',
      dataURI: pdfUri
    };
    mediaViewer = (
      <MediaViewer mediaClientConfig={{}}
                   selectedItem={mediaIdentifier}
                   dataSource={{list: [mediaIdentifier]}}
                   collectionName={''}
                   onClose={togglePdfMediaViewer}/>
    );
  }

  return (
    <div className="App">
      <h3>Hello Atlassian Community</h3>

      <button onClick={toggleImageMediaViewer}>Show Image</button>
      <button onClick={togglePdfMediaViewer}>Show PDF</button>

      <IntlProvider locale="en">
        <>
          {mediaViewer}
        </>
      </IntlProvider>
    </div>
  );
}

export default App;

or GitHub project.

How can I render documents (plain texts, pdf, etc), play video & audio files in Media Viewer?

1 Like