4

Eu estou usando uma biblioteca chamada ngUpload. Nela temos a opção de enviar os dados juntamente com o upload de um determinado arquivo.

Estou façando esse upload da seguinte forma:

Upload.upload({
    url: '/orcamento/ajax-criar', 
    data: {cliente: $scope.cliente, orcamento: $scope.orcamento}
})

Porém quando recebo esses dados no servidor, os mesmos estão sendo enviados como string indevidamente.

Exemplo:

 var_dump(
  $request->request->get('cliente')['cadastrado']
 ); 

 // Retorna: string(4)'true'

 var_dump(
  $request->request->get('cliente')['telefone']
 ); 

 // Retorna: string(4)'null'

Reparei que esse parece ser um problema do FormData.

Exemplo:

f = new FormData;

f.append('null_value', null);
f.append('boolean_value', false);

console.log(f.get('null_value'), typeof f.get('null_value'));

console.log(f.get('boolean_value'), typeof f.get('boolean_value'));

Nesse caso, já que o FormData não faz uma substituição correta dos valores, qual é a solução que eu poderia aplicar para que os valores sejam enviados corretamente?

Isso está atrapalhando a validação no lado do servidor devido ao fato de estar enviando "null" ao invés de não enviar nada. Por exemplo, o campo telefone, que tem que ter o formato correto, mas não sendo obrigatório, se o valor estiver vazio, é válido.

1 Resposta 1

3

Não tem como enviar valores "primitivos" a não ser que você use um formato como JSON e decodifique quando chegar no servidor, tudo que é enviado via HTTP será texto ou "binário".

Justamente por este motivo existem métodos como Json, Xml e serialization, para poder enviar os dados em um formato padrão o qual poderá ser interpretado no back-end ou front-end (depende de onde enviar). Então pode fazer assim:

var f = new FormData;

data = { "telefone": null, "nome": "Wallace" };

f.append('data', JSON.stringify(data));

//Ainda string
console.log(f.get("data"));

//Decodificado
var parsed = JSON.parse(f.get("data"));

console.log(parsed.nome, parsed.telefone);

E quando chegar no back-end fazer assim:

$data = json_decode($request->request->get('cliente')['data']);

var_dump($data);

Ou se for PHP puro:

$data = json_decode($_POST['data']);

var_dump($data);

Usando somente strings

Outra maneira seria quando for NULL simplesmente trocar o valor por uma string vazia e quando for false não adicionar o item ao FormData, sendo angular.js acredito que possa filtrar os itens antes, mas como não entendo disto a explicação basica seria isso:

function appendToForm(form, key, value)
{
    if (value === null) { //Null é vazio
       form.append(key, "");
    } else if (value === false || typeof value === "undefined") {//False e undefined é desconsiderado
       form.append(key, value);
    } else if (value === true) { //True vira 1
       form.append(key, "1");
    } else {//Outros valores viram string se necessário
       form.append(key, value);
    }
}

var f = new FormData;

appendToForm(f, "nome", "JBueno ♥ JavaScript");
appendToForm(f, "telefone", null);

for (var k of f.keys()) {
   var value = f.get(k);
   console.log(k, "=>", value, ',tipo =>' + typeof value);
}

Eu não entendo nada de Angular.js, mas creio que usando o plugin Upload seria simplesmente assim:

function appendToForm(data, key, value)
{
    if (value === null) {
       data[key] = "";
    } else if (value === false || typeof value === "undefined") {
       data[key] = value;
    } else if (value === true) {
       data[key] = "1";
    } else {
       data[key] = value;
    }
}

...

var data = {};

appendToForm('cliente', $scope.cliente);
appendToForm('orcamento', $scope.orcamento);

Upload.upload({
    url: '/orcamento/ajax-criar', 
    data: data
})

XML

Se fosse transportar via Xml, por exemplo para um WebService que suporte SOAP poderia usar o atributo xsi:nil (requer o namespace xmlns:xsi="w3.org/2001/XMLSchema-instance"), assim por exemplo:

<tag xsi:nil="true" />
<tag xsi:nil="false" />
<tag xsi:nil="null" />

Você também pode dar uma olhada no w3.org, sei que é fugir do assunto, mas é apenas para explicar a serialização, na versão 1.1 do SOAP (eu realmente não estou certo se é algo suportado) indica que pode usar xsd:null="true".

Claro que você pode criar o teu proprio Xml e enviar via Ajax talvez, incluindo até os dados imagem em base64, será um pouco trabalhoso, mas é apenas para entendimento mesmo, por exemplo:

<?xml version="1.0"?>
<upload>
    <item type="bin" name="foto">base64 com o conteudo do upload</item>
    <item type="bool" name="possui_carro">true</item>
    <item type="bool" name="possui_moto">false</item>
    <item type="null" name="telefone" />
    <item name="hello_world">olá, mundo!</item> <!-- para string pode omitir o type ou adicionar type="string" -->
</upload>

E no back-end você decodifica e pode usar SimpleXMLElement se for php por exemplo, claro que vai ter que fazer o "parse" manualmente usando o atributo type="" e o conteúdo da tag <item>

5
  • 1
    Muito bom! Eu realmente tive que usar essa solução. Ia ser legal se o Javascript resolvesse isso, já que o FormData é responsabilidades deles :p Commented 25/01/2017 às 16:58
  • @WallaceMaxters Javascript é linguagem, independente do que vai fazer, FormData é uma API e HTTP é um protocolo, se o protocolo especifica que tudo o que é passado é text ou binário não tem como culpar nem o JavaScript e nem o FormData por algo impossível de alcançar, eles estão seguindo o protocolo, você pode automatizar o dados de entrada e criar um interpretador que obrigue a ter um formato no back-end, assim como o SOAP faz em servidores que usam este tipo de webservice ;)
    – Syzoth
    Commented 25/01/2017 às 17:02
  • Ou seja, fazer um filtro de objeto ou usar JSON.stringify Commented 25/01/2017 às 17:06
  • 2
    "PHP puro" - Só se for pura maldade. Commented 25/01/2017 às 17:08
  • 3
    @WallaceMaxters JavaScript resolve um problema e cria outros 14 =D
    – Jéf Bueno
    Commented 25/01/2017 às 17:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .