[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)
Have you tried with this?
assetManager: {
...
uploadFile: false,
embedAsBase64: true,
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
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.
Issue #1707
Find images links in the editor
I am trying to integrate GrapesJs in reactJs. Can you please help me out with the below question w.r.t GrapesJs-React, • Is there a way to...
Issue #905
[Question] need to find nessesary event.
Hello to all! When dragging block into canvas, and drop it: ... we have an event to detect, what block we drop in. ?: but when i drop block...
Issue #1580
[Question] Add Custom Button to RTE
Hello all, i'm currently trying to move away from ckeditor (used in an legacy app to create emails and microsites). This works very well ac...
Issue #1897
[Question] view vs code
Hello...and sorry for my english! First of all, congratulations for this fantastic framework. I'm trying to use GrapeJS to create my own wo...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.