CouchApp uploading attachments (part 1)


Not sure why but jquery.couchdb.js does not include a method for uploading CouchDB attachments… But I need it, so I started googling trying to find how and found this and this.

Since I’m not just a developer but also software architect and I want clean and nice solutions (avoiding subsequent problems) I tried to understand what was proposed and how it works.

CouchDB uploading attachments: the basics

For uploading an attachment I need:

  1. Database URL (ex: /couchapp)
  2. The document id (ex: doc_with_attachment)
  3. The revision number (ex: 1-967a00dff5e02add41819138abb3284d).
  4. The file(s) being uploaded.

With this information I have to do a POST to a multipart form to an URL that I build up as follow:

var url = "/couchapp/" + $.couch.encodeDocId("doc_with_attachment")

Next, I need an HTML form:

<form id="upload" method="post" action="/couchapp/doc_with_attachment">
    <label>Revision : <input id="revision" type="text" name="_rev"/></label><br/>
    <input id="attachment" type="file" name="_attachments"/><br/>
    <br/>
    <input type="submit"/>
</form>

And _rev is retrieved in HTML load time using:

// Access the DataBase
var db = $.couch.db("couchapp");
db.openDoc("doc_with_attachment", {
    success:function (result) {
        $("#revision").val(result._rev);
    },
    error:function (a, b, c) {
        alert("Error: " + c);
        console.log("Error on openDoc:", a, b, c);
    }
});

If i select a file to upload and click on Submit button what I get is:

Trying to upload an attachment in CouchDB
Trying to upload an attachment in CouchDB

That is more or less what Chris Strom already mention on this first post.

So, lets add enctype and set it to multipart/form-data:

<form id="upload" method="post" 
      action="/couchapp/doc_with_attachment" 
      enctype="multipart/form-data">
    <label>Revision : <input id="revision" type="text" name="_rev"/></label><br/>
    <input id="attachment" type="file" name="_attachments"/><br/>
    <br/>
    <input type="submit"/>
</form>

If I run it now, I get:

CouchApp upload attachment with multipart/form-data
CouchApp upload attachment with multipart/form-data

And futon shows me that the file has been actually uploaded:

Futon showing uploaded file
Futon showing uploaded file

Of course, you can hide the revision input:

CouchDB / CouchApp uploading attachment
CouchDB / CouchApp uploading attachment

and still works!
CouchDB / CouchApp uploading attachment: result
CouchDB / CouchApp uploading attachment: result

Good! pretty simple.

Stay tuned!

Next post convers Uploading attachments from JavaScript in CouchDB. Subscribe to this blog to receive notice.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s