?
Solved

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

Posted on 2001-07-09
6
Medium Priority
?
3,364 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 6264447
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
ID: 6264517
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
ID: 6264701
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
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 6265946
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
ID: 6268248
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
ID: 6268896
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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

762 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