CF9 - Upload file via jQuery.post("document.cfm",serialize())

[WolfShade]

Hello, everyone.

I'm working on a form that will add/edit task details.  One of the requirements is the ability to upload files into the database.

If a task is being EDITED, the upload is no problem; I'm using a hidden iframe to handle the upload, and the task will have a task ID that the file will be associated with.

However, if a task is being ADDED, there is no existing task ID, so the file needs to be uploaded with the rest of the form.  Unfortunately, jQuery .post() using the .serialize() attribute for the form breaks file uploads, because the form isn't multipart/form-data, at that point.

Does anyone have any suggestions on how to allow a file upload if the form is being submit via jQuery.post("document.cfm",serialize(formobject))?

Thank you,

^_^

[tinu8805]

Just some ideas:

1. you can code your form always as multipart ... it just increases the data to transfer because of the MIME wrapping, but it does no harm.

2. I am quite sure that jQuery does not support serialize () on file fields, because the content of the file cannot be read into a variable by jQuery. Not to mention the memory load this could cause. Use some of the nice jQuery uploader scripts.

HTH,

Martin

[WolfShade]

Hi, Martin.

Thanks for the reply.

1. The form is encoded as multipart/form-data AND the function that submits the data is also enforcing enctype and encoding as multipart/form-data.

2. Plugins are not up to me, unfortunately.  Can't download them, much less install them.  The dev and production environments are super-tight.

I think I will need to find a way to have a hidden iframe upload the file(s) first, keep them in the VFS until the task is submit via AJaX, get the task ID and pass it to another script that will insert the files into the database, then delete them from the VFS.

Way more than I wanted to do, but I'm thinking it's my only option.

^_^

[Miguel-F]

Since you have the EDIT function working, maybe you can try and treat your ADD like an EDIT instead.  What I mean is, have the ADD function first make an AJAX call to set/get the task ID that you need.  Then process the rest of your info as an EDIT.  Could that work?

Very high level I am thinking that you could make an AJAX call that would insert a subset of the information into your database, enough to get you a task ID and then return processing to your page.  Now that you have a task ID you can process the rest of the information as you do for an EDIT (upload in an iframe).

[WolfShade]

Hi, Miguel.

Another possibility, yeah.  That's more straight-forward than what I'm contemplating, now.

Thanks for the idea.

^_^

[tinu8805]

seems as I have misunderstood your problem.

As already suggested, you can use an sequence (INSERT on server, only minimum required fields, UPDATE on client data) instead of an INSERT on client data. Alternatively, you could give an ID which for sure does not exist and handle such a tastk id on the server via SQL or whatever you can use.

Martin