Stuck on uploading image by formData - laravel

I have a page that user can change his picture profile, but I'm stuck when I do a submitHandle, because when I try to console.log(formData) it always gives me empty results.
this is my input file of picture profile
<input id="file-upload" type="file" name="fileUpload" class="d-none" #change="fileUpload">
<label for="file-upload">
<img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="`/dashboard/img/author/profile/`+user.avatar"alt="profile img" v-if="!imagePreview">
<img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="imagePreview" alt="profile img" v-if="imagePreview">
<span class="cross" id="remove_pro_pic">
<i class="fas fa-camera"></i>
</span>
</label>
this is the methods
fileUpload(e) {
let selectedImage = e.target.files[0];
this.imageLocation = selectedImage;
console.log(this.imageLocation.name);
let reader = new FileReader();
reader.readAsDataURL(this.imageLocation)
reader.onload = e => {
this.imagePreview = e.target.result;
}
},
and it has results like this,
But when I click the save button to save file, by formData method, it will have empty results.
This is the button update,
<div class="button-group d-flex pt-25 justify-content-start">
<button #click="submitHandle" class="btn btn-primary btn-default btn-squared text capitalize radius-md shadow2">Update details
</button>
</div>
this is the submitHandle methods,
submitHandle() {
e.preventDefault();
var formData = new FormData();
formData.append('image', this.imageLocation);
formData.append('name', this.user.name);
formData.append('username', this.user.username);
formData.append('email', this.user.email);
formData.append('phone', this.user.phone);
formData.append('gender', this.user.gender);
formData.append('birth', this.user.birth);
formData.append('bio', this.user.bio);
formData.append("facebook", this.user.facebook);
formData.append("instagram", this.user.instagram);
console.log(formData);
},
and when on console log,
it is just shown like this,
please anyone, can help me to solve this?
Thank you very much.

Logging FormData
The default toString() of FormData does not log its entries, so it only seems like the FormData is empty.
A quick way to log the entries is to wrap FormData.prototype.entries in an array:
console.log(Array.from(formData.entries()))
const formData = new FormData();
formData.append('image', 'my image');
formData.append('name', 'my name');
formData.append('username', 'my username');
formData.append('email', 'my email');
formData.append('phone', 'my phone');
formData.append('gender', 'my gender');
formData.append('birth', 'my birth');
formData.append('bio', 'my bio');
formData.append("facebook", 'my facebook');
formData.append("instagram", 'my instagram');
console.log(Array.from(formData.entries()));
Sending FormData with axios
axios.patch takes the FormData instance as its second argument:
axios.patch(apiServerUrl, formData)
Note you can easily create the FormData from the given <form> element if all its <input>s have the appropriate name attribute set, as seen in this example:
<template>
<form #submit.prevent="submitHandle">
<label>Profile Image <input type="file" name="image" autocomplete="photo" v-model="imageLocation"></label>
<label>Username <input type="text" name="username" autocomplete="username" v-model="user.username"></label>
<label>Email <input type="email" name="email" autocomplete="email" v-model="user.email"></label>
<label>Phone <input type="tel" name="phone" autocomplete="tel" v-model="user.phone"></label>
<label>Gender <input type="text" name="gender" autocomplete="sex" v-model="user.gender"></label>
<label>Birthdate <input type="date" name="birth" autocomplete="bday" v-model="user.birth"></label>
<label>Bio <textarea type="text" name="bio" v-model="user.bio"></textarea></label>
<label>Facebook <input type="text" name="facebook" v-model="user.facebook"></label>
<label>Instagram <input type="text" name="instagram" v-model="user.instagram"></label>
<button type="submit">Submit</button>
</form>
<pre>{{ response }}</pre>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
response: null,
imageLocation: null,
user: {
username: null,
email: null,
phone: null,
gender: null,
birth: null,
bio: null,
facebook: null,
instagram: null,
}
}
},
methods: {
submitHandle(e) {
const form = e.target
const formData = new FormData(form)
axios.patch('https://httpbin.org/patch', formData)
.then(resp => this.response = resp.data)
}
}
}
</script>
<style>
label {
display: block;
}
</style>
demo

Related

Image required validation using vee-validate vue

