I read on this docs : https://github.com/pqina/vue-filepond
I try to add like this :
<FilePond
allowMultiple="true"
accepted-file-types="image/jpg, image/jpeg, application/pdf"
maxFileSize="2MB"
required="true"/>
multiple, validation file type, max file works
But, required does not works
How can I solve this problem guys?
Using the v-bind:required prop works:
<form method="post" action="">
<file-pond v-bind:required="true"/>
<button type="submit">submit</button>
</form>
Related GitHub issue: https://github.com/pqina/vue-filepond/issues/138
Related
I'm trying to post data (in a Vue application). There is also an image file input in the form. All tutorials and answers are just telling to send the file alone or with other files.[1][2]
What I want to do is to append the file to the existing object that I create with v-model bindings.
// Vue
<template>
<input name="title" type="text" v-model="newPost.title" />
<textarea name="content" v-model="newPost.content"></textarea>
<input name="image" type="file" />
</template>
<script>
...
newPost: {
title: null,
image: null,
content: null
}
...
addNewPost() {
axios.post('/api/posts', this.newPost)
}
</script>
How should I do this?
You can use Base64 encode in client side and add the encoded string to your post request and decode from server side:
image here will be the encoded string an you can send axios request as you wrote.
You cannot mount the selected file with v-model. Since the file is a constantly changing element, you should use the #change and ref attribute.
<input name="image" type="file" #change="selectedPostImage" ref="postImage"/>
The following operation is performed in the function that captures the selected file.
selectedPostImage(){
this.newPost.image= this.$refs.postImage.files[0]
}
After these steps, you can send data with axios. Good codings..
I am working on a project in which I am using Aurelia for the front end.I am facing an issue for many days but still didn't find any solution I am new in Aurelia and I had tried everything.
In this picture you can see there is a required field and a button when we click on this button this should paste the client name in text field everything working fine.
but there is an issue when I am typing anything in the text field and then removing everything and then I click on the button so its saying field is required.
I understood the problem the problem is my validation is triggering on DOM blur event and when I am changing focus the required validation is triggering.
is there anything I can do?
here is some code snippet.
.ensure('candidatevalidatedby')
.displayName('Validated by')
.required()
.maxLength(60)
and
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby & validate" />
</div>
Thanks In Advance.
Edit: This issue is fixed.
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby & validateOnChange" />
</div>
This is the solution.
<div class="form-group">
<label>Candidate’s ID validated by *</label>
<input class="form-control" value.bind="candidate.candidatevalidatedby &
validateOnChange" />
</div>
it's working fine.
http://aurelia.io/docs/plugins/validation#validate-binding-behavior
Add max length attribute to your input element. It will work.
I want to put a name="name" attribute in a buefy input control. I have so far, not managed to make it work.
<b-field label="Fullname">
<b-input
value=""
icon="face"
name="name">
</b-input>
</b-field>
It sends empty values and I get an error in laravel:
"Column 'name' cannot be null"
It worked when I tried using a native html input control.
I have also tried using developer tools to inspect the DOM, it appears, the b-input control does not have a name.
How do I solve this?
Edit:
I had vue#2.1.10 and for buefy you need 2.4, that's why I got this bug. Sorry, my bad.
Use v-model to bind your component to your data.
In your <template>...</template>:
<b-field label="Fullname">
<b-input
v-model="fullname"
icon="face">
</b-input>
</b-field>
In your <script>...</script>:
data () {
fullname: null,
//some more state...
},
I'm having troubles getting my <input type="textarea" /> to have more than 1 row,
I tried adding the properties in the html, like you would do with a normal <textarea></textarea> like this: <input type="textarea" rows="x" cols="x" />
I even tried to do it in CSS, but it did not work.
I've searched all over the internet for a solution, but i can't seem to find a topic regarding my exact problem anywhere.
The textareas i'm experiencing this with, are on this website:
Vilduhelst
When you press the "Lav dit eget dilemma" button they will appear.
I'm looking for either a HTML or CSS solution.
Why not use the <textarea> tag?
<textarea id="txtArea" rows="10" cols="70"></textarea>
Although <input> ignores the rows attribute, you can take advantage of the fact that <textarea> doesn't have to be inside <form> tags, but can still be a part of a form by referencing the form's id:
<form method="get" id="testformid">
<input type="submit" />
</form>
<textarea form ="testformid" name="taname" id="taid" cols="35" wrap="soft"></textarea>
Of course, <textarea> now appears below "submit" button, but maybe you'll find a way to reposition it.
As said by Sparky in comments on many answers to this question, there is NOT any textarea value for the type attribute of the input tag.
On other terms, the following markup is not valid :
<input type="textarea" />
And the browser replaces it by the default :
<input type="text" />
To define a multi-lines text input, use :
<textarea></textarea>
See the textarea element documentation for more details.
The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.
I was using something like this before Dojo 1.8, but now I get a "node not found" error :
<form dojoType="dijit.form.Form">
Search :
<input type="text" dojoType="dijit.form.TextBox" name="searcht" id="searcht">
<script type="dojo/connect" event="onSubmit" args="evt">
my_function();
dojo.stopEvent(evt);
</script>
</form>
I noticed that if I remove the search text box the code is working.
How can I rewrite the above to work with 1.8, and also please be so kind to point me in the right direction to read about this and understand why this is happening.
I should also note that I'm using the same type of code for contentpanes, and the code works fine there.
Thanks,
Noru
In dojo 1.8 dojo.connect is dojo/on. First you have to load the modules you are going to use and parse the file to transform dijit elements.
<script>
require([
"dojo/parser",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button"
], function(parser) {
parser.parse();
});
</script>
Second, declare the dijit properties and funcionality inside html tags:
<div data-dojo-type="dijit/form/Form" id="search_form">
<script type="dojo/on" data-dojo-event="submit" data-dojo-args="evt">
evt.stopPropagation();
alert( "my_function()" );
</script>
<label for="my_textbox">Search:</label>
<input type="text" data-dojo-type="dijit/form/TextBox" id="my_textbox"/>
<button data-dojo-type="dijit/form/Button" id="my_button" type="submit">
Submit
</button>
</div>
I used a declaratively example inserting dijit options inside the html code. There is other way using only javascript. Take a look in the official documentation: http://dojotoolkit.org/reference-guide/1.8/dijit/index.html