13

I have the following input which is a toggle returns true , false

<input id="{{event.id}}" ng-model="event.is_active" type="checkbox" value="true" class="block__input" ng-class="{'input__toggle--active' :  event.is_active}">

and when I send it like this

 var formData = new FormData();
            console.log(scope.event.is_active);
            formData.append('is_active', scope.event.is_active);

In the server I receive false and true as strings 'true', 'false'

How to solve this problem ?

0

7 Answers 7

10

FormData will always be sent as strings. One way to solve the problem is to use JSON. Simply encode your values with JSON.stringify on the clientside. On serverside you simply decode the values.

Clientside

var fd = new FormData;
var data = {
    name: 'john doe',
    active: true,
    count: 42
};
var prop;
for(prop in data){
    fd.append(prop, JSON.stringify(data[prop]));
}

// if you want to upload files, too
fd.append('file', file);

$http({
    method: 'post',
    url: '/api/upload',
    data: fd,
    transformRequest: angular.identity,
    headers:{ 'Content-Type': undefined }
});

Serverside (PHP, simplified)

$data = [];
foreach($_POST as $prop => $value){
    $data[$prop] = json_decode($value);
}
// $data contains the correct values now ..
5

If you have a problem with boolean you need to send 0 or 1.

Example:

let data = new FormData()
data.append('type', '0')
data.append('typeSend', '1')

In many cases, the server will understand that this is a bool value: false = 0, true = 1

3
  • 2
    This should not be used. The official typing from lib.dom.ts has the value argument as value: string | Blob, so number is not a valid argument.
    – Ohgodwhy
    Jun 3, 2019 at 18:38
  • @Ohgodwhy, wher you see number in this answer ? If you dont like "0" and "1", you may do String(0) and String(1), Numbers that are quoted are strings
    – JLomaka
    Aug 18, 2020 at 7:33
  • 1
    This is an old answer, and as you can see the edit was made to make the values strings instead of numerical values
    – Ohgodwhy
    Aug 18, 2020 at 16:01
4

You could send each "checked item" as a string (which results in true) and not send the "unchecked items" (which could default to false on the server side.) For example:

Client Side (js/jquery)

var fd = new FormData();
var foo = $('[name="foo"]').prop('checked');
var bar = $('[name="bar"]').prop('checked');
var is_active = $('[name="is_active"]').prop('checked');

if (foo) fd.append('foo',foo);
if (bar) fd.append('bar', bar);
if (is_active) fd.append('is_active', is_active') 

Server Side (php/laravel)

$foobar = new FooBar();
$foobar->foo = $request->foo ? true : false;
$foobar->bar = $request->bar ? true : false;
$foobar->is_active = $request->is_active ? true : false;

The ternary statements above will return false on null in php.

1

use JSON.stringify on client to send numbers and boolean values, then parse it on bakend

const form = new FormData;
const data = {
    name: 'john doe',
    active: true,
    count: 42
};

form .append('file', file); // send your file here
form .append('fileProps', JSON.stringify(data));

// then send form with POST from angular with using http
1

FormData.append(..) or FormData.set(..) converts values always to string (except if its Blob), see here:

If the sent value is different than String or Blob it will be automatically converted to String:

formData.append('name', true);
formData.append('name', 74);
formData.append('name', 'John');

formData.getAll('name'); // ["true", "74", "John"]

So you could use json encode/decode as suggested in https://stackoverflow.com/a/39094808/2311074

However, if its just that single value and you know it has to be a boolean but will be sent as a string, you may also just convert it to boolean on the server-side:

$is_active = ($this->request->is_active == 'true') ? true : false
-2

this is your ng-model:

ng-model="event.is_active"

so, why not use ng-model="formData.event.is_active" instead ?

then, in your script file, you can directly send $scope.formData as an object to the server.

-3

formData.append('is_active', scope.event.is_active === 'true');

3
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review Nov 10, 2015 at 10:48
  • Why do you think it doesn't provide an answer? I think it solves the author's problem.
    – mic4ael
    Nov 10, 2015 at 13:05
  • 2
    becuase you just post a code without any explaination of it .. this could be post as a comment Nov 10, 2015 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.