I'm new to vueJS.
I want to add a required validator in image using vee-validate.
Built-in required validador isn't working so I created a custom validator img_required.
here's what I've done so far.
.vue html part
<ValidationProvider rules="image|img_required" bail="false" v-slot="{ errors, validate }">
<div class="row row-xs mg-t-20 mx-0">
<label class="col-sm-4 form-control-label">
<span class="tx-danger">*</span> Image:
</label>
<div
#dragover.prevent
#change="validate"
#drop.prevent
class="file-wrapper col-sm-8 mg-t-10 mg-sm-t-0"
>
<div v-if="imgUrl">
<button #click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
<img style="height: 127px" :src="imgUrl" />
</div>
<input type="text" hidden v-model="imgUrl" />
<div v-if="!imgUrl" #drop="handleImage($event, 'drop')">
<input
type="file"
class="form-control"
name="file"
accept="image/*"
#change="handleImage($event, 'input'); validate()"
/>
Drop image
</div>
</div>
</div>
<div v-for="error in errors" :key="error">{{ error }}</div>
</ValidationProvider>
I can't use v-model in input type file so I created a dummy hidden input field and passed imgUrl in v-model <input type="text" hidden v-model="imgUrl" />
imgUrl gets image src from file drop or input file.
I added a close button to nullify imgUrl variable.
<button #click="imageNull" class="img-close">
<b-icon icon="x"></b-icon>
</button>
I pass this imgUrl to vee-validate extend method.
.vue script part
data() {
return {
imgUrl: ""
}
},
methods: {
handleImage(e, action) {
var file;
if (action == "input") file = e.target.files[0];
else if (action == "drop") file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = (e) => {
this.imgUrl = e.target.result;
};
reader.readAsDataURL(file);
},
imageNull() {
this.imgUrl = "";
},
}
here's validation.js file
extend('img_required', {
validate(imgUrl) {
console.log(imgUrl);
return imgUrl !== "";
},
message() {
return "Image is required!";
}
});
Here I'm checking if imgUrl is an empty base64 string or not.
And when I hit close button, imgUrl nullifies.
The issue here is when I print this imgUrl it shows event.target.files.
I'm new to vue.js. Please tell me if I'm doing something wrong
I think the problem is that you're handleImage function is not correct
Try this;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.imgUrl = reader.result;
};

File (not image) doc/pdf is not uploaded in vue and laravel

I'm trying to upload a pdf /doc file using VUE and laravel but after submitting, The file shows no value.
I have a VUE component with this form and this script:
export default {
data: function() {
return {
product_list: false,
add_form: true,
edit_form: false,
form: {
po_order_docs: '',
},
errors: {},
};
},
methods: {
processFile() {
this.file = _this.$refs.file.files[0];
let formData = new FormData();
formData.append('this.form.po_order_docs', this.file);
},
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<label class="col-lg-2 col-form-label">Order Docs</label>
<div class="col-lg-4">
<div class="input-group">
<input type="file" class="custom-file-input m-input" id="file" #change="processFile()" ref="file" />
<label class="custom-file-label" for="file">Choose file</label>
</div>
</div>

GraphQL Apollo recieving data object undefined

I am doing a mutation, that takes a username and password, and in response from the server it gets a login response.
<Mutation mutation={SIGN_UP}>
{(signUp, data) => (
<form onSubmit={e => {
e.preventDefault();
signUp({
variables: {
user: {
"email": input_email.value as String,
"password": input_password.value as String
}
}
});
console.log("Signup", signUp)
console.log("Data", data.data);
input_email.value = "";
input_password.value = "";
}}>
<div className="col-sm">
<div className="signin__header">Signup IMPACT R&D</div>
</div>
<div className="col-sm signin__input" >
<div className="signin__input__header" >Email</div>
<input className="signin__input__email" type="text" placeholder="Enter email" required ref={node=> {input_email = node}}></input>
<div className="signin__divide-line"></div>
</div>
<div className="col-sm signin__input">
<div className="signin__input__header" >Password</div>
<input className="signin__input__password" type="password" placeholder="Enter password" ref={node=> {input_password = node}}></input>
<div className="signin__divide-line"></div>
</div>
<div className="col-sm-3">
<button className="signin__input__button" type="submit">Sign Up</button>
</div>
</form>
)}
</Mutation>
This is my GraphQLtag.
export const SIGN_UP : any = gql`
mutation Register($user: UserInput!) {
register(user: $user) {
status,
refreshToken,
token,
error
}
}
`;
in the browser network i can see that I receive the data. But still my data object is null, when i try to print it out... HELP!
Found out that i needed to wait for the response with a then promise after the signup
}).then ((res: any) => {
errorMessage = res.data.register.token;
});

