geojson - Leaflet.draw: add attributes and save to file

I want to create a simple web page, where user can create features (with Leaflet.Draw), add attributes (ex. name/description) and save created features to file, ex. geojson. So far creating, adding attributes and saving is working, but saved geojson files does not have added attributes. Maybe they are not added or mayby I need to update drawnItems in some way... I have learned from these resources:

Adding comments using leaflet draw

Leaflet Draw - add title to marker or shape?

Here is my code:

Export Features

//Leaflet.draw
var drawnItems = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({

 draw: {
  circle: false,
  rectangle: false,
  polyline: false,
  polygon: false
 },
 edit: {featureGroup: drawnItems}
}).addTo(map);

map.on('draw:created', function(e) {

  var type = e.layerType;
  var layer = e.layer;
  var idIW = L.popup();
  var content = 'Shape Name


Shape Description


';
  idIW.setContent(content);
  idIW.setLatLng(layer.getLatLng());
  idIW.openOn(map);
  drawnItems.addLayer(layer)
});


function saveIdIW() {
  var sName = $('#shapeName').val();
  var sDesc = $('#shapeDesc').val();
  var drawings = drawnItems.getLayers(); //drawnItems is a container for the drawn objects
  drawings[drawings.length - 1].title = sName;
  drawings[drawings.length - 1].content = sDesc;
  map.closePopup();
};

//Export

document.getElementById('export').onclick = function(e) {
  // Extract GeoJson from featureGroup
  var data = drawnItems.toGeoJSON();
  // Stringify the GeoJson
  var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
  // Create export
  document.getElementById('export').setAttribute('href', 'data:' + convertedData);
  document.getElementById('export').setAttribute('download', 'drawnItems.geojson');
}

I have created a http://jsfiddle.net/falqn/svha4bpt/ but I do not know why 'save' button do nothing and there is an error: 'Uncaught ReferenceError: saveIdIW is not defined'. I'm new to jsfiddle, maybe I'm doing something wrong. On my test page (local) 'save' button is closing the popup and everything seems to be OK, but in saved geojson file there is no 'Name' and 'Description' attributes in it. I think I'm very close to really easy way to create/edit/save features with Leaflet.Draw. Please help.

Answer

As for populating the GeoJSON output by drawnItems.toGeoJSON(), you have to explicitly add data to your layers as type and within properties.

See SO post: update properties of geojson to use it with leaflet

In short:

map.on('draw:created', function (event) {
    var layer = event.layer,
        feature = layer.feature = layer.feature || {}; // Intialize layer.feature

    feature.type = feature.type || "Feature"; // Intialize feature.type

    var props = feature.properties = feature.properties || {}; // Intialize feature.properties
    props.title = "my title";
    props.content = "my content";
    drawnItems.addLayer(layer);
});

As for the error in your JSFiddle, it is because JSFiddle does not exactly behave like a normal webpage regarding inline JS (your will not work)