Results 1 to 8 of 8

Thread: Upload Specific File Types with form

  1. #1
    Senior Member fizz's Avatar
    Join Date
    Mar 2014
    Posts
    115

    Default Upload Specific File Types with form

    Hey yas,

    I think I read this somewhere, but I really need help figuring something out.

    I have a form on my site, and I want it to only be able to upload JPG images.

    How/where do I define this? Im sure I only need to add a command to the HTML of my upload button.. but I am not sure exactly what I need to put in there. could someone give me an exact example?

    Thanks

  2. #2
    Senior Member fizz's Avatar
    Join Date
    Mar 2014
    Posts
    115

    Default

    really... nobody...?

  3. #3
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    I imagine no one responded because you said you knew you only needed to add HTML code to a button.

    Actually, it's more involved than that. You would need to use JavaScript in your form or use a form handling script that would check the file (not just the file name) to make sure it's a jpg. Very doable, but not html.

    You need to decide if you want the checking to be done in the browser (JavaScript) or server-side (PHP, ASP, etc.)
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  4. #4
    Senior Member fizz's Avatar
    Join Date
    Mar 2014
    Posts
    115

    Default

    thanks for your answer, and I truly understand the file (dare I say) validation to see that the file actually is the type not just by file extension.

    but for right now I am just looking for how to make it so that when a visitor clicks the upload button on my form, and the OS opens a standard file browsing window, that it only allows the certain file extension to be selected. I have to assume this can be accomplished with a line or two of code inserted into the scripting which NoF produces.. right?

  5. #5
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    The HTML 5 "Accept" attribute does what you describe. Doesn't work in all browers, but when it does, it restricts the Browse files window to the specified file extension.

    Example: <input type="file" accept=".jpg,image/*">

    In Fusion you'd have to insert the "accept" fragment inside the input tag manually.
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  6. #6
    Senior Member fizz's Avatar
    Join Date
    Mar 2014
    Posts
    115

    Default

    so the HTML of my upload buttons looks like

    <input type="file" id="Fyoyo11" name="YoYo_File11" tabindex="8" disabled="disabled" style="white-space: pre; width: 174px;" >

    so I would make it....?
    <input type="file" id="Fyoyo11" name="YoYo_File11" tabindex="8" disabled="disabled" style="white-space: pre; width: 174px accept=".jpg,image/*"; >

  7. #7
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    That should work. Almost.

    Put the semi-colon you have at the end after the 174px instead of where it is now.

    (snip)... width: 174px; accept=".jpg,image/*">
    Last edited by chuckj; 11-21-2014 at 07:10 PM. Reason: add to
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  8. #8
    Senior Member fizz's Avatar
    Join Date
    Mar 2014
    Posts
    115

    Default

    Thank ya Thank ya!!

Posting Permissions

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