[Question] Get Uploads as Base64

[afaraha8403]

Hello All,

I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the uploaded images (through drag and drop) as a base64.

Using an endpoint is not an option I can use.

This is the code that I have

    var editor = grapesjs.init({
            height: '100%',
            container: '#buildy_' + instanceID, //Current Instance of the editor
            plugins: ['gjs-preset-newsletter'], //Load Newsletter plugin
            components: '<div class="txt-red">Hello world!</div>',
            style: '.txt-red{color: red}',
            assetManager: {
                assets: [],
                uploadFile: (e) => {
                    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
                    for (var i = 0, f; f = files[i]; i++) {

                        // Only process image files.
                        if (!f.type.match('image.*')) {
                            continue;
                            }
                            var reader = new FileReader();
                            console.log(reader.readAsDataURL(f))
                            //NEED Each File as Base64 to upload via external function
                      }
                },
                dropzone: 1,
                openAssetsOnDrop: 0,
            },
            storageManager: {
                id: storageid, // Prefix identifier that will be used on parameters
                type: 'local', // Type of the storage  (can be set to null)
                autosave: true, // Store data automatically
                autoload: true, // Autoload stored data on init
                stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
            }
    });

Also after I process my external upload function do I just call the add asset to make the image available?

Appreciate any support on this...

[artf]

Have you tried with this?

assetManager: {
    ...
    uploadFile: false,
    embedAsBase64: true,

[afaraha8403]

Yes I tried that. But what I am looking for it to get the base64 file so I can upload to the plateform I am using and then adding the return url to grapesjs

[artf]

Well then use uploadFile and if you don't know how to get the base64 of the file try to copy embedAsBase64

[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.