Issue #1150Opened May 31, 2018by afaraha84031 reactions

[Question] Get Uploads as Base64

Question

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

Answers (3)

artfJune 1, 20181 reactions

Have you tried with this?

assetManager: {
	...
	uploadFile: false,
	embedAsBase64: true,
afaraha8403June 1, 20180 reactions

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

artfJune 5, 20180 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.