variable is not found inside ajax

<div class="modal-body">
<form>
<div class="form-group">
<label for="email" class="col-form-label">Email address:</label>
<input type="email" class="form-control" id="signUpEmail" name="email">
</div>
<div class="form-group">
<label for="pwd" class="col-form-label">Password:</label>
<input type="password" class="form-control" id="signUpPassword" name="password" onchange="check_pass()">
</div>
<div class="form-group">
<label for="pwd" class="col-form-label">Confirm Password:</label>
<input type="password" class="form-control" id="signUpConPassword" name="password" onchange="check_pass()">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="signUpSubmit" disabled="true" >Sign Up</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function check_pass()
{
//alert(document.getElementById('signUpPassword').value);
if (document.getElementById('signUpPassword').value ==
document.getElementById('signUpConPassword').value) {
document.getElementById('signUpSubmit').disabled = false;
}
else
{
document.getElementById('signUpSubmit').disabled = true;
}
}
$('#signUpSubmit').click(function()
{
//alert("signup completed");
var email=document.getElementById('signUpEmail');
var password = document.getElementById('signUpPassword');
$.ajax({
url: 'signup.php',
type: 'POST',
data: {
email: $email,
password: $password
},
success: function() {
alert('Email Sent');
}
});
});
</script>
This code snippet shows ReferenceError: $email is not defined when I click on the signupSubmit button although I defined the variable inside the function.
I also try
var email=document.getElementById('signUpEmail').value;
var password = document.getElementById('signUpPassword').value;
but, same error. I guess there is a problem in variable declaration. What is the correct form of variable declaration inside the function?
You have to change the $email and $password to email ,password
$.ajax({
url: 'signup.php',
type: 'POST',
data: {
email: email,
password: password
},
success: function() {
alert('Email Sent');
}
});
Remove the $
data: {
email: $email,
password: $password
},
The data being passed has two properties - "email" and "password", the values of the properties are stored in the variables email and password.
Your code should look like this:
/* Remove these two lines */
var email=document.getElementById('signUpEmail');
var password = document.getElementById('signUpPassword');
...
data: {
"email": $("#signUpEmail").val(),
"password": $("#signUpPassword").val()
}
The $ is the jQuery function call, and the "#signUpEmail" is the selector for the element with an id of "signUpEmail". The val() method will return the value of the input.
document.getElementById("something").value
is the same as
$("#something").val()
If you're using jQuery for the Ajax, you might as well use it to get the values.

How to include new component in axios response

I have an component with text input. After fill input and submit form i sand axios query and after response i need stay on the same page with error popup or include new component with response data.
my component
<template>
<div class="col-md-12">
<div class="form-container">
<form v-on:submit="prepareCollage()" class="main-form">
<div class="form-group">
<input type="hidden" name="_token" value="">
<input placeholder="your text" v-model="text" name="query" type="text" class="form-control">
</div>
<button class="go btn btn-primary">Go!</button>
</form>
</div>
</div>
</template>
<script>
export default {
data () {
return {
text : '',
}
},
methods: {
prepareCollage(){
event.preventDefault();
axios.get('/api/prepare?query='+encodeURIComponent(this.text))
.then(function(result){
const result_data = result.data;
// if controller gave an error
if(result_data.error === true){
let error_text = result_data.error_text;
if(typeof(result_data.with_link) != 'undefined' && result_data.with_link.length > 0){
error_text += "<a href='"+result_data.with_link+"'>"+result_data.link_text+"</a>";
}
Vue.swal({
title: 'Error!',
html: error_text,
type: 'error',
})
}else{
// here i need include new component
}
});
}
}
}
</script>
in "else" block i have to include new vue component with data from this component. I have never used vuejs and have difficulty with understand this.

Resources