SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trigger an action when a user has browsed for a file using <input type="file" />

    I am using an <input type="file" /> and want to trigger an AJAX action once a user has clicked on browse, browsed for an image and clicked open.

    The reason for this, is that I want to trigger an upload of the image and return a thumbnail of the image so that it will be present on the form as the user fills out more information about the image in the form.

    I would like to do this with an AJAX action rather than a post submit as the user won't have entered the additional information yet at the point the select the file.

    Of course, I could do this with two actions, having them select and submit the image for upload and then enter the rest of the information after a page refresh that adds the image, but I think it would be much more elegant to use an AJAX action here.

    Is there a trigger related to the browse/open action that I can make use of? Any other thoughts.

    --Kenoli

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenoli View Post
    I am using an <input type="file" /> and want to trigger an AJAX action once a user has clicked on browse, browsed for an image and clicked open.
    Code:
     <input type='file' onchange="if( /\S/.test( this.value ) ){ alert( 'Do something here' ); }">
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    Code:
     <input type='file' onchange="if( /\S/.test( this.value ) ){ alert( 'Do something here' ); }">
    There may be security issues with this on web browsers such as Opera and Firefox though.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There may be security issues with this on web browsers such as Opera and Firefox though.
    What issues? The only restriction of which I'm aware is the unavailability of the full path data, none regarding accessing the file name, which is all that's required here.
    Tab-indentation is a crime against humanity.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    What issues? The only restriction of which I'm aware is the unavailability of the full path data, none regarding accessing the file name, which is all that's required here.
    So far as I'm aware , no browser events fire after selecting a chosen file. That seems to be what the OP is asking for.

    The OP might instead though use setInterval to poll the file value, and when one occurs to post the form via ajax to the server, and wait for a response that gives a path to the image on the server.

    Do any other ways come to mind?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There may be security issues with this on web browsers such as Opera and Firefox though.
    This seems to work, as far as triggering the alert. I don't see why it wouldn't similarly trigger an AJAX request. I'll give it a try.

    Thanks,

    --Kenoli

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenoli View Post
    This seems to work, as far as triggering the alert. I don't see why it wouldn't similarly trigger an AJAX request. I'll give it a try.
    To prevent user-errors I would recommend the inclusion of some sort of confirmation.
    Tab-indentation is a crime against humanity.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you explain this phrase:

    ( /\S/.test( this.value ) )


    I'm really a php programmer and get a bit twisted sometimes making sense of javascript. I presume there is a regular expression here or some escapes.

    Thanks,

    --Kenoli

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    To prevent user-errors I would recommend the inclusion of some sort of confirmation.
    You mean like:

    "Do you really want to upload a file?"

    "Do you really intend to upload image 3456.jpg?"

    Regardless, what I will be doing here is uploading the image into a tmp directory until all of the image info is posted. With that post, I will create 3 images of various sizes to use on the site storing each in appropriate directories. If the final post is not made, the image will be deleted from the tmp directory.

    I am thinking after inserting a thumbnail of the file selected into the form via AJAX, that I will provide a button for them to use if they have inadvertently chosen the wrong file. The button will start the whole process over. This might remove the need for a confirmation.

    --Kenoli

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenoli View Post
    Can you explain this phrase:

    ( /\S/.test( this.value ) )
    It's a regular expression that tests for the presence of a non-whitespace character.
    Tab-indentation is a crime against humanity.

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant. So if the user starts to browse, but stops and nothing is entered in the field the conditional prevents the alert (or any other javascript function) from being triggered.

    Thanks,

    --Kenoli

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    So far as I'm aware , no browser events fire after selecting a chosen file. That seems to be what the OP is asking for.
    The onchange of the file input does let you access the filename, it's just a different format in different browsers so you need to do some string manipulation.
    The security is around setting the value.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •