I am trying to upload a file in my form using the bootstrap-vue form file component
template
<b-form-group id="userInputGroup8" label="User Picture:">
<b-form-file id="userPictureInput" ref="fileinput" #input="userPictureSelected" v-model="userPictureFile" choose-label="Select" accept=".jpg, .png"></b-form-file>
<br> Selected file : {{ userPictureFile.name }}
</b-form-group>
Once the file is selected , the name is displayed in the browser, but it does not appear in the input field, and even if the userPictureSelected method is fired, I don't get its value in the console
script
data () {
return {
...
userPictureFile: '',
}
},
methods: _.extend({}, mapActions(['createUser']), {
userPictureSelected: () => {
console.log('Selected: ', this.userPictureFile.name)
}
}
I get the error
[Vue warn]: Error in event handler for "input": "TypeError: _this2.userPictureFile is undefined"
What could be wrong ? where can I get a good and recent example for uploading such file into my server backend static files directory ?
thanks for update
seems to be an issue not yet solved with bootstrap-vue
Custom input file after choice file nothing change.
Related
I am building a web app using nuxt, vuetify 2.x, and typescript.
I want to upload file using v-file-input but have some issue upon selecting the same file.
For example, when I select some file and then close the dialog without saving it,
I cannot select the same file(i.e.#change is not firing)
what I have tried:
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetForm() {
(this.$refs.form as HTMLFormElement).reset();
},
resetImageUploader() {
(this.$refs.imageUploader as any).reset();
},
}
(resetForm() is called when dialog is closed)
I've tried resetting imageuploader when the input form is clicked, but it did not work.
I've tried (this.$refs.imageUploader as any).value = '' instead of reset() but it did not work.
Btw, When I select the file, clear icon appears like this
If I clear the form by clicking this icon, I can select the same file..
Does anyone have idea how I can solve this issue?
try to do like below to reset
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
:value="internalVal"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetImageUploader() {
this.internalVal = []
},
}
I'm practicing building a Hybrid Mobile app with Quasar, Vue and Vuex.
I've successfully added my form input fields to my Vuex store but I don't know how to upload a file, in this case a photo, within my Form.
Here is my q-file input from my form, with the data.
<q-file
v-model="mealToSubmit.photo"
label="Upload File"
outlined
>
Data:
data () {
return {
mealToSubmit: {
name: '',
description: '',
photo: null,
grams: '',
calories: '',
visible: false
}
}
}
After I fill in the Form and click Save, all of the data appears on the page except for the photo I selected. In the console I get a 404 error:
404 http://localhost:8080/img/null 404 (Not Found)
I can see the problem here is that it's displaying null, instead of the name of the photo I upload, which is why I'm getting a 404 error.
Here are two screenshots, one of me filling in the Form and second is the data being displayed properly except for the photo, with the error message in the console.
NOTE:
Just to add to this, I've uploaded files before using Vue js and Bootstrap-Vue. I add an #change event on the File input with a v-model like this:
<b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
<b-form-file
v-model="profileData.photo_id"
id="photo_id"
placeholder="Choose a file..."
#change="attachImage"
accept=".jpg, .jpeg, .png"
></b-form-file>
</b-form-group>
Than in the Methods{}:
methods: {
attachImage(evt) {
const file = evt.target.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
}.bind(this), false);
reader.readAsDataURL(file);
},
}
And then I bind the data using FormData(); and send it to the backend. This approach isn't working with the Quasar file upload input and the code that I have above.
I got it now:
<q-file
#input="getFile"
label="Upload file"
/>
methods: {
getFile(file) {
// file is in the file variable
this.mealToSubmit.photo = file
}
}
I am working chrome extension which uses vue. I have found that google can take a while to publish updates, so there is some content that I would like to be able to edit with a json that is called by the extension via a $.getJSON https request. So far, that has worked pretty well for getting raw text. But I have problems when I try to add a span tag with a v-if statement such as the following:
Thank you for meeting. We have prepared the following <span v-if='docCount.length > 0'>documents</span><span v-else>document</span> for you today:
What happens is that it just says "prepared the following 'documentsdDocuments'" as if it takes all to be true.
I have gotten this result after putting the above JSON text in a v-html as follows:
<p v-html="coverLetterContent['p1']"></p>
I have gotten the same result after trying the following:
.bind(this)).then( function (result){
$(".letter-body").append("<p>"+result["letter"]["p1"]+"</p>")
});
I also tried creating a dynamic component as follows but was getting an error and nothing was rendered:
dynamicComponent: function() {
return {
template: `<p>${coverLetterContent["p1"]}</p>`,
methods: {
someAction() {
console.log("Action!");
}
}
}
}
The error I got on this was: "ReferenceError: coverLetterContent is not defined." coverLetterContent is defined in the vue app data and is accessible via the v-html call described above.
I'm implementing a form page with Vue.js using Single File Components.
The functionality is working as intended but on the Javascript console I have this error showing multiple times when using HTML Select elements:
# vue.runtime.esm.js:1888
TypeError: this.each is not a function
at HTMLOptionsCollection.collect (prototype.js:251)
at inserted (vue.runtime.esm.js:7842)
at Do (vue.runtime.esm.js:6674)
at l (vue.runtime.esm.js:6613)
at s (vue.runtime.esm.js:2235)
at ne (vue.runtime.esm.js:1854)
at Object.n [as insert] (vue.runtime.esm.js:2175)
at $ (vue.runtime.esm.js:6340)
at Or.__patch__ (vue.runtime.esm.js:6559)
at Or.Ln.t._update (vue.runtime.esm.js:3939)
I narrowed it down the the Select elements. Removing them makes the errors disapear.
Searching Google for this error did not provide any relevant information.
This is the relevant section of the HTML:
<select class="fieldcontent" v-model="oldNumber" >
<option v-for="hn in houseNumbers" :key="hn.oldNumber">{{hn.oldNumber}}
</option>
</select>
The select options are populated from a "houseNumbers" object (in a Vuex store) in the format:
[{
"oldNumber": "14",
"newNumber": ""
},{
"oldNumber": "15",
"newNumber": ""
},{
"oldNumber": "17",
"newNumber": ""
}]
I get them on the component via a computed property:
computed: {
...mapState(['houseNumbers'])
},
The HTML Select is binded to the local data of that component, shown below:
data() {
return {
newNumber: null,
oldNumber: null
}
},
This error is thrown both when the component renders and also when I click to change the selected option.
Is there anything I can do to fix this console errors?
Is this an know issue?
The Vue code is running alongside an old application with Struts 1.2 and JSPs, and this application is importing a prototype.js version older than 1.7
I'm using the upload component of Element UI. It unfortunately triggers a POST request as soon as a file is uploaded. What I'm aiming for is to push the files to an empty array which would be posted after with button.
HTML
// Element UI documentation says http-request overrides xhr behavior
// so I can use my own file request. In this case, I wanted to use a method
// though I'm not quite sure about this part?
<el-upload
action="",
:http-request="addAttachment",
:on-remove="deleteAttachment",
:file-list="attachments">
<el-button size="mini" type="primary">Add file</el-button>
</el-upload>
// button that uploads the files here
JS
data() {
attachments: []
},
methods: {
addAttachment ( file, fileList ) {
this.attachments.push( file );
},
deleteAttachment () {
// removes from array
}
}
Apparently, you also need to set the auto-upload prop to be false. Otherwise, it defaults to true and will automatically try to upload the file even if you've specified a function for the http-request prop.
In your case:
<el-upload
action="",
:http-request="addAttachment",
:auto-upload="false"
:on-remove="deleteAttachment",
:file-list="attachments"
>
<el-button size="mini" type="primary">Add file</el-button>
</el-upload>
Here's the documentation for the component.