Wednesday, April 14, 2010

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

No comments:

Post a Comment