I want an input that permits multiple files with file-specific params. What are my options? I'm in Vue so forgive the idiomatic HTML.
<input type="file" multiple #change="handle()" :data-page-number="whatever" />
Is there any way to do this within a multiple input? Or do I need to nest-and-repeat single inputs with their own specific fields for page-number etc?
It's Vue, but it's also HTML, so all input options for file upload are available to you. I am not sure what "types" you are looking for but this should get you started:
// In your template
<input
type="file"
multiple
name="uploadFieldName"
:disabled="isSaving" // Optional add a data property isSaving default false
#change="filesChange($event.target.name, $event.target.files, $event.target.files.length)";
accept="image/*"
// or for many
accept="image/png, image/jpeg"
class="input-file"
>
For all input attributes see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
// add to your component methods
filesChanged (inputName, files, filesCount) {
// Do Stuff
// if using saving this.isSaving = true; to disable input
}
The files argument will contain an array of File(s) for all option see: https://developer.mozilla.org/en-US/docs/Web/API/File
Hope this helps get you pointed in the right direction. If this answer missed the mark a bit please update your question with more relevant information around what you are trying to achieve and I can help clarify.
Related
<input id="format_ThisFormat" name="format_ThisFormat" type="hidden" value="##-##-##-##" />
So, I know this much to go on, but basically, my issue is that the input field is being cleared if the complete mask isn't being entered (For example, if just "12-44" is being input, the field will clear, but if "12-34-56-78" is entered, the field will stay. I want the ability to allow for partial inputs. Any ideas how I can edit this line to accomplish what I am trying to achieve? I'm assuming it's an issue with this line, I'm not just going to post thousands and thousands of lines of code because it won't make any sense, custom API in visual basic SPA.
you can add a event listener and check if the input is valid:
let input = document.getElementById('format_ThisFormat');
input.addEventListener('blur', (e) => {
if(!e.target.value.match(/\d{2}-\d{2}-\d{2}/g)){
e.target.value = '';
}
})
<input id="format_ThisFormat" name="format_ThisFormat" type="text" />
Is there a way (without JS) to make input fields POST a default value in case some input fields were blank when the submit was executed?
In other words: I want to avoid on server side reciving stuff like
"ID=&PW="
<form>
<input name="ID" value="stuff"/>
<input name="PW" value="stuff"/>
</form>
setting the value doesn't really help as the user still can clean the input field by him self.
There is no way to do so in pure HTML. Even if you use JS to setup defaults, someone can intercept and modify HTTP Request.
Never trust input values. You can't assume their values.
No. Not without JavaScript.
...but it would be so easy with JavaScript. Not that I advocate inline scripts, but how about:
<input name="ID" value="stuff" onBlur="this.value=this.value==''
? 'default'
: this.value;" />
The Javascript you see is a simple ternary operator, following the pattern:
myVar = condition ? valueIfTrue : valueIfFalse;
So it's checking if the input is blank. If so, set it to a default; if not, let it be.
You should simply enforce the default value server-side. Otherwise the user will always have the ability to trip you up. You can use javascript to reduce the chance of this happening but javascript will always be exposed to the user. Html doesn't have a method for this and even if I'm wrong and it does, or does in the future - such a thing is ALSO exposed to the user.
You're talking about using strtok. I'd recommend simply breaking the tokenizing out twice. Once for the &, and then within each of those results again for the = (obviously if the second result of each pair is blank or null, substituting the default). Otherwise, tokenize it yourself, still on the server.
Example:
<form>
<input type='submit'>
</form>
When submitted results in:
http://example.com/?
How to make it:
http://example.com/
?
[This is a very simple example of the problem, the actual form has many fields, but some are disabled at times. When all are disabled, the trailing ? appears]
In my case I'm using window.location, not sure it's the best alternative, but it's the only one I could make it work:
$('#myform').submit(function()
{
... if all parameters are empty
window.location = this.action;
return false;
});
My real use was to convert GET parameter to real url paths, so here is the full code:
$('#myform').submit(function()
{
var form = $(this),
paths = [];
// get paths
form.find('select').each(function()
{
var self = $(this),
value = self.val();
if (value)
paths[paths.length] = value;
// always disable to prevent edge cases
self.prop('disabled', true);
});
if (paths.length)
this.action += paths.join('/')+'/';
window.location = this.action;
return false;
});
Without using Javascript, I'm not sure there is one. One way to alleviate the problem may be to create a hidden input that just holds some junk value that you can ignore on the other side like this:
<input type="hidden" name="foo" value="bar" />
That way you will never have an empty GET request.
This is an old post, but hey.. here ya go
if you are using something like PHP you could submit the form to a "proxy" page that redirects the header to a specific location + the query.
For example:
HTML:
<form action="proxy.php" method="get">
<input type="text" name="txtquery" />
<input type="button" id="btnSubmit" />
</form>
PHP (proxy.php)
<?php
if(isset($_GET['txtquery']))
$query = $_GET['txtquery'];
header("Location /yourpage/{$query}");
?>
I am assuming this it what you are trying to do
I was looking for similar answer. What I ended up doing was creating a button that redirects to a certain page when clicked.
Example:
<button type="button" value="Play as guest!" title="Play as guest!" onclick="location.href='/play'">Play as guest!</button>
This is not an "answer" to your question but might be a good work around. I hope this helps.
Another option would be to check the FormData with javascript before submitting.
var myNeatForm = document.getElementById("id_of_form");
var formData = new FormData(myNeatForm); // Very nice browser support: https://developer.mozilla.org/en-US/docs/Web/API/FormData
console.log(Array.from(formData.entries())); // Should show you an array of the data the form would be submitting.
// Put the following inside an event listener for your form's submit button.
if (Array.from(formData.entries()).length > 0) {
dealTypesForm.submit(); // We've got parameters - submit them!
} else {
window.location = myNeatForm.action; // No parameters here - just go to the page normally.
}
I know this is a super old question, but I came across the same issue today. I would approach this from a different angle and my thinking is that in this day and age you should probably be using POST rather than GET in your forms, because passing around values in a querystring isn't great for security and GDPR. We have ended with a lot of issues where various tracking scripts have been picking up the querystring (with PII in the parameters), breaking whatever terms of services they have.
By posting, you will always get the "clean url", and you won't need to make any modifications to the form submit script. You might however need to change whatever is receiving the form input if it is expecting a GET.
You will get a trailing question mark when submitting an empty form, if your server adding trailing slash to URL and your action URL of form - is directory (and not file) and:
Trailing slash in the action attribute URL (action="/path/").
With dot (with or without trailing slash after it) instead specific URL (action="." or action="./").
With empty action (action="").
Form without action attribute.
Try to specify an action-URL without trailing slash:
action="path"
or
action="./path/sub"
and
action="/path"
or
action="/path/sub"
Anyway to restrict the selection of file types via the <input type="file" /> element?
For instance, if I wanted only images types to be uploaded, I would restrict the possible selections to (image/jpg,image/gif,image/png), and the selection dialog would grey out files of other mime types.
p.s. I know that I can do this after the fact with the File API by scanning the .type attributes. I'm really trying to restrict this before hand.. I also know I can do this via flash, but I do NOT want to have use flash for this.
There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
If you don't have access to the backend have a look at a flash based solution like SWFUpload.
See more on this here: File input 'accept' attribute - is it useful?
It's better to let user select any file, and then check its type - this is better supported by the browsers:
var
file = (el[0].files ? el[0].files[0] : el[0].value || undefined),
supportedFormats = ['image/jpg','image/gif','image/png'];
if (file && file.type) {
if (0 > supportedFormats.indexOf(file.type)) {
alert('unsupported format');
}
else {
upload();
}
}
You can also check for file size using file.size property.
This question already has answers here:
File input 'accept' attribute - is it useful?
(8 answers)
Closed 8 years ago.
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.
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" />
<br/>
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 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 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
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;
}
}