Issue #2910💬 RespondidoAbierto el 21 de julio de 2020por SintoDemaReacciones 0

Problema en la gestión de gestores de activos

Respuesta rápidapor artf

'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:

  1. 'upload: siteURL+'assets/CONTENT/IMG', ¿esta ruta de subida de imagen o es una función que sube imágenes?
  2. Si uso AmazonS3, ¿puedo acceder a la opción de edición sin el problema de CORS?
  3. ¿Cómo puedo mostrar las imágenes subidas en el Administrador de Activos sin desaparecer después?

Gracias.

Respuestas (3)

artf5 de agosto de 2020

'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

SintoDema5 de agosto de 2020

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?

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.