[Question] AssetManager not shown uploaded images

[FjStudioDev]

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, 

  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',
    },
  }]);`

[FjStudioDev]

Found workaround follow this #372

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.