Métodos FormData para inspeção e modificação

Sam Thorogood

FormData é o melhor amigo do usuário do XHR e está sendo atualizado no Chrome 50. Estamos adicionando métodos que permitem inspecionar ou modificar objetos FormData depois do fato. Agora você pode usar get(), delete() e auxiliares de iteração, como entries, keys e muito mais. Confira a lista completa.

Se você ainda não estiver usando o FormData, saiba que essa é uma API simples e com suporte que permite criar um formulário virtual por programação e enviá-lo para um lugar distante usando window.fetch() ou XMLHttpRequest.send(formData).

Confira alguns exemplos a seguir.

Analise formulários reais como um profissional

O FormData pode ser criado a partir de um formulário HTML real, fazendo um instantâneo de todos os valores atuais. No entanto, o objeto costumava ser totalmente opaco. Tudo o que você poderia fazer era enviar o arquivo para um servidor sem fazer alterações. Agora, você pode modificar, observar, encolher, mudar e, por fim, fazer upload:

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

Também é possível enviar FormData pelo XMLHttpRequest mais antigo:

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

Não descarte o FormData

Se você está criando sua própria FormData do zero, pode ter ficado frustrado por não poder reutilizá-la. Afinal, você passou muito tempo nesses campos. Como os métodos window.fetch() e XMLHttpRequest.send() fazem um snapshot do FormData, agora você pode reutilizar e modificar seu trabalho com segurança. Confira este exemplo:

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});