Send form with file VueJS
up vote
0
down vote
favorite
(Non frontender here so excuse my total ignorance here)
I have a multipart form with a file selector, the form and the file should be sent to a POST endpoint in my backend.
How do I send this form "behind the scenes" so to say, without redirecting the entire browser tab to the target URL?
I've found this post: https://laracasts.com/discuss/channels/vue/submit-serialized-form-data-with-vue?page=1
But that does not address file inputs.
What would be the proper way forward?
javascript vue.js html-form
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
add a comment |
up vote
0
down vote
favorite
(Non frontender here so excuse my total ignorance here)
I have a multipart form with a file selector, the form and the file should be sent to a POST endpoint in my backend.
How do I send this form "behind the scenes" so to say, without redirecting the entire browser tab to the target URL?
I've found this post: https://laracasts.com/discuss/channels/vue/submit-serialized-form-data-with-vue?page=1
But that does not address file inputs.
What would be the proper way forward?
javascript vue.js html-form
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
(Non frontender here so excuse my total ignorance here)
I have a multipart form with a file selector, the form and the file should be sent to a POST endpoint in my backend.
How do I send this form "behind the scenes" so to say, without redirecting the entire browser tab to the target URL?
I've found this post: https://laracasts.com/discuss/channels/vue/submit-serialized-form-data-with-vue?page=1
But that does not address file inputs.
What would be the proper way forward?
javascript vue.js html-form
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
(Non frontender here so excuse my total ignorance here)
I have a multipart form with a file selector, the form and the file should be sent to a POST endpoint in my backend.
How do I send this form "behind the scenes" so to say, without redirecting the entire browser tab to the target URL?
I've found this post: https://laracasts.com/discuss/channels/vue/submit-serialized-form-data-with-vue?page=1
But that does not address file inputs.
What would be the proper way forward?
javascript vue.js html-form
javascript vue.js html-form
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
asked Nov 17 at 20:30
Roger Johansson
12.3k1465141
12.3k1465141
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
had this issue a few months ago. the problem was that the file wasn't attached to the javascript formData object and you need to do so manually before you submit formDate to the backend with whatever http-client you're using
try to create a new data property called file and then in your file input tag write
v-model="file" so it has that file
then before the post request try to attach that file property to the formData object maybe with something like that
let formData = new FormData();
formData.append('file', this.file);
It worked for me when I was trying to solve that issue and it should work with you too. if it doesn't, just let me know
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
had this issue a few months ago. the problem was that the file wasn't attached to the javascript formData object and you need to do so manually before you submit formDate to the backend with whatever http-client you're using
try to create a new data property called file and then in your file input tag write
v-model="file" so it has that file
then before the post request try to attach that file property to the formData object maybe with something like that
let formData = new FormData();
formData.append('file', this.file);
It worked for me when I was trying to solve that issue and it should work with you too. if it doesn't, just let me know
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
2
down vote
accepted
had this issue a few months ago. the problem was that the file wasn't attached to the javascript formData object and you need to do so manually before you submit formDate to the backend with whatever http-client you're using
try to create a new data property called file and then in your file input tag write
v-model="file" so it has that file
then before the post request try to attach that file property to the formData object maybe with something like that
let formData = new FormData();
formData.append('file', this.file);
It worked for me when I was trying to solve that issue and it should work with you too. if it doesn't, just let me know
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
had this issue a few months ago. the problem was that the file wasn't attached to the javascript formData object and you need to do so manually before you submit formDate to the backend with whatever http-client you're using
try to create a new data property called file and then in your file input tag write
v-model="file" so it has that file
then before the post request try to attach that file property to the formData object maybe with something like that
let formData = new FormData();
formData.append('file', this.file);
It worked for me when I was trying to solve that issue and it should work with you too. if it doesn't, just let me know
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
had this issue a few months ago. the problem was that the file wasn't attached to the javascript formData object and you need to do so manually before you submit formDate to the backend with whatever http-client you're using
try to create a new data property called file and then in your file input tag write
v-model="file" so it has that file
then before the post request try to attach that file property to the formData object maybe with something like that
let formData = new FormData();
formData.append('file', this.file);
It worked for me when I was trying to solve that issue and it should work with you too. if it doesn't, just let me know
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 17 at 21:57
Omar Emad
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Nov 17 at 21:57
Omar Emad
392
answered Nov 17 at 21:57
Omar Emad
392
392
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Omar Emad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355291%2fsend-form-with-file-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
