Media Library component?

commentsBot · June 21, 2024, 12:49pm

Hi, you can see how it was done in other plugins. Long story short, there is strapi/helper-plugin and you can use hook useLibrary

github.com

nshenderov/strapi-plugin-ckeditor/blob/master/admin/src/components/Input/MediaLib/index.js

import React from "react";
import { prefixFileUrlWithBackendUrl, useLibrary } from "@strapi/helper-plugin";
import PropTypes from "prop-types";

const MediaLib = ({ isOpen, onChange, onToggle, editor, uploadConfig: { responsiveDimensions } }) => {
  const { components } = useLibrary();
  const MediaLibraryDialog = components["media-library"];

  const handleChangeAssets = (assets) => {
    let newValue = "";

    assets.map(({ name, url, alt, formats, mime, width, height }) => {
      if (mime.includes("image")) {
        if (formats && responsiveDimensions) {
          let set = "";
          let keys = Object.keys(formats).sort((a, b) => formats[a].width - formats[b].width);
          keys.map((k) => (set += prefixFileUrlWithBackendUrl(formats[k].url) + ` ${formats[k].width}w,`));
          newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" srcset="${set}" />`;
        } else {
          newValue += `<img src="${url}" alt="${alt}" width="${width}" height="${height}" />`;

This file has been truncated. show original