[Question] AssetManager not shown uploaded images

Hi all,

I'm using grapesjs - 0.14.33.

I have successfull implemented StorageManager in remote mode, I can load and store data. I have successfull implemented AssetManager, I can load/upload image.

I'm not able to understand why asset correctly upload are not shown in asset pop up window (select image)

I have read docs and issue but I not understand. I have try many type of output: [data:{....}].

I'm missing steps ?

This is my config files:

`var images = [];

<?php $images = $this->template()->getTemplateImages($this->params()->fromRoute('id'));?>
<?php if(is_array($images)):?>
images = <?php echo json_encode($images);?>
<?php endif?>
	
//per inizializzare l'editor
var editor = grapesjs.init({
  // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  clearOnRender: true,
  // Size of the editor
  height: '100%',
  /*width: 'auto',*/ 
	// Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,

Code SnippetTEXT

assetManager: {
		  autoAdd: 1,
		  assets: images,
          upload: 0,
          uploadName: 'files',
          uploadText: 'Drop files here or click to upload',
          upload: '<?php echo $uploadUrl;?>',
          addBtnText: '<?php echo $this->translate("Aggiungi immagine");?>',
          uploadFile: function(e) {
      	    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
      	    // ...send somewhere
      	      console.log(files);

      	      var formData = new FormData();

      	      for(var i in files){
      	          formData.append('file-'+i, files[i])
      	      }

      	      $.ajax({url: '<?php echo $uploadUrl;?>',
      	          type: 'POST',
      	          data: formData,
      	          contentType:false,
      	          crossDomain: true,
      	          mimeType: "multipart/form-data",
      	          processData:false,
      	          success: function(result){
        	          //editor.AssetManager.add(result);
          	          //console.log(result);

      	      }});

      	  }    		
        },
      storageManager: {
    	   
          type: 'remote',
          contentTypeJson: true, 
          stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered      
          autosave: true,         // Store data automatically
          autoload: true,         // Autoload stored data on init   
          /*id: 'gjs-nl-',*/         
          urlStore: '<?php echo $storeUrl;?>',
          urlLoad: '<?php echo $loadUrl;?>',
          store: function(e) {
				console.log("Store");
              }
         
         
        },     
	  
	  plugins: ['gjs-preset-newsletter'], //, 'gjs-plugin-ckeditor'
      pluginsOpts: {
        'gjs-preset-newsletter': {
          modalLabelImport: 'Incolla il tuo codice qui sotto e clicca su import',
          modalLabelExport: 'Copia il codice e usalo quando vuoi',
          codeViewerTheme: 'material',
          //defaultTemplate: templateImport,
          importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
          cellStyle: {
            'font-size': '12px',
            'font-weight': 300,
            'vertical-align': 'top',
            color: 'rgb(111, 119, 125)',
            margin: 0,
            padding: 0,
          }
        },
        /*
        'gjs-plugin-ckeditor': {
          position: 'center',
          options: {
            startupFocus: true,
            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
            allowedContent: true, // Disable auto-formatting, class removing, etc.
            enterMode: CKEDITOR.ENTER_BR,
            extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
            toolbar: [
              { name: 'styles', items: ['Font', 'FontSize' ] },
              ['Bold', 'Italic', 'Underline', 'Strike'],
              {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
              {name: 'links', items: ['Link', 'Unlink']},
              {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
            ],
          }
        }
        */
      }	      
	});

	var mdlClass = 'gjs-mdl-dialog-sm';
    var pnm = editor.Panels;
    var cmdm = editor.Commands;
    var md = editor.Modal;

    // Aggiunta pulsanti torna indietro avanti e clear all
    pnm.addButton('options', [{
        id: 'undo',
        className: 'fa fa-undo',
        attributes: {title: 'Undo'},
        command: function(){ editor.runCommand('core:undo') }
      },{
        id: 'redo',
        className: 'fa fa-repeat',
        attributes: {title: 'Redo'},
        command: function(){ editor.runCommand('core:redo') }
      },{
        id: 'clear-all',
        className: 'fa fa-trash icon-blank',
        attributes: {title: 'Clear canvas'},
        command: {
          run: function(editor, sender) {
            sender && sender.set('active', false);
            if(confirm('Are you sure to clean the canvas?')){
              editor.DomComponents.clear();
              setTimeout(function(){
                localStorage.clear()
              },0)
            }
          }
        }
      },{
        id: 'view-info',
        className: 'fa fa-question-circle',
        command: 'open-info',
        attributes: {
          'title': 'About',
          'data-tooltip-pos': 'bottom',
        },
      }]);`

[Question] AssetManager not shown uploaded images

Question

Answers (2)

Related Questions and Answers

[QUESTION] Resize image before adding it as base64

Images dropped onto image picker get uploaded twice

Uploaded image error

Asset Manager not automatically add images to assets after uploading

Paid Plugins That Match This Issue

Browse Plugin Categories