how to create attachments using jquery.couch.js

[Alexander Gabriel]

Hi

In the CouchDb docs (http://wiki.apache.org/couchdb/
HTTP_Document_API#Standalone_Attachments) is explained how to create
attachments using curl.

I am using saveDoc of jquery.couch.js combined with serializeArray to
save the data in forms. I have added an input with type="file" to let
the user choose a file (photo) to attach. saveDoc does not attach this
file though. And I could not find documentation on how to do this.

How can I do this?

Thanks for help!

Alex

[Dominique Sandoz]

Hi Alexander

This is a common problem i had often. This blog post helped me a lot
though: http://japhr.blogspot.com/2010/02/how-to-upload-files-in-couchapp.html?m=0

The trick is to upload your data in two steps: first saveDoc() your
json doc (all the data except the file). Then use ajaxSubmit() to
upload the file.

For the file upload with ajaxSubmit() i made best experience with
having an own form with at least two fields: one called "_attachments"
(type "file") and one called "_rev" (type "hidden" or "text") which
contains the latest document revision. The url passed to ajaxSubmit()
would be the document url (http://host/db/doc).

If you first save your data with saveDoc you'll receive this latest
rev automatically in the response. This allows one straight process
where you start the file upload in the success-callback of the
saveDoc()-call - so you can ensure that you only upload the file if
your other data has been saved sucesssfully.

Good luck!

Dominique

> --
> You received this message because you are subscribed to the Google Groups "CouchApp" group.
> To post to this group, send email to couc...@googlegroups.com.
> To unsubscribe from this group, send email to couchapp+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/couchapp?hl=en.
>

[Nils Breunese]

CouchDB also supports inline attachments: http://wiki.apache.org/couchdb/HTTP_Document_API#Inline_Attachments Maybe that would be a better fit for your usecase? You could PUT both the JSON and the attachments in one go.

Nils.
________________________________________
Van: couc...@googlegroups.com [couc...@googlegroups.com] namens Dominique Sandoz [dominiqu...@gmail.com]
Verzonden: vrijdag 3 februari 2012 22:33
Aan: couc...@googlegroups.com
Onderwerp: Re: how to create attachments using jquery.couch.js

Hi Alexander

Good luck!

Dominique

------------------------------------------------------------------------
VPRO www.vpro.nl
------------------------------------------------------------------------

[Alexander Gabriel]

o.k. Thanks a lot for your help Dominique and Nils. This got me going. Not exactly the way you pointed. Here is my solution. It may help others or maybe someone has a good idea to make it better.

The file input is in its own form (this is probably not necessary when doing it this way).

It is saved when it emits a change event. I do this same with all fields in the other form. 

I am using openDoc because as every change in the doc is always immediately saved it gives the correct rev.

$("#AttachmentForm").ajaxSubmit returned an error saying this was not a valid function. That is why I am using $.ajax instead.

Here is the code:

function saveAttachment() {

$db.openDoc("{{id}}", {

success: function(doc) {

var data = {};

data._rev = doc._rev;

data. Attachment = $("#Anhang").val();

$.ajax({

type: "Put",

        url: "/evab/" + "{{id}}" + "/" + $("# Attachment ").val() + "?rev=" + doc._rev,

data: data. Attachment,

contentType: "multipart/form-data",

success: function(resp) {

   //show attachments in form

}

});

}

});

}

I love the CouchDb und CouchApp mailing lists. Great help guys!

Alex

2012/2/3 Dominique Sandoz <dominiqu...@gmail.com>

[Alexander Gabriel]

hm. Second thoughts. 

After the last post I realized that the attachments I had managed to save were not what they looked like: example.jpg hat been uploaded. But it was not a jpg any more, it only had the text of it's filename inside! 

I have looked long and far and not found a way to do this better. Other contentTypes like image/jpeg don't seem to work at all.

Can any one help me to write the correct $.ajax command?

Alex

2012/2/5 Alexander Gabriel <alexande...@bluewin.ch>

[Dominique Sandoz]

Hi Alex

I dunno what's happening there since i never trier to upload a file with ajax. But the reason why you could not use ajaxSubmit() (not defined) is that you have to include the jquery.form-plugin in order to use it. Fortunately, it lies in futon as they're doing it also with ajaxSubmit and you can easily include by adding this to your code:

<script src="/_utils/script/jquery.form.js"></script

sorry, i forgot about this one...

Greetings

Domi

[Oliver Boermans]

This is a summary I posted (wow was it that long ago) back in 2009 to
the CouchDB user group. Have not really kept up with any recent
developments in CouchDB. I’m sure someone will point out any
significant changes since then if any:

http://mail-archives.apache.org/mod_mbox/couchdb-user/200904.mbox/%3cb11e05440904190216r63...@mail.gmail.com%3e

HTH
Ollie
--
@ollicle

[Alexander Gabriel]

Hi Oliver and Dominique

Thanks a lot for chipping in!

I tried to follow your advice. It seems to have been relatively successful. But not quite yet.

the file input is in its own form again. 

This has action="" and method="post".

It also has a field named _attachments with type="file" and a hidden field with id and name of "_rev".

When _attachments is changed, this function is called:

function saveAttachments() {

$db.openDoc("{{id}}", {

success: function(data) {

$("#_rev").val(data._rev);

$("#formAttachments").ajaxSubmit({

   url: "/evab/" + "{{id}}",

   success: function() {

    //show attachments in form

    erstelleAnhänge();

   }

});

}

});

}

Unfortunately ajaxSubmit produces this error: "$.handleError is not a function" in 

jquery.form.js (line 330). 

I don't know why 

jquery.form.js finds an

 error. Once it finds one it seems to reference the function "

handleError

" but that does not exist (I checked: the expression does not exist in jquery.form.js)

. Seems to me like a bug in 

jquery.form.js. Should I file a bug? Where?

Funny enough: the upload is successful!

I am a little stumped and not sure how to go on.

Any ideas?

Alex

 

2012/2/6 Oliver Boermans <boer...@gmail.com>

[Alexander Gabriel]

In jquery.form.js I uncommented line 330 that calls $.handleError

and lines 334 and 337. This makes shure that a success is always assumed. I think.

Now it works like a charm.

What a rude hack!

If any one has a better suggestion, please come on with it...

Alex

2012/2/7 Alexander Gabriel <alexande...@bluewin.ch>

[Goog Jobs]

Hi, can any one give me a upload attachment template  ?  THX!

在 2012年2月4日星期六UTC+8上午4时39分37秒，Alexander Gabriel写道：

在 2012年2月4日星期六UTC+8上午4时39分37秒，Alexander Gabriel写道：

在 2012年2月4日星期六UTC+8上午4时39分37秒，Alexander Gabriel写道：

[Alexander Gabriel]

Hi Goog

I attached three files:

1. hProjektEdit.html: One of my pages that includes a form id="FormAnhänge" with an input type="file" and this event listener:

//Änderungen im Formular für Anhänge speichern

$("#FormAnhänge").on("change", ".speichernAnhang", function () {

var _attachments;

_attachments = $("#_attachments").val();

if (_attachments && _attachments.length > 0) {

speichereAnhänge(sessionStorage.ProjektId);

}

});

2. evab.js. Here you will find the function speichereAnhänge

3. jquery.form.js that I manipulated

The entire project is here: https://github.com/barbalex/EvabMobile

Hope it helps

Unfortunately my documentation is in German...

Alex

--

You received this message because you are subscribed to the Google Groups "CouchApp" group.

To view this discussion on the web visit https://groups.google.com/d/msg/couchapp/-/iqGHsmXYr0wJ.