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.foo 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]

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.foo 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]

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]

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

 

[Darko]

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.foo 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.

 

[VK]

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

Ext.Ajax.request({
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="multipart/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).

 

[dhtmlkitchen]

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.foo 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/