im have little problem with clean input after functions complete
Can someone tell me what im do wrong
After functions is complete im try to clean the input
But i dont have any result with this
this is my code in Vue Component
<form role="form">
<div class="card-body">
<div class="form-group">
<label for="file">Upload File</label>
<div class="input-group">
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="file"
ref="file"
v-on:change="handleFileUpload"
/>
<label class="custom-file-label" for="file">Choose file</label>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button v-on:click="onClickUploadAccounts" class="btn btn-primary">Upload</button>
<button v-on:click="onClickSetLoader" class="btn btn-primary">Loader</button>
</div>
</form>
methods: {
handleFileUpload(){
this.file = this.$refs.file.files[0]
},
onClickUploadAccounts(){
let formData = new FormData();
formData.append('file', this.file);
this.$store.commit('imports/setIsLoad', true)
axios.post( '/admin-account-import',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(() => {
console.log('SUCCESS!!')
this.$store.commit('imports/setIsLoad', false)
this.file = ''
formData.delete('file')
formData.append('file', this.file = '')
})
.catch(() => {
console.log('FAILURE!!');
});
},
onClickSetLoader()
{
this.$refs.file.files = ''
},
},
You need to set this.file to null. in your data
data: function () {
return {
file: null
}
}
And you can remove in your methods
this.file = ''
formData.delete('file')
formData.append('file', this.file = '')
Related
I have a basic file upload in Vue.js. I am trying to append a textarea so that I can add a description about the file. However, I can not see to get this to work. The idea is to be able to send files through the API that i am creating in laravel.
<template>
<div class="container">
Files
<input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()" />
<div v-for="(file, key) in files" :key="file.id" class="file-listing">
{{ file.name }}
<textarea
name="description"
id="description"
cols="30"
rows="10"
v-model="description"
></textarea>
<span class="remove-file" v-on:click="removeFile( key )">Remove</span>
</div>
<button v-on:click="addFiles()">Add Files</button>
<button v-on:click="submitFiles()">Submit</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
files: [],
description: ""
};
},
methods: {
addFiles() {
this.$refs.files.click();
},
submitFiles() {
let formData = new FormData();
let description = this.description;
description = JSON.stringify(description);
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append("files[" + i + "]", file);
formData.append("description[" + i + "]", description);
}
axios
.post("/media", formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(function() {
console.log("SUCCESS!!");
})
.catch(function() {
console.log("FAILURE!!");
});
},
handleFilesUpload() {
let uploadedFiles = this.$refs.files.files;
for (var i = 0; i < uploadedFiles.length; i++) {
this.files.push(uploadedFiles[i]);
}
},
removeFile(key) {
this.files.splice(key, 1);
}
}
};
</script>
I am trying to add a description for each file. Does anyone have any ideas please?
Here there is one description model but we need a description model for each file.
So let define them
<template>
<div class="container">
Files
<input
id="files"
ref="files"
type="file"
multiple
#change="handleFilesUpload()"
/>
<div v-for="(item, key) in files" :key="key" class="file-listing">
{{ item.file.name }}
<textarea
v-model="item.description"
name="description"
cols="30"
rows="10"
></textarea>
<span class="remove-file" #click="removeFile(key)">Remove</span>
</div>
<button #click="addFiles()">Add Files</button>
<button #click="submitFiles()">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
files: [],
description: ''
}
},
methods: {
addFiles() {
this.$refs.files.click()
},
submitFiles() {
let formData = new FormData()
for (var i = 0; i < this.files.length; i++) {
let item = this.files[i]
formData.append('files[' + i + ']', item.file)
formData.append('description[' + i + ']', item.description)
}
axios
.post('/media', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(function() {
console.log('SUCCESS!!')
})
.catch(function() {
console.log('FAILURE!!')
})
},
handleFilesUpload() {
let uploadedFiles = this.$refs.files.files
for (var i = 0; i < uploadedFiles.length; i++) {
this.files.push({
file: uploadedFiles[i],
description: ''
})
}
},
removeFile(key) {
this.files.splice(key, 1)
}
}
}
</script>
See working example here
<div class="field relative">
<label>Description</label>
<textarea class="textarea" v-model="description" type="text" maxlength="10000"> </textarea>
<label for="upload-file" class="icn icn-camera cursor-pointer absolute bottom-3 right-4">
<input type="file" id="upload-file" hidden ref="file" #change="getImage($event)" accept="image/**" />
</label>
</div>
use Relative and Absolute position to put the camera icon inside the
textarea
use bottom-3 right-4 to find the proper position
change the default upload file icon to a camera icon
I'm trying to inline edit an article and submit the values from the form. However, the v-model values are empty on submit.
Check out my code below. So the top form is for new articles only. And in my v-for there's a switch between 'view' and 'edit' mode.
<template>
<div>
<h2>Articles</h2>
<hr />
<form class="mb-3" #submit.prevent="addArticle">
<div class="form-group">
<input class="form-control" placeholder="Title" v-model="article.title" />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
</div>
<button type="submit" class="btn btn-light btn-block">Add new</button>
</form>
<hr />
<div class="card card-body mb-2" v-for="article in articles" v-bind:key="article.id">
<template class="article-row" v-if="edit === article.id">
<form #submit.prevent="editArticle">
<div class="form-group">
<input class="form-control" placeholder="Title" v-model="article.title" />
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Bodytext" v-model="article.body"></textarea>
</div>
<!-- <input type="hidden" v-model="article.id" /> -->
<button type="submit" class="btn btn-light btn-block">Update</button>
</form>
</template>
<template v-else>
<h3>{{ article.title }}</h3>
<p v-html="article.body"></p>
<hr />
<div>
<button #click="toggleEditMode(article.id)" class="btn btn-warning">Edit</button>
<button #click="deleteArticle(article.id)" class="btn btn-danger">Delete</button>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
article: {
id: "",
title: "",
body: ""
},
article_id: "",
edit: false
};
},
created() {
this.fetchArticles();
},
methods: {
fetchArticles(page_url) {
let vm = this;
page_url = page_url || "/api/articles";
fetch(page_url)
.then(res => res.json())
.then(res => {
this.articles = res.data;
vm.makePagination(res.meta, res.links);
})
.catch(err => console.log(err));
},
addArticle() {
console.log(JSON.stringify(this.article));
fetch("/api/article", {
method: "post",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
this.article.title = "";
this.article.body = "";
alert("Article added!", "success");
this.fetchArticles();
})
.catch(err => console.log(err));
},
editArticle() {
console.log(JSON.stringify(this.article));
fetch("/api/article", {
method: "put",
body: JSON.stringify(this.article),
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
alert("Article updated!", "success");
this.fetchArticles();
})
.catch(err => console.log(err));
},
toggleEditMode(article_id) {
this.edit = article_id;
}
}
};
</script>
The console.log(JSON.stringify(this.article)); on the first line of the editArticle function returns an empty object (the default value)... What am i doing wrong?
You need to set the article befeore trying to update it like that:
toggleEditMode(article_id) {
for (let index = 0; index < this.articles.length; index++) {
const article = this.articles[index];
if(article.id === article_id){
this.article = article;
break;
}
}
this.edit = article_id;
}
Fiddle
I'm a beginner with React & Router and I'm trying to set up a very simple login form & redirection.
I don't really understand where i have to put my 'logic code' (an ajax call and a redirection).
This is what I get when I try to login..
GET security/login?callback=jQuery33102958950754760552_1525660032193&format=json&_=1525660032194 40 5()
It should be "POST" not "GET"
Here is what I've write.
import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userid: "",
password: "",
submitted: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(e) {
e.preventDefault();
var root = 'security/login';
//var userid = $("#userid").val();
// var password = $("#password").val();
var formData = {
"userId" : $('input[name=userid]').val(),//$('input[name=userid]').val()
"password" : $('input[name=password]').val()//$('input[name=password]').val()
};
var jsondata = JSON.stringify(formData);
console.log(jsondata);
alert("test" +jsondata);
$.ajax({
url: root,
method: 'POST',
data: {
format: 'json'
},
contentType : "application/json; charset=utf-8",
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
headers: {
'Content-Type': 'application/json', /*or whatever type is relevant */
'Accept': 'application/json' /* ditto */
},
dataType: 'jsonp',
encode : true,
success: function(data, response) {
alert(+data.status.message);
var $title = $('<h1>').text(data.talks[0].talk_title);
var $description = $('<p>').text(data.talks[0].talk_description);
$('#info')
.append($title)
.append($description);
}
});
//done(Login.function(data)
// {
// this.setState({});
// console.log(this.state.data);
// }
}
render() {
// const { loggingIn } = this.props;
// const { userid, password, submitted } = this.state;
return (
<div className="container">
<div className="col-md-5 col-md-offset-13 login-form text-center">
<div className="form-top">
<div className="form-top-left">
<h3>LOGIN PAGE</h3>
<p>Please enter your userID and password</p>
</div>
</div>
<form onSubmit={this.handleSubmit}>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-user" />
</span>
<input
className="form-control"
placeholder="UserID"
name="userid"
id="userid"
type="text"
required
/>
</div>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-lock" />
</span>
<input
type="password"
name="password"
id="password"
className="form-control"
placeholder="Password"
required
/>
</div>
<button type="submit"
className="btn btn-danger btn-block col-xs-6 col-lg-11"
id="login">
>
LOGIN
</button>
</form>
<div className="form-footer">
<div className="row">
<div className="col-xs-7 blink">
<i className="fa fa-unlock-alt" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Hope you all can help me... Thanks in advance
When you click on "Choose file" and select an image for upload, the path however appears. The image gets uploaded only after you click "Choose file" one more time.
How to resolve this and upload as and when the file is chosen?
Any help would be much appreciated. Thank you.
new Vue({
el: '.app',
data: {
userImage: ''
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files
if (!files.length) {
return
}
this.createImage(files[0])
},
createImage(file) {
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.userImage = e.target.result
}
reader.readAsDataURL(file)
},
removeImage: function (e) {
this.userImage = ''
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app">
<img class="profile-image" :src="userImage" />
<div v-if="!userImage">
<input type="file" round class="change-profile-image" #change="onFileChange" />
</div>
<div v-else>
<button class="delete-profile-image" color="secondary" icon="delete" #click="removeImage">Delete</button>
</div>
</div>
My code on JSfiddle.
You shouldn't rely on listening to the click event. What you are looking for is the change event instead, i.e. use #change instead of #click:
<input type="file" round class="change-profile-image" #change="onFileChange" />
See updated fiddle: https://jsfiddle.net/hrtzezk8/5/, or the proof-of-concept snippet below:
new Vue({
el: '.app',
data: {
userImage: ''
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files
if (!files.length) {
return
}
this.createImage(files[0])
},
createImage(file) {
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.userImage = e.target.result
}
reader.readAsDataURL(file)
},
removeImage: function (e) {
this.userImage = ''
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app">
<img class="profile-image" :src="userImage" />
<div v-if="!userImage">
<input type="file" round class="change-profile-image" #change="onFileChange" />
</div>
<div v-else>
<button class="delete-profile-image" color="secondary" icon="delete" #click="removeImage">Delete</button>
</div>
</div>
My vue component like this :
<template>
<div class="modal" tabindex="-1" role="dialog">
...
<div class="form-group">
<label for="change-image">Change image</label>
<input type="file" name="replace" v-on:change="changeImage">
</div>
<div class="form-group">
<label for="alt-image">Alt attr</label>
<input type="text" class="form-control" v-model="altImage">
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="mainCover"> Set Cover
</label>
</div>
<button type="button" class="btn btn-success" #click="editImageProduct">
Edit
</button>
...
</div>
</template>
<script>
export default{
...
data() { return {altImage: '', mainCover: '', imageChanged: '', image: ''}},
methods: {
editImageProduct(event) {
const payload = {alt_image: this.altImage, main_cover: this.mainCover, image_changed: this.imageChanged}
this.$store.dispatch('editImageProduct', payload)
},
changeImage(e) {
var files = e.target.files || e.dataTransfer.files
if (!files.length)
return;
this.createImage(files[0])
this.imageChanged = files[0]
},
createImage(file) {
var image = new Image()
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.image = e.target.result
};
reader.readAsDataURL(file)
},
}
}
</script>
I want to send the parameters to controller. It will go through modules, api, routes and controller
On the controller, I do like this :
public function editImage(Request $request)
{
dd($request->all());
}
When executed, the result like this :
array:5 [
"alt_image" => "test alt"
"main_cover" => true
"image_changed" => []
]
The param image_changed is empty
Whereas on the component, I do console.log, it display the result
When I do console.log(files[0]), the result like this :
How can I solve this problem?