I have a simple HTML upload form, and I want to specify a default extension ("*.drp" for example). I've read that the way to do this is through the ACCEPT attribute of the input tag, but I don't know how exactly.
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Upload DRP File:
<input name="Upload Saved Replay" type="file" accept="*.drp"/><br />
<input type="submit" value="Upload File" />
</form>
Edit I know validation is possible using javascript, but I would like the user to only see ".drp" files in his popup dialog. Also, I don't care much about server-side validation in this application.
This question is related to
html
webforms
file-upload
I wouldnt use this attribute as most browsers ignore it as CMS points out.
By all means use client side validation but only in conjunction with server side. Any client side validation can be got round.
Slightly off topic but some people check the content type to validate the uploaded file. You need to be careful about this as an attacker can easily change it and upload a php file for example. See the example at: http://www.scanit.be/uploads/php-file-upload.pdf
For specific formats like yours ".drp ". You can directly pass that in accept=".drp" it will work for that.
But without " * "
<input name="Upload Saved Replay" type="file" accept=".drp" />_x000D_
<br/>The accept attribute specifies a comma-separated list of content types (MIME types) that the target of the form will process correctly. Unfortunately this attribute is ignored by all the major browsers, so it does not affect the browser's file dialog in any way.
I wouldnt use this attribute as most browsers ignore it as CMS points out.
By all means use client side validation but only in conjunction with server side. Any client side validation can be got round.
Slightly off topic but some people check the content type to validate the uploaded file. You need to be careful about this as an attacker can easily change it and upload a php file for example. See the example at: http://www.scanit.be/uploads/php-file-upload.pdf
I use javascript to check file extension. Here is my code:
HTML
<input name="fileToUpload" type="file" onchange="check_file()" >
.. ..
javascript
function check_file(){
str=document.getElementById('fileToUpload').value.toUpperCase();
suffix=".JPG";
suffix2=".JPEG";
if(str.indexOf(suffix, str.length - suffix.length) == -1||
str.indexOf(suffix2, str.length - suffix2.length) == -1){
alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
document.getElementById('fileToUpload').value='';
}
}
The accept attribute specifies a comma-separated list of content types (MIME types) that the target of the form will process correctly. Unfortunately this attribute is ignored by all the major browsers, so it does not affect the browser's file dialog in any way.
Another solution with a few lines
function checkFile(i){
i = i.substr(i.length - 4, i.length).toLowerCase();
i = i.replace('.','');
switch(i){
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
// do OK stuff
break;
default:
// do error stuff
break;
}
}
You can do it using javascript. Grab the value of the form field in your submit function, parse out the extension.
You can start with something like this:
<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() {
alert(document.someform.file1.value)
}
</script>
I agree with alexmac - do it server-side as well.
I wouldnt use this attribute as most browsers ignore it as CMS points out.
By all means use client side validation but only in conjunction with server side. Any client side validation can be got round.
Slightly off topic but some people check the content type to validate the uploaded file. You need to be careful about this as an attacker can easily change it and upload a php file for example. See the example at: http://www.scanit.be/uploads/php-file-upload.pdf
The accept attribute expects MIME types, not file masks. For example, to accept PNG images, you'd need accept="image/png". You may need to find out what MIME type the browser considers your file type to be, and use that accordingly. However, since a 'drp' file does not appear standard, you might have to accept a generic MIME type.
Additionally, it appears that most browsers may not honor this attribute.
The better way to filter file uploads is going to be on the server-side. This is inconvenient since the occasional user might waste time uploading a file only to learn they chose the wrong one, but at least you'll have some form of data integrity.
Alternatively you may choose to do a quick check with JavaScript before the form is submitted. Just check the extension of the file field's value to see if it is ".drp". This is probably going to be much more supported than the accept attribute.
You can do it using javascript. Grab the value of the form field in your submit function, parse out the extension.
You can start with something like this:
<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() {
alert(document.someform.file1.value)
}
</script>
I agree with alexmac - do it server-side as well.
The accept attribute expects MIME types, not file masks. For example, to accept PNG images, you'd need accept="image/png". You may need to find out what MIME type the browser considers your file type to be, and use that accordingly. However, since a 'drp' file does not appear standard, you might have to accept a generic MIME type.
Additionally, it appears that most browsers may not honor this attribute.
The better way to filter file uploads is going to be on the server-side. This is inconvenient since the occasional user might waste time uploading a file only to learn they chose the wrong one, but at least you'll have some form of data integrity.
Alternatively you may choose to do a quick check with JavaScript before the form is submitted. Just check the extension of the file field's value to see if it is ".drp". This is probably going to be much more supported than the accept attribute.
You can do it using javascript. Grab the value of the form field in your submit function, parse out the extension.
You can start with something like this:
<form name="someform"enctype="multipart/form-data" action="uploader.php" method="POST">
<input type=file name="file1" />
<input type=button onclick="val()" value="xxxx" />
</form>
<script>
function val() {
alert(document.someform.file1.value)
}
</script>
I agree with alexmac - do it server-side as well.
Another solution with a few lines
function checkFile(i){
i = i.substr(i.length - 4, i.length).toLowerCase();
i = i.replace('.','');
switch(i){
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
// do OK stuff
break;
default:
// do error stuff
break;
}
}
The accept attribute expects MIME types, not file masks. For example, to accept PNG images, you'd need accept="image/png". You may need to find out what MIME type the browser considers your file type to be, and use that accordingly. However, since a 'drp' file does not appear standard, you might have to accept a generic MIME type.
Additionally, it appears that most browsers may not honor this attribute.
The better way to filter file uploads is going to be on the server-side. This is inconvenient since the occasional user might waste time uploading a file only to learn they chose the wrong one, but at least you'll have some form of data integrity.
Alternatively you may choose to do a quick check with JavaScript before the form is submitted. Just check the extension of the file field's value to see if it is ".drp". This is probably going to be much more supported than the accept attribute.
The accept attribute specifies a comma-separated list of content types (MIME types) that the target of the form will process correctly. Unfortunately this attribute is ignored by all the major browsers, so it does not affect the browser's file dialog in any way.
I use javascript to check file extension. Here is my code:
HTML
<input name="fileToUpload" type="file" onchange="check_file()" >
.. ..
javascript
function check_file(){
str=document.getElementById('fileToUpload').value.toUpperCase();
suffix=".JPG";
suffix2=".JPEG";
if(str.indexOf(suffix, str.length - suffix.length) == -1||
str.indexOf(suffix2, str.length - suffix2.length) == -1){
alert('File type not allowed,\nAllowed file: *.jpg,*.jpeg');
document.getElementById('fileToUpload').value='';
}
}
The accept attribute specifies a comma-separated list of content types (MIME types) that the target of the form will process correctly. Unfortunately this attribute is ignored by all the major browsers, so it does not affect the browser's file dialog in any way.
I wouldnt use this attribute as most browsers ignore it as CMS points out.
By all means use client side validation but only in conjunction with server side. Any client side validation can be got round.
Slightly off topic but some people check the content type to validate the uploaded file. You need to be careful about this as an attacker can easily change it and upload a php file for example. See the example at: http://www.scanit.be/uploads/php-file-upload.pdf
For specific formats like yours ".drp ". You can directly pass that in accept=".drp" it will work for that.
But without " * "
<input name="Upload Saved Replay" type="file" accept=".drp" />_x000D_
<br/>Source: Stackoverflow.com