Uploads with node.couchapp.js Not Quite Working

‹prev | My Chain | next›

Tonight, I would like to see if I can get CouchDB file upload working in node.couchapp.js. I got this working a while back in plain old couchapp. If I end up using node.couchapp.js, I ought to be able to upload images from here as well.

Working with the same design document from the other night, I add an upload form / show document:

var couchapp = require('couchapp');

var ddoc = {_id:'_design/app', shows:{}};
exports.app = ddoc;

ddoc.rewrites = [
  { from: "/foo/:id", to: "/_show/foo/:id", method: "GET" }
];

ddoc.shows.foo = function (doc, req) {
  return "<h1>"+ doc['title']  +"</h1><p>Bar.</p>";
};

ddoc.shows.update = function(doc, req) {
  var dbname = "seed";

  return  '' +
    '<h1>Upload to <%= title %></h1>' + "\n" +
    '' + "\n" +
    '<form id="recipe-upload" action="/' + dbname + '/' + doc._id +'" method="post">' + "\n" +
    '' + "\n" +
    '<p>' + "\n" +
    'File to attach:' + "\n" +
    '<input type="file" name="_attachments">' + "\n" +
    '</p>' + "\n" +
    '' + "\n" +
    '<p>' + "\n" +
    '<button type="submit">Upload</button>' + "\n" +
    '<span id="saved" style="display:none;">Saved</span>' + "\n" +
    '</p>' + "\n" +
    '' + "\n" +
    '<input type="hidden" name="_rev" value="'+ doc._rev +'">' + "\n" +
    '</form>' + "\n" +
    '' + "\n" +
    '' + "\n" +
    '<script src="/_utils/script/json2.js"></script>' + "\n" +
    '<script src="/_utils/script/jquery.js?1.2.6"></script>' + "\n" +
    '<script src="/_utils/script/jquery.couch.js?0.8.0"></script>' + "\n" +
    '<script src="/_utils/script/jquery.form.js?0.9.0"></script>' + "\n" +
    '<script type="text/javascript" charset="utf-8">' + "\n" +
    '$("#recipe-upload").submit(function(e) { // invoke callback on submit' + "\n" +
    '  e.preventDefault();' + "\n" +
    '  var data = {};' + "\n" +
    '  $.each($("form :input").serializeArray(), function(i, field) {' + "\n" +
    '    data[field.name] = field.value;' + "\n" +
    '  });' + "\n" +
    '  $("form :file").each(function() {' + "\n" +
    '    data[this.name] = this.value; // file inputs need special handling' + "\n" +
    '  });' + "\n" +
    '' + "\n" +
    '  if (!data._attachments || data._attachments.length == 0) {' + "\n" +
    '    alert("Please select a file to upload.");' + "\n" +
    '    return;' + "\n" +
    '  }' + "\n" +
    '' + "\n" +
    '  $(this).ajaxSubmit({' + "\n" +
    '    url:  "/' + dbname + '/' + doc._id +'",' + "\n" +
    '    success: function(resp) {' + "\n" +
    '      $("#saved").fadeIn().animate({ opacity: 1.0 },3000).fadeOut();' + "\n" +
    '    }' + "\n" +
    '  });' + "\n" +
    '});' + "\n" +
    '</script>';
};

Ugly as it is, that is pretty much a copy of the upload form that I used successfully earlier. I had to replace the nice templating with Javascript strings. Ick. I can live with it because this is completely throw away / proof-of-concept code.

I sync this document up with my seed DB:

cstrom@whitefall:~/tmp/test_node_couchapp_js$ node ~/repos/node.couchapp.js/lib/bin.js -s -d foo -c http://localhost:5984/seed
Syncing app finished.

And have a look at it in the browser:



So, does it work? Sadly no. Checking the log, I find:

[Thu, 15 Apr 2010 02:11:19 GMT] [debug] [<0.1920.1>] 'POST' /seed/test {1,1}

[Thu, 15 Apr 2010 02:11:19 GMT] [debug] [<0.1920.1>] Minor error in HTTP request: conflict

I have the feeling I am missing come couchapp-specific code in here. I will continue investigating that tomorrow.

For now, I would like to get some better feedback on the upload form. When I press the "Upload" button, the "success" action is fired, animating a "Saved" notification. Clearly it was not saved. Happily, the last go around received a comment from a concerned reader with a pointer for improving my feedback. I incorporate that here:

//...
    '    success: function(resp) {' + "\n" +
    '     if(resp.match("ok")){ $("#saved").fadeIn().animate({ opacity: 1.0 },3000).fadeOut();}' + "\n" +
    '     else if(resp.match("error")){ $("#failed").fadeIn().animate({ opacity: 1.0 },3000).fadeOut();}' + "\n" +
    '      $("#saved").fadeIn().animate({ opacity: 1.0 },3000).fadeOut();' + "\n" +
    '    }' + "\n" +
//...

Now I get a "Failed" message appearing next to the save button. I will make use of that tomorrow as I continue to investigate what is needed to get uploads working with node.couchapp.js

Day #73