Issue in grapesJS - Asset manager handling

Question

I'm now working on grapesJS implementation in our application. I have gone through documents provided & some of the issues reported regarding the asset manager in Github, etc.. I was not able to show the list of uploaded images in the Asset manager after a hard refresh list disappears.

I have tried to upload files to AmazonS3, upload was ok & I get its response, also it is showing in the list. In this case, I was not able to edit images due to the CORS issue.

Later, I tried with the base64 encoded image. With this method, I was able to edit uploaded images. Also got it in the image listing. As I said earlier, the image list only available until a hard refresh. I think it is from the cache.

I have doubts in a few codes, can you help me out of it.

Here is the assetManager section code:

assetManager: {
    storageType : '',
    storeOnChange : true,
    storeAfterUpload : true,
    embedAsBase64 : true, // Make this false to upload image to AmazonS3
    upload : siteURL+'assets/CONTENT/img', // For temporary storage, Upload endpoint, set `false` to disable upload
    assets : [],
    // headers: {}, // Custom headers to pass with the upload request
    // params: {}, // Custom parameters to pass with the upload request, eg. csrf token
    credentials: 'include', // The credentials setting for the upload request, eg. 'include', 'omit'
    autoAdd : 1, // If true, tries to add automatically uploaded assets.
    dropzone : 0, // Enable an upload dropzone on the entire editor (not document) when dragging files over it
    openAssetsOnDrop : 1, // Open the asset manager once files are been dropped via the dropzone
    multiUpload : true, // Allow uploading multiple files per request. If disabled filename will not have '[]' appended
    showUrlInput: true, // Toggles visiblity of assets url input
    uploadFile: function(e) {
        // Ref: https://blog.webnersolutions.com/adding-image-upload-feature-in-grapesjs-editor/
        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: siteURL + 'uploadImage_base64', // Save image as base64 encoded - Its a function
            // url: siteURL + 'uploadImage', // Upload image to AmazonS3 - Its a function
            type: 'POST',
            data: formData,
            contentType: false,
            crossDomain: true,
            dataType: 'json',
            mimeType: "multipart/form-data",
            processData: false,
            success: function(result) {
                var myJSON = [];
                if ((typeof(result['data']) != 'undefined') && (result != 'null')) {
                    $.each(result['data'], function(key, value) {
                        myJSON[key] = value;
                    });
                   console.log(myJSON);
                   // while using base64 encode => 0: {name: "ipsumImage.png", type: "image", src: "data:image/png;base64,iVBORw0KGgAAVwA…AAAAAAAAAAAAAAAD4Pv4B6rBPej6tvioAAAAASUVORK5CYII=", height: 145, width: 348}
                   // while using AmazonS3 => 0: {name: "logo_sigclub.png", type: "image", src: "https://amazonaws.com/assets/CONTENT/img/logo_sigclub.png", status: true, message: "Uploaded successfully", …}
                    editor.AssetManager.add(myJSON); //adding images to asset manager of GrapesJS
                }
            }
        });
    }
}

I have doubt in:

• upload : siteURL+'assets/CONTENT/img', is this image upload path or a function which uploads image?

• If I'm using AmazonS3, can I able to get the editing option with the CORS issue?

• How can I show the uploaded images in Asset Manager without disappearing later?