Add media_library.config.max_file_size option (#3028)

* feat: add media_library.config.max_file_size option

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js

@@ -40,6 +40,7 @@ class MediaLibrary extends React.Component {
     hasNextPage: PropTypes.bool,
     isPaginating: PropTypes.bool,
     privateUpload: PropTypes.bool,
+    config: ImmutablePropTypes.map,
     loadMedia: PropTypes.func.isRequired,
     dynamicSearchQuery: PropTypes.string,
     page: PropTypes.number,
@@ -159,18 +160,27 @@ class MediaLibrary extends React.Component {
     event.persist();
     event.stopPropagation();
     event.preventDefault();
-    const { persistMedia, privateUpload } = this.props;
+    const { persistMedia, privateUpload, config, t } = this.props;
     const { files: fileList } = event.dataTransfer || event.target;
     const files = [...fileList];
     const file = files[0];
+    const maxFileSize = config.get('max_file_size');
 
-    await persistMedia(file, { privateUpload });
+    if (maxFileSize && file.size > maxFileSize) {
+      window.alert(
+        t('mediaLibrary.mediaLibrary.fileTooLarge', {
+          size: Math.floor(maxFileSize / 1000),
+        }),
+      );
+    } else {
+      await persistMedia(file, { privateUpload });
 
-    this.setState({ selectedFile: this.props.files[0] });
+      this.setState({ selectedFile: this.props.files[0] });
+
+      this.scrollToTop();
+    }
 
     event.target.value = null;
-
-    this.scrollToTop();
   };
 
   /**
@@ -318,6 +328,7 @@ const mapStateToProps = state => {
     isPersisting: mediaLibrary.get('isPersisting'),
     isDeleting: mediaLibrary.get('isDeleting'),
     privateUpload: mediaLibrary.get('privateUpload'),
+    config: mediaLibrary.get('config'),
     page: mediaLibrary.get('page'),
     hasNextPage: mediaLibrary.get('hasNextPage'),
     isPaginating: mediaLibrary.get('isPaginating'),

packages/netlify-cms-core/src/reducers/mediaLibrary.js

@@ -27,6 +27,7 @@ const defaultState = {
   showMediaButton: true,
   controlMedia: Map(),
   displayURLs: Map(),
+  config: Map(),
 };
 
 const mediaLibrary = (state = Map(defaultState), action) => {
@@ -37,7 +38,8 @@ const mediaLibrary = (state = Map(defaultState), action) => {
         map.set('showMediaButton', action.payload.enableStandalone());
       });
     case MEDIA_LIBRARY_OPEN: {
-      const { controlID, forImage, privateUpload } = action.payload;
+      const { controlID, forImage, privateUpload, config } = action.payload;
+      const libConfig = config || Map();
       const privateUploadChanged = state.get('privateUpload') !== privateUpload;
       if (privateUploadChanged) {
         return Map({
@@ -46,6 +48,7 @@ const mediaLibrary = (state = Map(defaultState), action) => {
           controlID,
           canInsert: !!controlID,
           privateUpload,
+          config: libConfig,
           controlMedia: Map(),
         });
       }
@@ -55,6 +58,7 @@ const mediaLibrary = (state = Map(defaultState), action) => {
         map.set('controlID', controlID);
         map.set('canInsert', !!controlID);
         map.set('privateUpload', privateUpload);
+        map.set('config', libConfig);
       });
     }
     case MEDIA_LIBRARY_CLOSE:

packages/netlify-cms-locales/src/en/index.js

@@ -115,6 +115,7 @@ const en = {
     },
     mediaLibrary: {
       onDelete: 'Are you sure you want to delete selected media?',
+      fileTooLarge: 'File too large.\nConfigured to not allow files greater than %{size} kB.',
     },
     mediaLibraryModal: {
       loading: 'Loading...',

website/content/docs/beta-features.md

@@ -332,3 +332,21 @@ Template tags produce the following output:
 - `{{author-login}}`: the login/username of the author
 
 - `{{author-name}}`: the full name of the author (might be empty based on the user's profile)
+
+
+## Image widget file size limit
+
+You can set a limit to as what the maximum file size of a file is that users can upload directly into a image field.
+
+Example config:
+
+```yaml
+- label: "Featured Image"
+  name: "thumbnail"
+  widget: "image"
+  default: "/uploads/chocolate-dogecoin.jpg"
+  media_library:
+    config:
+      max_file_size: 512000 # in bytes, only for default media library
+```
+