[jQuery] Serializable Form Upload Element
Hi
I was looking around for a neat and generic way to handle file uploads. I found several different approaches, and it seems like this is a classic case for using ajax in any case (<a href="http://www.codeandcoffee.com/2006/08/02/too-much-ajax/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.codeandcoffee.com/2006/08/02/too-much-ajax/</a>).
Some of the references I found:
- <span>
Asynchronous file upload with AJAX progress bar in PHP (</span><a href="http://tomas.epineer.se/archives/3" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://tomas.epineer.se/archives/3</a>
)
- <span>AJAX File upload Progress (<a href="http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/</a>)
- </span><span>Rails Upload Progress (<a href="http://sean.treadway.info/demo/upload/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://sean.treadway.info/demo/upload/</a>)</span>
<span>
</span>etc.
From what I saw, it seems inevitable that one needs to use an iframe to submit the upload because the browser will not allow you to access the file from the local system due to security issues. However, most of the solutions I've seen seem to be obsessed with showing the progress of the upload. I'm not so concerned about the progress.
My logic is this - I look at forms as a mechanism of data entry. I want to be able to use the data entered by a user in the form in any way that is required by the application, with client-side and server-side logic by using a combination of javascript(+jquery), json and ajax.
To this extent, the form serializer (part of the jquery svn) and deserializer(part of jquery plugins) do the jobs of extracting and inserting data from HTML forms respectively. However, the file input is the only form element that breaks this model.
<span style="font-weight: bold;">I want to find a way of serializing the file upload element.</span><br style="font-weight: bold;">
To achieve this, here is the approach I thought of - <span style="font-weight: bold;">
Convert all file upload elements into text elements</span>! The text/hidden element will contain the uploaded path of the file.
So suppose we were to make a plugin for this, let's say we call it <span style="font-style: italic;">
serializeuploads</span>.
This is how I see it working:
1. Start with a form, say MYFORM where some elements maybe file upload elements
2. The serializeuploads plugin initializer will convert each file upload element into a separate form by wrapping a form around it.
3. It will also create a hidden iframe for each file upload element to which the form can be submitted.
4. When you want to serialize the form, you first call the serializeuploads plugin. This will submit each of the file upload elements' forms to the respective iframes.
5. The server side script which accepts the upload can be anything... it is expected to save the file on the server and return the server path of the file.
6. On completion of each submit, the plugin will insert a hidden/text element to MYFORM, whose value will be the server path of the uploaded file.
7. On completion of the submits, one can specify a callback function which is called. At this time, the normal form serializer can be used to get the path of the uploaded file.
8. The plugin can also accept a max timeout, so that it will abort all uploads which do not complete in the given time, and intimate the result to the callback function.
Whoosh! Guys, is there a simpler way of doing this?
Regards
Ashutosh
--
Reach1to1 Communications
<a href="http://www.reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.reach1to1.com
</a>
<a href="mailto:bijoor@reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">bijoor@reach1to1.com</a>
98201-94408
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
I was looking around for a neat and generic way to handle file uploads. I found several different approaches, and it seems like this is a classic case for using ajax in any case (<a href="http://www.codeandcoffee.com/2006/08/02/too-much-ajax/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.codeandcoffee.com/2006/08/02/too-much-ajax/</a>).
Some of the references I found:
- <span>
Asynchronous file upload with AJAX progress bar in PHP (</span><a href="http://tomas.epineer.se/archives/3" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://tomas.epineer.se/archives/3</a>
)
- <span>AJAX File upload Progress (<a href="http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/</a>)
- </span><span>Rails Upload Progress (<a href="http://sean.treadway.info/demo/upload/" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://sean.treadway.info/demo/upload/</a>)</span>
<span>
</span>etc.
From what I saw, it seems inevitable that one needs to use an iframe to submit the upload because the browser will not allow you to access the file from the local system due to security issues. However, most of the solutions I've seen seem to be obsessed with showing the progress of the upload. I'm not so concerned about the progress.
My logic is this - I look at forms as a mechanism of data entry. I want to be able to use the data entered by a user in the form in any way that is required by the application, with client-side and server-side logic by using a combination of javascript(+jquery), json and ajax.
To this extent, the form serializer (part of the jquery svn) and deserializer(part of jquery plugins) do the jobs of extracting and inserting data from HTML forms respectively. However, the file input is the only form element that breaks this model.
<span style="font-weight: bold;">I want to find a way of serializing the file upload element.</span><br style="font-weight: bold;">
To achieve this, here is the approach I thought of - <span style="font-weight: bold;">
Convert all file upload elements into text elements</span>! The text/hidden element will contain the uploaded path of the file.
So suppose we were to make a plugin for this, let's say we call it <span style="font-style: italic;">
serializeuploads</span>.
This is how I see it working:
1. Start with a form, say MYFORM where some elements maybe file upload elements
2. The serializeuploads plugin initializer will convert each file upload element into a separate form by wrapping a form around it.
3. It will also create a hidden iframe for each file upload element to which the form can be submitted.
4. When you want to serialize the form, you first call the serializeuploads plugin. This will submit each of the file upload elements' forms to the respective iframes.
5. The server side script which accepts the upload can be anything... it is expected to save the file on the server and return the server path of the file.
6. On completion of each submit, the plugin will insert a hidden/text element to MYFORM, whose value will be the server path of the uploaded file.
7. On completion of the submits, one can specify a callback function which is called. At this time, the normal form serializer can be used to get the path of the uploaded file.
8. The plugin can also accept a max timeout, so that it will abort all uploads which do not complete in the given time, and intimate the result to the callback function.
Whoosh! Guys, is there a simpler way of doing this?
Regards
Ashutosh
--
Reach1to1 Communications
<a href="http://www.reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">
http://www.reach1to1.com
</a>
<a href="mailto:bijoor@reach1to1.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">bijoor@reach1to1.com</a>
98201-94408
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Topic Participants
bijoor
John Resig