Upload Files Without Page Reload or Form Submission

Discussion in 'Javascript' started by VUNETdotUS, Nov 2, 2007.

  1. VUNETdotUS

    VUNETdotUS Guest

    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.
    VUNETdotUS, Nov 2, 2007
    #1
    1. Advertising

  2. VUNETdotUS

    Jeremy Guest

    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.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
    Jeremy, Nov 2, 2007
    #2
    1. Advertising

  3. VUNETdotUS

    VUNETdotUS Guest

    On Nov 2, 1:11 pm, Jeremy <> wrote:
    > 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.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


    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?
    VUNETdotUS, Nov 2, 2007
    #3
  4. 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, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Nov 8, 2007
    #4
  5. VUNETdotUS

    Darko Guest

    On Nov 2, 4:51 pm, 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.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.
    Darko, Nov 8, 2007
    #5
  6. VUNETdotUS

    VK Guest

    On Nov 10, 9:57 pm, TheBagbournes <> wrote:
    > 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).
    VK, Nov 10, 2007
    #6
  7. VUNETdotUS

    Guest

    On Nov 2, 7:51 am, 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.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/
    , Nov 12, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HP
    Replies:
    4
    Views:
    594
  2. Joshua Beall
    Replies:
    26
    Views:
    219,710
    AndreiKaa
    Jun 29, 2007
  3. gen_tricomi
    Replies:
    2
    Views:
    715
    gen_tricomi
    May 23, 2006
  4. Aleksandar Andjelkovic

    Changing data on the form without page reload

    Aleksandar Andjelkovic, May 24, 2004, in forum: ASP General
    Replies:
    0
    Views:
    105
    Aleksandar Andjelkovic
    May 24, 2004
  5. Stefan Mueller
    Replies:
    4
    Views:
    274
    Stefan Mueller
    Nov 5, 2005
Loading...

Share This Page