Upload Files Without Page Reload or Form Submission

[VUNETdotUS]

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

[Jeremy]

VUNETdotUS wrote:

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

Actually, this is still the only (form-based) method of uploading a file
without the page appearing to reload. You can do some neat tricks with
it though - for example, monitoring the progress of the file upload with
asynchronous requests lets you create nice little progress bars (which
users really like, if they are able to see it - nobody likes waiting for
an upload to finish when they have no idea of when that might be).

Jeremy

[VUNETdotUS]

On Nov 2, 1:11 pm, Jeremy <jer...@pinacol .comwrote:

VUNETdotUS wrote:

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

Actually, this is still the only (form-based) method of uploading a file
without the page appearing to reload. You can do some neat tricks with
it though - for example, monitoring the progress of the file upload with
asynchronous requests lets you create nice little progress bars (which
users really like, if they are able to see it - nobody likes waiting for
an upload to finish when they have no idea of when that might be).

Jeremy

Thanks! Progress bar is a great idea. I saw some examples before.
Though how do I know the upload status, unless you mean a rotating
image which can be shown and removed after submission?

[Thomas 'PointedEars' Lahn]

VUNETdotUS wrote:

Thanks! Progress bar is a great idea. I saw some examples before.
Though how do I know the upload status, unless you mean a rotating
image which can be shown and removed after submission?

You can use an implementation of the IXMLHTTPRequest interface to make
requests to the server and to evaluate the corresponding response message.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8************ *******@news.de mon.co.uk>

[Darko]

On Nov 2, 4:51 pm, VUNETdotUS <vunet...@gmail .comwrote:

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

If you meant AJAX, then no - you cannot do that. That would require
Javascript
to read local files and get their contents, which will never be
possible, for
security sake. I hope they're going to add such functionality that
would somehow
get these contents through a file input, if it's already filled by the
user.

[TheBagbournes]

VUNETdotUS wrote:

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

That is the usual way of uploading without leaving the current page.

See http://extjs.com/ for a library which provides way of doing just that.

If your form with the <input type="file"has the id "file-form", them you'd write

Ext.Ajax.reques t({
form: 'file-form',
url: '/myUpload.do', // Optional if the form has the correct action attribute
params: { // Optional params that are temporarily added as hidden
type: 'jpg'
caption: 'A picture'
},
isUpload: true // Optional if the form has enctype="multip art/form-data"
success: function() {
alert('File uploaded');
},
failure: {
alert('File could not be uploaded');
}
});

[VK]

On Nov 10, 9:57 pm, TheBagbournes <[e-mail] mwrote:

If your form with the <input type="file"has the id "file-form", them you'd write

Ext.Ajax.reques t({
form: 'file-form',
url: '/myUpload.do', // Optional if the form has the correct action attribute
params: { // Optional params that are temporarily added as hidden
type: 'jpg'
caption: 'A picture'
},
isUpload: true // Optional if the form has enctype="multip art/form-data"
success: function() {
alert('File uploaded');
},
failure: {
alert('File could not be uploaded');
}

});

So what is this code about? AJAX has nothing to do with the OP's
question, because it cannot submit files from input="file" elements.
This is why for multipart/form-data forms with file upload AJAX never
was an option, one needs to stay with frame/iframe for that.

To OP: the security model of file upload element treats each such
element as one-time only, nontransferable user permission to read and
upload a single file from her hard drive to the server where such
permission explicetly expressed by direct physical user's interaction
(click on Browse..., select file, click OK).

Any deviation from this model you may find on a particular browser is
a serious security hole to be reported rather than to be anyhow used.
Lucky all popular browsers do implement this model very strictly. The
only difference I'm aware of is that IE allows to invoke click()
methods for type="file" to call "Select file" dialog w/o user clicking
Browse... button. FF considers it as a violation of the spelled
security model and I do agree with them (anyone is welcome do not).

[TheBagbournes]

VK wrote:

On Nov 10, 9:57 pm, TheBagbournes <[e-mail] mwrote:

>If your form with the <input type="file"has the id "file-form", them you'd write

Ext.Ajax.reque st({
form: 'file-form',
url: '/myUpload.do', // Optional if the form has the correct action attribute
params: { // Optional params that are temporarily added as hidden
type: 'jpg'
caption: 'A picture'
},
isUpload: true // Optional if the form has enctype="multip art/form-data"
success: function() {
alert('File uploaded');
},
failure: {
alert('File could not be uploaded');
}

});

So what is this code about? AJAX has nothing to do with the OP's
question, because it cannot submit files from input="file" elements.
This is why for multipart/form-data forms with file upload AJAX never
was an option, one needs to stay with frame/iframe for that.

"AJAX" isn't a thing. It doesn't do anything, it's just an unfortunate buzzword that we have to use.

Anyway, what that code does, is submits the form named in the form property to the URL named in the url property, targetting a hidden IFRAME.

It calls either of the two callbacks when the IFRAME is loaded. The name of the function involves the letters "A", "j", "a" and "x". Don't let that upset you.

[dhtmlkitchen]

On Nov 2, 7:51 am, VUNETdotUS <vunet...@gmail .comwrote:

My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.f oo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

It's an old method. You're right. FileList should be the way to go. I
haven't used this yet.
http://www.w3.org/TR/file-upload/