Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: yoelrodguez en 16 Septiembre 2022, 23:43 pm



Título: Problema al subir una imagen con XMLHttpRequest y php
Publicado por: yoelrodguez en 16 Septiembre 2022, 23:43 pm
Hola a todos, tengo la siguiente situación: estoy creando una clase personalizada para subir mis imagenes a traves de ckeditor 5 pero me esta generando un error a la hora de colocar la imagen en la carpeta. si la esta cargando en el editor, pero al momento la quita. A continuación les dejo la clase y el error que me esta dando para ver si me pueden ayudar.

Gracias

Clase
Código:
class MyUploadAdapter {

     constructor( loader, baseurl ) {
        // CKEditor 5's FileLoader instance.
        this.loader = loader;
        this.baseurl = baseurl;
         // URL where to send files.
        this.url = 'http://localhost/inmueble/image/upload';
        console.log(this.url);
    }

    // Starts the upload process.
    upload() {
        return new Promise( ( resolve, reject ) => {
            this._initRequest();
            this._initListeners( resolve, reject );
            this._sendRequest();
        } );
    }

    // Aborts the upload process.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Example implementation using XMLHttpRequest.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        xhr.open( 'POST', this.url, true );
        xhr.responseType = 'json';
    }

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve, reject ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;

            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            resolve( {
                default: response.url
            } );
        } );

        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // Prepares the data and sends the request.
    _sendRequest() {
        const data = new FormData();

        data.append( 'upload', this.loader.file );

        this.xhr.send( data );
    }
}


 

Error que me está dando

Código:
Access to XMLHttpRequest at 'http://localhost/inmueble/image/upload' from origin 'https://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
MyUploadAdapter.js:74          POST http://localhost/inmueble/image/upload net::ERR_FAILED


Título: Re: Problema al subir una imagen con XMLHttpRequest y php
Publicado por: MinusFour en 17 Septiembre 2022, 06:09 am
Estás haciendo una petición de https://localhost hacia http://localhost. Por eso el error.


Título: Re: Problema al subir una imagen con XMLHttpRequest y php
Publicado por: yoelrodguez en 18 Septiembre 2022, 01:38 am
Hola, gracias por su respuesta. el error ya se soluciono, ahora el problema que tengo es que esta enviando un 404 cuando trata de colocar la imagen en el directorio el cual tiene permiso 777 y ni aun así la puedo subir.