Solved

<input type=file> restricting types of files, default directory

Posted on 2001-07-09
6
3,078 Views
Last Modified: 2012-08-13
Hi all,
Two questions:

1.
To restrict the types of files a user can select using <input type=file>, I set the following property: (e.g.) accept="image/*". This should, supposedly, only list images in the file browser box when you click Browse. Except it doesn't, it always lists all files. I'm using IE 5.5 on Win2K. Is this a Netscape property? What am I doing wrong?

2.
Is it possible to open the file browser box in a certain specified directory, it always seems to start in "my pictures" or something like this.

Cheers.
0
Comment
Question by:Musravus1
  • 3
  • 2
6 Comments
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
You don't have ANY control over this on the client side. You can change what you're going to accept on the SERVER, but you can't change what they get or where they start on the CLIENT.

HUMONGOUS security hole if you could.
0
 

Author Comment

by:Musravus1
Comment Utility
That makes sense of course if you think about it, although I can't really see why specifying that the file browser box should only list files of type "image" is a huge security risk.

In the meantime I have found out that most browsers don't support the "accept" property although it has been out there for a long time.

Does anyone know if IE6 has found a nice way to deal with this problem?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
I have not done much with IE 6 beta yet, but the direction is toward higher levels of privacy protection which means more restrictive security, not less.

As developers we find the security elements to be a limitation, but from the users side the security concerns get raised with every new hack attack, and the browsers are designed for users not developers.

Cd&
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
Comment Utility
This is a filter I did a while ago.  It might help. It doesn't prevent the
user from selecting the wrong file type, but it does prevent them from
submitting anythin with the wrong extension.

<head>
   <title> file type filter </title>
<style>
   body {background-color:blue;color:lightyellow;border:5px outset red}
   #prompt {padding:10;background-color:blueviolet;color:floralwhite;
            width:250}
   .container {width:250;background-color:brown;color:peru;
               border:3px outset burlywood}
   .file {background-color:deepskyblue;colorcadet:blue;
          border-color:lightsteelblue}
   .sbutton {background-color:dimgray;color:pink;border-color:dodgerblue}
</style>
<script language="JavaScript">
<!--
   var fileType = new Array(".gif", ".jpg", ".png");
   var arrayList="File Types: ";
   for (i=0;i<fileType.length;i++)
      { arrayList+=fileType[i]+" "; }
   var uploadOK=false;
   function filterFiles(thesource,thefile)
   {
      uploadOK = false;
      if (thefile)
      {
         while (thefile.indexOf("\\") != -1)
         {
            thefile = thefile.slice(thefile.indexOf("\\") + 1);
         }
         ftype = thefile.slice(thefile.indexOf(".")).toLowerCase();
         for (i=0;i<fileType.length;i++)
         {
            if (fileType[i]==ftype)
            {
               uploadOK=true;
            }
         }
      }
      if (uploadOK)
      {
         thesource.submit();
         alert('submitted');
      }
      else
      {
         alert(arrayList+' only please');
      }
   }
//  End -->
</script>
</head>
<body>
<h1 align="center"> File Upload Filter</h1>
<p> With this script you can set the file extensions that are acceptable
    for uploading and the user will be prompted with the list.  When
    they select a file and submit, the extention will be validated and
    either the submit will be executed for the user will get an alert.
</p>
<br><br>
<div align="center">
<script language="JavaScript">
<!--
document.write('<div align="center" id="prompt"> Upload '+arrayList+ '</div>');
// -->
</script>
<div align="center" class="container">
<form method="post" name="myform">
   <input type="file" name="myfile" class="file">
   <br><br>
   <input type="button" name="Submit" value="Submit" class="sbutton"
      onFocus="this.blur()"
      onClick="filterFiles(document.myform,document.myform.myfile.value);return false">
</form>
</div>
</div>
</body>
</html>
0
 

Author Comment

by:Musravus1
Comment Utility
Thanks, that will do the trick for now. I'm planning into turning this into a signed applet (don't worry, it's an intranet application) which will do most of the stuff I want, I just needed to know the alternatives.

I'll abandon the "default directory" idea, it makes sense you can't prescribe this on a client machine you know nothing about.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
At least with an intranet you have some consistency with the client environment, unlike the Internet where the user variations ar almost infinite.

Cd&
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now