[Question]: How Do I Hide / Disable Dropzone in AM Modal

[HeyWrecker]

Hello,

I've been reviewing the documentation and this link, trying to find the right configuration setting to disable the dropzone in the Asset Manager Modal. In my config, I have set the upload attribute to 0, and yet the dropzone still appears, is clickable, displays the system file browser, and allows me to select a file.

I would like to only allow people to select images from a pre-existing library, not upload images, but it is unclear to me how to disable this fully.

Additionally, as a side question- does the Asset Manager handle pagination of files at all? We have a pre-existing media library in our Django app that I can populate the images array with, but that list could be quite long. Breaking it up into categories will help (I've seen that you have instructions on how to do that), but I could still end up with a long, scrolling list of image assets.

Thanks in advance!

Best Regards, Rick Zawadzki

assetManager: { assets: images, // an array of images noAssets: '', upload: 0, uploadText: '', addBtnText: 'Not working either', dropzone: 0, openAssetsOnDrop: 0, modalTitle: 'Select an Image', },

[mcottret]

Hi @HeyWrecker !

As far as I know this is only possible by overriding the AM Modal's style like so:

.gjs {
  &-am {
    &-file-uploader {
      display: none;
    }

    &-assets-cont {
      width: 100%;
    }
  }
}

You can also see this issue regarding completely disabling image upload.

Cheers !

[HeyWrecker]

@mcottret Hi Mathieu! Thanks for the advice! I'll try those steps out. I genuinely appreciate such a quick reply!

[HeyWrecker]

@mcottret Mathieu, I don't know if you saw the other part of my question:

does the Asset Manager handle pagination of files at all? We have a pre-existing media library in our Django app that I can populate the images array with, but that list could be quite long. Breaking it up into categories will help (I've seen that you have instructions on how to do that), but I could still end up with a long, scrolling list of image assets.

[HeyWrecker]

Sorry for the additional question Methieu, but is there a configuration option to disable the caching of the images source? If I turn on the Storage Manager it appears to cache the images array even if that array has actually been updated on the page when I reload.

I would like the Storage Manager enabled in order to locally save work on templates being created, but if someone uses our media manager to upload a file and then come back to the template to add that image, it doesn't appear because the images array has been stored as well.

[mcottret]

@mcottret Mathieu, I don't know if you saw the other part of my question:

@HeyWrecker, yes, but I'm sorry I did not dig deep enough into the Asset Manager so I am unable to answer.

I suggest you reopen this issue or create another so that somebody else can :)

---

Sorry for the additional question Methieu, but is there a configuration option to disable the caching of the images source? If I turn on the Storage Manager it appears to cache the images array even if that array has actually been updated on the page when I reload.

I would like the Storage Manager enabled in order to locally save work on templates being created, but if someone uses our media manager to upload a file and then come back to the template to add that image, it doesn't appear because the images array has been stored as well.

I'm sorry I'm not sure I understand this question, but as far as I do I don't think this has to do with caching.

GrapesJS does not handle updating & storing your images array automatically on every upload, this configuration only defines the initial images statically. You'll have to implement your custom logic to retrieve your updated images array before initializing GrapesJS with it to make this work.

I hope that answers your second question :)

[HeyWrecker]

@mcottret

I'm sorry if my explanation lacked clarity. I'll try to elaborate.

I'm using Django on the server side to retrieve a list of media assets. On the Django template page, I use for loop to individually output the iterated item and push it into a Javascript array, images.

This Javascript array is then assigned to the assetManager assets property.

Because the list is rendered server-side, it is updated on every reload. However, when inspecting the Application -> Local Storage in Chrome, I see that there is a gjs-mjml-assets key present that appears to be storing the value of what was assigned to the assetManager assets property. If I have the storageManager enabled, the Local Storage gjs-mjml-assets key / value persists on page reload. If I turn it off, it does not persist.

Does this make more sense?

[mcottret]

I see, sorry for the misunderstanding :)

I didn't know about this specific behaviour, but the assets from the loaded configuration might override the initial set value. You could try updating the assets list after loading the configuration like the following:

this.editor.on('storage:load', () => {
    this.editor.AssetManager.add(images);
    this.editor.AssetManager.render(images);
});

[HeyWrecker]

Again, thank you so much @mcottret Mathieu! I will give that a shot. You've been incredibly helpful and I truly do appreciate it.

Thank you for entertaining and answering my multiple questions in this singular thread. I'll open a separate question regarding pagination in the asset manager. I suspect that I'll have to try to use am.getContainer().insertAdjacentHTML to insert next/previous buttons to send ajax requests and update the assets.

Just as a note, the API Reference page linked to on the Asset Manager page 404s.

https://grapesjs.com/docs/modules/API-Asset-Manager