@paroicms/front-media-gallery/dist/UploadingGalleryItem/UploadingGalleryItem.jsx

Basic media gallery react component for Paroi CMS.

import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { HiDotsHorizontal } from "react-icons/hi";
import filePlaceholder from "../../assets/images/file-placeholder.jpeg";
import pdfPlaceholder from "../../assets/images/pdf-placeholder.png";
export default function UploadingGalleryItem({ localMedia, progress, onAbort, }) {
    const { t } = useTranslation();
    const [localUrl, setLocalUrl] = useState();
    const revokeUrl = useCallback(() => {
        localUrl && URL.revokeObjectURL(localUrl);
    }, [localUrl]);
    useEffect(() => {
        if (/^image/.test(localMedia.type)) {
            setLocalUrl(URL.createObjectURL(localMedia));
        }
        else {
            if (/pdf/.test(localMedia.type)) {
                setLocalUrl(pdfPlaceholder);
            }
            else {
                setLocalUrl(filePlaceholder);
            }
        }
    }, []);
    useEffect(() => {
        return () => revokeUrl();
    }, [revokeUrl]);
    return (<div className="Media">
      {onAbort && (<div className="Media-dropdown">
          <button className="Media-dropdownBtn" type="button">
            <HiDotsHorizontal />
          </button>

          <div className="Media-content">
            <li onClick={onAbort} onKeyUp={onAbort}>
              {t("frontMediaGallery.cancelUpload")}
            </li>
          </div>
        </div>)}
      <div className="Media-image">
        <img src={localUrl} alt={localMedia.name}/>
      </div>

      <div className="Media-progress">
        <div className="progress" style={{ width: `${progress}%` }}/>
        <div className="progressValue">{progress}%</div>
      </div>
    </div>);
}