Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post

    Question File Upload - Image Only?

    Hiya Guy's and Gal's,

    I'd like to add a file upload to my form, however I'd like the format to only be those of which are basic image files such as .png and .jpeg as they shouldn't be any other file type from where the image will be coming from.

    If it's easier to use JQuery for this, I do have the whole package. I would just like something to upload the image file and maybe show a progress bar once they have selected the file.

    As the images are coming from another website, it would also be very useful if you could enter the image url

    Also, is there a way to temporary have the file roaming in a way, until the form steps are done and the person creates the page as if they cancel I'd want the file not to be found anywhere if that makes sense...?

    Best Regards,
    Tim

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by MrTIMarshall View Post
    Hiya Guy's and Gal's,

    I'd like to add a file upload to my form, however I'd like the format to only be those of which are basic image files such as .png and .jpeg as they shouldn't be any other file type from where the image will be coming from.
    Code:
    <input accept="image/*" type="file" />
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    The accept attribute is not supported in Internet Explorer and Safari. That makes it pretty useless.

    Code:
    <input type = "file" id = "myfile" size = "50" onchange = "checkit()">
    
    <script type = "text/javascript">
    function checkit() {
    var f = document.getElementById("myfile").value;
    if (!/(gif)|(jpg)|(png)$/gi.test(f)) {
    alert ("Invalid file type.  Please try again");
    return false;
    }
    }
    
    </script>

    A man generally has two reasons for doing things - the one that sounds good, and the real one. - J.P.Morgan

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MrTIMarshall (09-06-2012)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Philip M View Post
    The accept attribute is not supported in Internet Explorer and Safari. That makes it pretty useless.
    http://wufoo.com/html5/attributes/07-accept.html

    seems like both support it. it's a cheap addition that works for most users and even without javascript.

    certainly simpler than jQuery.

    covering all the bases:

    Code:
    <input type=file
      accept="image/*" 
      pattern="/\.(gif|jpe?g|png)$/i" 
      onchange='if(
       (  this.files   &&
          this.files[0] &&
         !this.files[0].type.match("image/*")     ) ||
         !this.value.match(/\.(gif|jpe?g|png)$/i)    ){ 
          this.value=''; } '
     />
    Last edited by rnd me; 09-05-2012 at 04:26 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    MrTIMarshall (09-06-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Sorry about delay in any feed back!

    Thank you both for your help, I wasn't sure if I had posted in the right place.

    I have just got woken up and plan to try these later, but do they accept uploading from an external URL? It would be useful if that URL domain could only be from one website too.

    Best Regards,
    Tim

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by MrTIMarshall View Post
    I have just got woken up and plan to try these later, but do they accept uploading from an external URL?
    Have you tried them out? <input type = "file> refers to files on the local machine. You cannot upload files to your pages which reside on someone else's domain.

    The Same Origin Policy limits any AJAX XMLHTTPRequest browser call to URLs on the same server from which the host page was loaded. This means that it is impossible to make any kind of AJAX-style request to a different site than the one from which the page was loaded.
    Last edited by Philip M; 09-06-2012 at 08:42 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    I'm not too familiar with JavaScript terms and whatnot yet, is AJAX-style JavaScript related as I've seen pages where you can upload from a URL.

    It's not needed as such but it would be a lot easier for what the form is going to be used for and the initial amount of timed it will need to be used...

    I've not tried any of the above methods yet, I need some extra sleep as I only had four hours before waking up. Once I've recharged, I'll implement the file upload and post the feedback.

    How would I be able to display the image on the page without any reloading occurring, would I need to have the file upload section in an iframe?

    How can I choose where the file gets saved exactly and the file name if it's not a number, also how can the file be discarded if the person cancels the form?

    Thank you very much for your help,
    Best Regards,
    Tim

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Philip M View Post
    You cannot upload files to your pages which reside on someone else's domain.

    The Same Origin Policy limits any AJAX XMLHTTPRequest browser call to URLs on the same server from which the host page was loaded. This means that it is impossible to make any kind of AJAX-style request to a different site than the one from which the page was loaded.
    actually, that's not true. for old browser support, forms are typically used for file uploads, not ajax. Form can point to any url anywhere. the only "restriction" is a warning when submitting to a non-https site from an https site.


    in newer browsers, we can use ajax in conjunction with the new FormData() constructor to upload binary files. If the server resides on a different domain, it must opt-in for x-domain ajax2 uploads by specifying POST on the cors's allow, and * on the cors's allow-origin.


    cors can be performed on any browser newer than IE7, which at my work's site is 96% of all visitors...
    EDIT: to be fair, that includes IOS, which has no files to upload...
    Last edited by rnd me; 09-06-2012 at 11:45 AM. Reason: typo
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I may have got this wrong, but my understanding is that the OP wants visitors to his website to be able upload to his website images obtained from another website. This has copyright implications.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Philip M View Post
    I may have got this wrong, but my understanding is that the OP wants visitors to his website to be able upload to his website images obtained from another website. This has copyright implications.
    OP said:
    Code:
    As the images are coming from another website, it would also be very useful if you could enter the image url
    i don't facilitate that with my suggestions because it seemed like a bonus anyway. it could be a legit re-use, i won't pre-judge the OP's goals. I know doing site migrations between quirky CMSs you have to do stuff like that...

    If one wants to upload images to his site, they must come from a user's file system.


    you can ask on a server-side forum about grabbing other site's images. YQL also turns html into jsonp, so it's worth a shot if you can't run your own server. you may need to signing with a yahoo id for that functionality.

    always follow posted usage guidelines or robots will find and sue you.
    Last edited by rnd me; 09-06-2012 at 02:02 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #11
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    I may have got this wrong, but my understanding is that the OP wants visitors to his website to be able upload to his website images obtained from another website. This has copyright implications.
    You are correct saying that I do not own the copyright, however as this website I am setting up is massively linked to the other website, I have been granted permission to use any image found on their website, nevertheless, this question has always been about uploading their images, this just haven't been mentioned...

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by MrTIMarshall View Post
    You are correct saying that I do not own the copyright, however as this website I am setting up is massively linked to the other website, I have been granted permission to use any image found on their website, nevertheless, this question has always been about uploading their images, this just haven't been mentioned...
    While I am willing to believe that you do have permission, there is the faint possibility that others might not be so scupulous. In any case, it seems a long way round, and I do not really see the point. If you want the images from the other site (which you say you have pemission to use), why do you not simply download them directly and then upload them to your site?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    Regular Coder
    Join Date
    Nov 2010
    Posts
    378
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    While I am willing to believe that you do have permission, there is the faint possibility that others might not be so scupulous. In any case, it seems a long way round, and I do not really see the point. If you want the images from the other site (which you say you have pemission to use), why do you not simply download them directly and then upload them to your site?
    Because this form is being built for a help/reference/tutorial/fan based website for an on-line game. The will be an item Catalogue with pages similar to Amazon. The form will initially need to be done more than 500 times to get all the items up and the information submitted to the database and the form has quite a few questions, some of which you may need to look at the games source for the length of a bar for statistical data. I need to make this form quickly and easily for the admin to use.


  •  

    Posting Permissions

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