[SOLUCIONADO] Problema subir archivo base64 con AJAX

[Charlie1]

Buenas chicos, llevo unos día intentando solucionar un error que en teoría no debería producirse, en base estoy probando el sistema de grabado de audio con HTML5 y js, me funcinaba bien, pero si el audio era largo podía fallar la subida, así que decidí dividir la subida con slice, pero a partir de entonces, aunque se crea el audio se escucha con ruido de fondo, a veces un ruido que ni permite oir el audio.

Tras probar de todo en el servidor me di cuenta de que el problema se daba en la subida, pero no consigo dar con cual es el problema concreto, os dejo el código de subida de js para ver si podéis ver que puede estar mal:

Código:

function sendAudio(data, method, url, header, length, perPackage, packages, b)
{
    if ( ! working)
    {
        working = true;
        if (isNaN(b)) 
        {     
            var length = data.length,
            perPackage = 2000000,
            packages   = Math.ceil(parseInt(length)/perPackage),
            b = 0;
        }

        var req = createXMLHttpRequest(method, url, header),
        part = data.slice(perPackage * b, perPackage * (b + 1));

        ++b;

        console.log(b);
        console.log(length);
        console.log(packages);
        console.log(part.length);

        req.setRequestHeader('processData', false);
        req.setRequestHeader('cache', false);
        req.setRequestHeader('Content-Type', false);

        req.send('sound=' + part + '&current=' + b + '&packages=' + packages);

        if (b < packages)
        {

            req.onreadystatechange = function ()
            {
                if (req.readyState === 4 && req.status === 200)
                { 
                    working = false;              
                    sendAudio(data, method, url, header, length, perPackage, packages, b);
                }
            }; 
        }
        else
        {            
            req.onreadystatechange = function ()
            {
                if (req.readyState === 4 && req.status === 200)
                {    
                    working = false;             
                    stopSequenceRecording();
                }
            }; 
        }           
    }    
}

Os dejo como codifico la data para enviar también(Esto es antes de la funcion anterior)

Código:

 //Aquí entramos para guardar el audio
        reader  = new FileReader();         

        reader.onload = function (e) 
        {
        // Enviamos el contenido del archivo de audio y lo codificamos para evitar errores al enviar vía HTTP
            data = encodeURIComponent(reader.result);

            sendAudio(data, method, url, header);                    
            
        };

        // Leemos el archivo
        reader.readAsDataURL(archivo);

Muchas gracias a todos y Feliz Navidad :)

[hackjose]

Que tal

Supongo que usas slice para dividir el base64 Ok..

De PHP recorde una funcion que se llama chunk_split, la cual se ocupa junto con base64_encode()

Dale un vistazo, posiblemente encuentres lo que esta pasando.

En lo personal
Supongo que estas dividiendo el base64 de forma incorrecta, según lo que entiendo es que el base64 se divide cada 76 caracteres y debes agregarle \r\n

ejemplo

Supongamos que lo siguiente es un base64 muy largo
abcdefghijklmnñopqrstuvwxyz

entonces lo divides cada 76 caracteres y agregas \r\n

abcde\r\n
fghij\r\n
klmnñ\r\n
opqrs\r\n
tuvwx\r\n
yz\r\n

Saludos

[Charlie1]

Gracias por tu respuesta hackjose, pero he probado a agregar al final de cada división \r\n y no mejora la cosa, y sería una locura dividirlo cada 76 caracteres porque serían infinitas peticiones al servidor para subir el audio, no sé como arreglarlo por ahora, seguro que es algo que no tengo en cuenta en la división, pero si tubiera que ser cada 76 caracteres sería una locura.

[hackjose]

Plantealo de otra forma por ejemplo

divide tu base64 cada 76000 caracteres o entre cualquier multiplo de 76

mandas esa informacion con una peticion y ya en el servidor haces la divicion entre 76

Saludos

[Charlie1]

He probado a subirlos cada 760000 y luego en el servidor uso chunk_split y los introduzco en un archivo, luego leo todos lo archivos y los coloco en uno solo, se montan en orden y demás pero sigue aleatoriamente destrozandose el audio, con aleatoriamente quiero decir que hay casos en los que se escucha bien completo y casos en los que tienes que quitarlo de lo molesto que es, es extraño que algo que funcionaba bien en conjunto cuando lo separas y lo vuelves a unir falla sin razón aparente.

De nuevo gracias por tu respuesta :)

[Charlie1]

Bueno ya lo solucioné hace unos días, os dejo lo que hice por si a alguien le es útil.

Básicamente cambié el reader para leer como binario en vez de como dataUrl.

Código:

//Aquí entramos para guardar el audio
        reader  = new FileReader();         

        reader.onload = function (e) 
        {
        // Enviamos el contenido del archivo de audio y lo codificamos para evitar errores al enviar vía HTTP
            data = reader.result;

            sendAudio(data, method, url, header);                    
            
        };

        // Leemos el archivo
        // reader.readAsDataURL(archivo); 
        reader.readAsBinaryString(archivo);

y depués dividí el archivo binario para luego codificarlo en base64 y subirlo al server, de esa forma ya no tuve problemas de fallos con el audio.

Código:

if ( ! working)
    {
        working = true;
        if (isNaN(b)) 
        {     
            var length = data.length,
            perPackage = 2000000,
            packages   = Math.ceil(parseInt(length)/perPackage),
            b = 0;
        }

        var req = createXMLHttpRequest(method, url, header),
        part = data.slice(perPackage * b, perPackage * (b + 1));

        ++b;

        req.setRequestHeader('processData', false);
        req.setRequestHeader('cache', false);
        //req.setRequestHeader('Content-Type', false);

        part = btoa(part);
        part = 'data:audio/wav;base64,' + part;

        req.send('sound=' + encodeURIComponent(part) + '&current=' + b /*+ '&packages=' + packages*/);

        if (b < packages)
        {

            req.onreadystatechange = function ()
            {
                if (req.readyState === 4 && req.status === 200)
                { 
                    working = false;              
                    sendAudio(data, method, url, header, length, perPackage, packages, b);
                }
            }; 
        }
        else
        {            
            req.onreadystatechange = function ()
            {
                if (req.readyState === 4 && req.status === 200)
                {    
                    working = false;             
                    stopSequenceRecording();
                }
            }; 
        }           
    }

[rikimm]

Charlie1 Tengo una duda a ti no te dio un problema de memoria ? por ejemplo yo quiero subir archivos de audio y esos pueden variar de 1 mb hasta los 150 mb, el problema que presento es que me manda un error de memoria con php, no se en que lenguaje usas del lado del server.

Tambien de parte del cliente se me traba cuando le esos archivos ya sea en base64 o binario

Saludos.