Problema en la gestión de gestores de activos
'upload: siteURL+'assets/CONTENT/img', ¿esta ruta de subida de imagen o es una función que sube imágenes? Ruta de subida de imagenSi uso AmazonS3, ¿puedo acceder a la opción de edición con el problema de CORS? Si intentas subir directamente a S3 desde el navegador (sin tener tu endpoint como proxy), no puedes hacerlo...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Ahora estoy trabajando en la implementación de grapesJS en nuestra aplicación. He revisado los documentos proporcionados y algunos de los problemas reportados respecto al gestor de activos (https://github.com/artf/grapesjs/issues/216). No pude mostrar la lista de imágenes subidas en el gestor de activos después de que desapareciera una lista de actualización completa.
He intentado subir archivos a AmazonS3, la subida fue correcta y recibo su respuesta, además aparece en la lista. En este caso, no pude editar imágenes debido al problema con el CORS.
Más tarde, probé con la imagen codificada en base64. Con este método, pude editar las imágenes subidas. También lo tengo en la lista de imágenes. Como dije antes, la lista de imágenes solo está disponible hasta un refresco completo. Creo que es de la caché.
Tengo dudas sobre algunos códigos, ¿puedes ayudarme a salir de esto?
Aquí está el código de la sección 'assetManager':
assetManager: {
storageType : '',
storeOnChange : cierto,
storeAfterUpload: cierto,
embedAsBase64 : true, // Haz que esto sea falso para subir la imagen a AmazonS3
upload : siteURL+'assets/CONTENT/img', // Para almacenamiento temporal, Upload endpoint, configura 'false' para desactivar la subida
activos : [],
encabezados: {}, // Encabezados personalizados para pasar con la solicitud de subida
params: {}, // Parámetros personalizados para pasar con la solicitud de subida, por ejemplo, Token CSRF
credenciales: 'include', // La configuración de credenciales para la solicitud de subida, por ejemplo, 'incluir', 'omitir'
autoAdd : 1, // Si es cierto, intenta añadir recursos subidos automáticamente.
dropzone : 0, // Activa una zona de subida de drop en todo el editor (no en el documento) al arrastrar archivos sobre él
openAssetsOnDrop : 1, // Abre el gestor de activos una vez que los archivos se hayan dejado caer a través de la zona de caída
multiUpload: cierto, // Permitir subir varios archivos por solicitud. Si está desactivado, el nombre de archivo no tendrá '[]' añadido
showUrlInput: true, // Activa la entrada de la URL de la visibilidad de assets
uploadFile: function(e) {
Árbitro: 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]); Conteniendo todas las imágenes seleccionadas de la versión local
}
$.ajax({
url: siteURL + 'uploadImage_base64', // Guardar imagen como codificada en base64 - Es una función
url: siteURL + 'uploadImage', // Subir imagen a AmazonS3 - Es una función
tipo: 'POST',
data: formData,
contentType: false,
crossDomain: cierto,
dataType: 'json',
mimeType: "multipart/form-data",
procesData: false,
éxito: función(resultado) {
var myJSON = [];
si ((tipo(resultado['datos']) != 'indefinido') & (resultado != 'nulo')) {
$.each(result['data'], function(key, value) {
myJSON[key] = valor;
});
console.log(myJSON);
mientras se usa base64 encode => 0: {name: "ipsumImage.png", type: "image", src: "data:image/png; base64,iVBORw0KGgAAVwA... AAAAAAAAAAAAAAAAD4Pv4B6rBPej6tvioAAAAASUVORK5CYII=", altura: 145, ancho: 348}
mientras usaba AmazonS3 => 0: {name: "logo_sigclub.png", type: "image", src: "https://amazonaws.com/assets/CONTENT/img/logo_sigclub.png", status: true, message: "Subido con éxito", ...}
editor. AssetManager.add(myJSON); añadir imágenes al gestor de activos de GrapesJS
}
}
});
}
}
Tengo dudas en:
- 'upload: siteURL+'assets/CONTENT/IMG', ¿esta ruta de subida de imagen o es una función que sube imágenes?
- Si uso AmazonS3, ¿puedo acceder a la opción de edición sin el problema de CORS?
- ¿Cómo puedo mostrar las imágenes subidas en el Administrador de Activos sin desaparecer después?
Gracias.
Respuestas (3)
'upload: siteURL+'assets/CONTENT/img', ¿esta ruta de subida de imagen o es una función que sube imágenes?
Ruta de subida de imagen
Si uso AmazonS3, ¿puedo acceder a la opción de edición con el problema de CORS?
Si intentas subir directamente a S3 desde el navegador (sin tener tu endpoint como proxy), no puedes hacerlo (por eso existe CORS). Así que envía el archivo a tu endpoint y, desde tu script backend, puedes hacer lo que quieras
¿Cómo puedo mostrar las imágenes subidas en el Administrador de Activos sin desaparecer después?
Cárgalos desde tu almacenamiento y añádelos al gestor de activos mediante la API
Hola @artf,
Gracias por tu respuesta.
Si intentas subir directamente a S3 desde el navegador (sin tener tu endpoint como proxy), no puedes hacerlo (por eso existe CORS). Así que envía el archivo a tu endpoint y, desde tu script backend, puedes hacer lo que quieras.
Estoy subiendo el archivo desde Asset Manager a una carpeta temporal desde donde lo estamos moviendo a Amazon S3. La subida de archivos funciona bien con Amazon S3 y está listada en el administrador de activos, pero CORS aparece en el momento en que editamos esa imagen.
Como ves en mi código (console.log() se añade justo antes de que intente añadirlo a Asset), la respuesta me está afectando. ¿Es esa la forma correcta en la que intento añadir la imagen a Activo? Si está bien, ¿por qué el CORS aparece en el momento de editar la imagen (la URL de la imagen será del Amazon S3). Estamos intentando editar la imagen de otro dominio (Amazon S3), ¿hay algún problema con eso? ¿Se solucionará usando vuestra API?
URL de imagen será de Amazon S3
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3142
Problema de renderizado de AssetManager
@artf este es el mismo problema #2760 que ya se ha tratado antes, ¿está mal o es lo que estoy haciendo? Esperaba que no se mostraran los re...
Issue #2428
[AYUDA]: La fuente no carga al usarla con webpack - grapesjs intenta cargar fuentes con ruta relativa
Estoy intentando cargar el editor de grapesjs en un archivo html sencillo y no carga los iconos propios de grapesjs ni los iconos de fontaw...
Issue #3404
Problema con el Style Manager.
Hola @artf quiero ocultar y mostrar propiedades de estilo para un componente específico. Tras referenciar este problema https://github.com/...
Issue #1106
Configuración de rasgos no funciona tras recargar
Hola @artf número anterior Sí, tienes razón, hay rasgos ahí pero no leíste mis problemas a los que me enfrento. 1. Cuando arrastras y solta...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.