File Upload - Image Only?

[MrTIMarshall]

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

[rnd me]

Originally Posted by MrTIMarshall

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.

<input accept="image/*" type="file" />

[Philip M]

The accept attribute is not supported in Internet Explorer and Safari. That makes it pretty useless.

<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

[rnd me]

Originally Posted by Philip M

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:

<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=''; } '
 />

[MrTIMarshall]

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

[Philip M]

Originally Posted by MrTIMarshall

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.

[MrTIMarshall]

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

[rnd me]

Originally Posted by Philip M

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...

[Philip M]

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.

[rnd me]

Originally Posted by Philip M

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:

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.

[MrTIMarshall]

Originally Posted by Philip M

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...

[Philip M]

Originally Posted by MrTIMarshall

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?

[MrTIMarshall]

Originally Posted by Philip M

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.