From e07548ca71e7ffc211acb53e8aa556ef2fe660e6 Mon Sep 17 00:00:00 2001
From: Jason Skipper <jasonskipper@gmail.com>
Date: Sat, 26 Feb 2022 05:46:19 -0600
Subject: [PATCH] feat: add width, height, size, mime, responsive data to image
 tool

This feature adds in the width, height, size, mime, and the responsive image data to the image tool. It saves all of that information to the database and is returned so that the user can use that information in their frontend.

This addresses several open and closed issues:
- #6
- #16
- #22 (duplicate of closed 6)
---
 admin/src/components/medialib/component.js | 5 +++++
 admin/src/components/medialib/utils.js     | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/admin/src/components/medialib/component.js b/admin/src/components/medialib/component.js
index c7bdc34..2e77886 100644
--- a/admin/src/components/medialib/component.js
+++ b/admin/src/components/medialib/component.js
@@ -16,10 +16,15 @@ const MediaLibComponent = ({isOpen, onChange, onToggle}) => {
   };
 
   const handleSelectAssets = files => {
+    console.log(files);
     const formattedFiles = files.map(f => ({
       alt: f.alternativeText || f.name,
       url: prefixFileUrlWithBackendUrl(f.url),
+      width: f.width,
+      height: f.height,
+      size: f.size,
       mime: f.mime,
+      formats: f.formats
     }));
     onChange(formattedFiles);
   };
diff --git a/admin/src/components/medialib/utils.js b/admin/src/components/medialib/utils.js
index 54a5107..a9c0212 100755
--- a/admin/src/components/medialib/utils.js
+++ b/admin/src/components/medialib/utils.js
@@ -11,6 +11,8 @@ export const getToggleFunc = ({openStateSetter, indexStateSetter}) => {
 export const changeFunc = ({indexStateSetter, editor, data, index}) => {
   let insertedBlocksCount = 0;
   data.forEach((entry) => {
+
+    console.log(entry);
     if (!entry.mime.includes("image")) {
         return;
     }
@@ -18,7 +20,12 @@ export const changeFunc = ({indexStateSetter, editor, data, index}) => {
     const newBlockType = "image";
     const newBlockData = {
       file: {
-        url: entry.url.replace(window.location.origin, "")
+        url: entry.url.replace(window.location.origin, ""),
+        mime: entry.mime,
+        height: entry.height,
+        width: entry.width,
+        size: entry.size,
+        responsiveUrls: [entry.formats]
       },
       caption: "",
       withBorder: false,