javascripthtmlimagegrapesjs

grapesjs how to disable embedAsBase64?


I try to disable grapesjs embedAsBase64 on the image insert without success!

From this :

<img id="irik" data-gjs-type="image" draggable="true"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+" class="gjs-plh-image">

To this :

<img id="irik" data-gjs-type="image" draggable="true" 
  src="https://avatars.githubusercontent.com/u/11614725?s=52&v=4"
  class="gjs-plh-image">

this its my code but still not works!! please help!

var editor  = grapesjs.init({
    height: '100%',
    container : '#gjs',
    fromElement: true,
    showOffsets: true,
    embedAsBase64: false,
    assetManager: {
         storageType   : '',
         embedAsBase64: false,
        // assets: images
        custom: true,
    },
});

Solution

  • assetManager: {
    storageType     : '',
       storeOnChange  : true,
       storeAfterUpload  : true,
       upload: 'images',  
       assets       : [ ],
        uploadFile: function(e) {
       var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
    var formData = new FormData();
       for(var i in files){
               formData.append('file-'+i, files[i]) //containing all the selected images from local
       }
       
    $.ajax({
    url: 'upload_image.php',
    type: 'POST',
           data: formData,
           contentType:false,
    crossDomain: true,
    dataType: 'json',
    mimeType: "multipart/form-data",
    processData:false,
    success: function(result){
                   var myJSON = [];
                   $.each( result['data'], function( key, value ) {
                           myJSON[key] = value;    
                   });
                   var images = myJSON;    
             editor.AssetManager.add(images); 
               }
    });
    },
    },
    
    upload_image.php:
    
    
    if($_FILES)
    {
    $resultArray = array();
    foreach ( $_FILES as $file){
                $fileName = $file['name'];
                $tmpName = $file['tmp_name'];
                $fileSize = $file['size'];
                $fileType = $file['type'];
                if ($file['error'] != UPLOAD_ERR_OK)
                {
                        error_log($file['error']);
                        echo JSON_encode(null);
                }           
    $uploadDir = "../images/";
    $targetPath = $uploadDir. $fileName;
    move_uploaded_file($tmpName, $targetPath);
    $finalDir = "../images/";
    $finalPath = $finalDir. $fileName;
                $result=array(
                        'name'=>$fileName,
                        'type'=>'image',
                        'src'=>$finalPath,
                        'height'=>350,
                        'width'=>250
                );
                array_push($resultArray, $result);
    }    
    $response = array( 'data' => $resultArray );
    echo json_encode($response);
    }