#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Location
    Strathmore, AB, Canada
    Posts
    14
    Rep Power
    0

    Question Provide an Upload File button that doesn't need a submit button?


    I am providing a "Save" and "Load" button on a rather long form to help users avoid having to retype all the data required each time they want to use the form.

    I have the Save function working well. The Load function is becoming a real headache...

    Currently, I have a <button> tag that activates a hidden <input type="file"...> tag. This is to avoid the filename textbox from appearing on the form. When the button is clicked, it fires the click event on the input tag. The user selects the file that they want. Once the file is selected, I'd like to automatically have the form submit itself so that I can load the file. Unfortunately, security settings prevent a scripted form submit to occur after the <input type="file"...> tag.

    So, is it possible to have a "Load" button that does not show the filename textbox, and that will automatically submit the form?

    Is it possible to read the file and load the form fields without having to submit the form?

    Is what I am trying to do possible?
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,111
    Rep Power
    487
    Originally Posted by Calab

    So, is it possible to have a "Load" button that does not show the filename textbox, and that will automatically submit the form?

    Is it possible to read the file and load the form fields without having to submit the form?

    I'm not really certain what you want but it sounds like Ajax will be the solution.

    For example, you'd have your file upload in a DIV (named or ID'd as "FileUpload") and the "load file" button in the same div. When clicked it will use Ajax to hide this DIV, upload etc the file and then when done, the DIV can be updated to show "Success!" or "Failure!" or whatever.

    Sorry if that's not explained too well but that sounds to me like it will do what you're trying to achieve - the "main" form won't be submitted until the user clicks on the "submit" button
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    3
    Originally Posted by Calab
    Is it possible to read the file and load the form fields without having to submit the form?

    Is what I am trying to do possible?
    Hi Calab,

    I'm a little bit confused about your need, but I'll try to sum up. Is this what you're looking for?

    1. You do not want to show the ugly file input, so you've hidden it and activate it remotely through a different button.

    2. You want the file to automatically upload without a form submit.

    3. Security settings won't let you do this.

    If this is your problem, the answer is yes, it is possible. However, you'll have to change how you're doing things. You'll need to stop using jQuery click() or whatever it is you're using to remotely click the file input button, and instead use this method:
    http://viget.com/inspire/custom-file...-bit-of-jquery

    Summed up, it's like this. You need a practically invisible file input positioned directly on top of your custom button. So that when the user thinks they are clicking on your custom button, they are actually clicking the file input.

    For some [insane] reason browsers think this is less of a security risk and will let you work with it.

    You can see a solution that I used at about 43 seconds into this video:
    http://www.laternastudio.com/project...rdware-website

    Good luck!

IMN logo majestic logo threadwatch logo seochat tools logo