Mixing
File upload returns undefined [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This question already has an answer here:
Uploading both data and files in one form using Ajax?
8 answers
Firstly, I am a novice web developer working with JavaScript.
I am trying to set up a form where a user can add an image of themselves for their profile. However, when testing the code and selecting an image the value returned is undefined. For some reason it is not acknowledging the selected file.
Here is my code:
HTML
<form id="pic_form" action="#" class="wizard-big" enctype="multipart/form-data">
<h1 style="font-size:0.9vw">Image</h1>
<fieldset>
<div class="row">
<div class="col-xs-12">
<img style="height:30%; width:30%" src="img/default_pic.jpg">
<br/><br/>
<div class="form-group">
<label style="font-size:0.8vw">Change Image</label>
<input id="PlayerPic" name="PlayerPic" type="file" class="form-control" style="font-size:0.7vw; height:10%">
</div>
<div class="form-group" style="visibility: hidden">
<label>Player ID</label>
<input id="PlayerID" name="PlayerID" type="text" class="form-control" readonly>
</div>
</div>
</div>
</fieldset>
</form>
JavaScript(Client side)
$.post( "/player_pic", $("#pic_form").serialize(),
JavaScript(Server side)
app.post('/player_pic', function(req, res) {
console.log('Adding player picture...........................');
console.log('Pic = ' + req.body.PlayerPic);
console.log('ID = ' + req.body.PlayerID);
});
These are the results that I'm getting:
Adding player picture...........................
Pic = undefined
ID = 1532947080817
I have looked around and can't find a solution as to why when I select an image from a local folder in the form, it's being returned as undefined.
Any help would be very much appreciated here :)
Thanks
javascript jquery html node.js forms
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
marked as duplicate by Quentin forms
Users with the forms badge can single-handedly close forms questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 4 at 10:41
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 8 more comments
This question already has an answer here:
Uploading both data and files in one form using Ajax?
8 answers
Firstly, I am a novice web developer working with JavaScript.
I am trying to set up a form where a user can add an image of themselves for their profile. However, when testing the code and selecting an image the value returned is undefined. For some reason it is not acknowledging the selected file.
Here is my code:
HTML
<form id="pic_form" action="#" class="wizard-big" enctype="multipart/form-data">
<h1 style="font-size:0.9vw">Image</h1>
<fieldset>
<div class="row">
<div class="col-xs-12">
<img style="height:30%; width:30%" src="img/default_pic.jpg">
<br/><br/>
<div class="form-group">
<label style="font-size:0.8vw">Change Image</label>
<input id="PlayerPic" name="PlayerPic" type="file" class="form-control" style="font-size:0.7vw; height:10%">
</div>
<div class="form-group" style="visibility: hidden">
<label>Player ID</label>
<input id="PlayerID" name="PlayerID" type="text" class="form-control" readonly>
</div>
</div>
</div>
</fieldset>
</form>
JavaScript(Client side)
$.post( "/player_pic", $("#pic_form").serialize(),
JavaScript(Server side)
app.post('/player_pic', function(req, res) {
console.log('Adding player picture...........................');
console.log('Pic = ' + req.body.PlayerPic);
console.log('ID = ' + req.body.PlayerID);
});
These are the results that I'm getting:
Adding player picture...........................
Pic = undefined
ID = 1532947080817
I have looked around and can't find a solution as to why when I select an image from a local folder in the form, it's being returned as undefined.
Any help would be very much appreciated here :)
Thanks
javascript jquery html node.js forms
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
marked as duplicate by Quentin forms
Users with the forms badge can single-handedly close forms questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 4 at 10:41
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you sending the correctcontent-type? If you want to send files/filedata you need to setcontent-typetomultipart/form-data. See stackoverflow.com/questions/4526273/… for more information.
– BRO_THOM
Jan 3 at 14:55
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
@AlexMorrison can you check what's inside the$("#pic_form").serialize()before you post it? Maybe your file input isn't included in the serialize?
– BRO_THOM
Jan 3 at 15:02
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:console.log($("#pic_form").serialize());
– BRO_THOM
Jan 3 at 15:19
|
show 8 more comments
This question already has an answer here:
Uploading both data and files in one form using Ajax?
8 answers
Firstly, I am a novice web developer working with JavaScript.
I am trying to set up a form where a user can add an image of themselves for their profile. However, when testing the code and selecting an image the value returned is undefined. For some reason it is not acknowledging the selected file.
Here is my code:
HTML
<form id="pic_form" action="#" class="wizard-big" enctype="multipart/form-data">
<h1 style="font-size:0.9vw">Image</h1>
<fieldset>
<div class="row">
<div class="col-xs-12">
<img style="height:30%; width:30%" src="img/default_pic.jpg">
<br/><br/>
<div class="form-group">
<label style="font-size:0.8vw">Change Image</label>
<input id="PlayerPic" name="PlayerPic" type="file" class="form-control" style="font-size:0.7vw; height:10%">
</div>
<div class="form-group" style="visibility: hidden">
<label>Player ID</label>
<input id="PlayerID" name="PlayerID" type="text" class="form-control" readonly>
</div>
</div>
</div>
</fieldset>
</form>
JavaScript(Client side)
$.post( "/player_pic", $("#pic_form").serialize(),
JavaScript(Server side)
app.post('/player_pic', function(req, res) {
console.log('Adding player picture...........................');
console.log('Pic = ' + req.body.PlayerPic);
console.log('ID = ' + req.body.PlayerID);
});
These are the results that I'm getting:
Adding player picture...........................
Pic = undefined
ID = 1532947080817
I have looked around and can't find a solution as to why when I select an image from a local folder in the form, it's being returned as undefined.
Any help would be very much appreciated here :)
Thanks
javascript jquery html node.js forms
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
This question already has an answer here:
Uploading both data and files in one form using Ajax?
8 answers
Firstly, I am a novice web developer working with JavaScript.
I am trying to set up a form where a user can add an image of themselves for their profile. However, when testing the code and selecting an image the value returned is undefined. For some reason it is not acknowledging the selected file.
Here is my code:
HTML
<form id="pic_form" action="#" class="wizard-big" enctype="multipart/form-data">
<h1 style="font-size:0.9vw">Image</h1>
<fieldset>
<div class="row">
<div class="col-xs-12">
<img style="height:30%; width:30%" src="img/default_pic.jpg">
<br/><br/>
<div class="form-group">
<label style="font-size:0.8vw">Change Image</label>
<input id="PlayerPic" name="PlayerPic" type="file" class="form-control" style="font-size:0.7vw; height:10%">
</div>
<div class="form-group" style="visibility: hidden">
<label>Player ID</label>
<input id="PlayerID" name="PlayerID" type="text" class="form-control" readonly>
</div>
</div>
</div>
</fieldset>
</form>
JavaScript(Client side)
$.post( "/player_pic", $("#pic_form").serialize(),
JavaScript(Server side)
app.post('/player_pic', function(req, res) {
console.log('Adding player picture...........................');
console.log('Pic = ' + req.body.PlayerPic);
console.log('ID = ' + req.body.PlayerID);
});
These are the results that I'm getting:
Adding player picture...........................
Pic = undefined
ID = 1532947080817
I have looked around and can't find a solution as to why when I select an image from a local folder in the form, it's being returned as undefined.
Any help would be very much appreciated here :)
Thanks
This question already has an answer here:
Uploading both data and files in one form using Ajax?
8 answers
javascript jquery html node.js forms
javascript jquery html node.js forms
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
edited Jan 18 at 14:11
Alex Morrison
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
asked Jan 3 at 14:53
Alex MorrisonAlex Morrison
2616
2616
marked as duplicate by Quentin forms
Users with the forms badge can single-handedly close forms questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 4 at 10:41
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Quentin forms
Users with the forms badge can single-handedly close forms questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 4 at 10:41
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you sending the correctcontent-type? If you want to send files/filedata you need to setcontent-typetomultipart/form-data. See stackoverflow.com/questions/4526273/… for more information.
– BRO_THOM
Jan 3 at 14:55
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
@AlexMorrison can you check what's inside the$("#pic_form").serialize()before you post it? Maybe your file input isn't included in the serialize?
– BRO_THOM
Jan 3 at 15:02
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:console.log($("#pic_form").serialize());
– BRO_THOM
Jan 3 at 15:19
|
show 8 more comments
1
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you sending the correctcontent-type? If you want to send files/filedata you need to setcontent-typetomultipart/form-data. See stackoverflow.com/questions/4526273/… for more information.
– BRO_THOM
Jan 3 at 14:55
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
@AlexMorrison can you check what's inside the$("#pic_form").serialize()before you post it? Maybe your file input isn't included in the serialize?
– BRO_THOM
Jan 3 at 15:02
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:console.log($("#pic_form").serialize());
– BRO_THOM
Jan 3 at 15:19
1
1
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you sending the correct
content-type? If you want to send files/filedata you need to set content-type to multipart/form-data. See stackoverflow.com/questions/4526273/… for more information.– BRO_THOM
Jan 3 at 14:55
Are you sending the correct
content-type? If you want to send files/filedata you need to set content-type to multipart/form-data. See stackoverflow.com/questions/4526273/… for more information.– BRO_THOM
Jan 3 at 14:55
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
@AlexMorrison can you check what's inside the
$("#pic_form").serialize() before you post it? Maybe your file input isn't included in the serialize?– BRO_THOM
Jan 3 at 15:02
@AlexMorrison can you check what's inside the
$("#pic_form").serialize() before you post it? Maybe your file input isn't included in the serialize?– BRO_THOM
Jan 3 at 15:02
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:
console.log($("#pic_form").serialize());– BRO_THOM
Jan 3 at 15:19
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:
console.log($("#pic_form").serialize());– BRO_THOM
Jan 3 at 15:19
|
show 8 more comments
1 Answer
1
active
oldest
votes
I suppose you need to use multipart/form-data header for file transfer
const fileData = $('#sortpicture').prop('files')[0];
const formData = new FormData();
form_data.append('file', fileData);
$.ajax({
type: 'POST',
url: '/player_pic',
data: formData,
contentType: 'multipart/form-data',
success: function(php_script_response){
console.log(php_script_response);
}
})
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
contentType: 'multipart/form-data'— That won't work, the boundary parameter is missing.
– Quentin
Jan 4 at 10:43
php_script_response— The OP is using JavaScript on the server.
– Quentin
Jan 4 at 10:43
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I suppose you need to use multipart/form-data header for file transfer
const fileData = $('#sortpicture').prop('files')[0];
const formData = new FormData();
form_data.append('file', fileData);
$.ajax({
type: 'POST',
url: '/player_pic',
data: formData,
contentType: 'multipart/form-data',
success: function(php_script_response){
console.log(php_script_response);
}
})
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
contentType: 'multipart/form-data'— That won't work, the boundary parameter is missing.
– Quentin
Jan 4 at 10:43
php_script_response— The OP is using JavaScript on the server.
– Quentin
Jan 4 at 10:43
add a comment |
I suppose you need to use multipart/form-data header for file transfer
const fileData = $('#sortpicture').prop('files')[0];
const formData = new FormData();
form_data.append('file', fileData);
$.ajax({
type: 'POST',
url: '/player_pic',
data: formData,
contentType: 'multipart/form-data',
success: function(php_script_response){
console.log(php_script_response);
}
})
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
contentType: 'multipart/form-data'— That won't work, the boundary parameter is missing.
– Quentin
Jan 4 at 10:43
php_script_response— The OP is using JavaScript on the server.
– Quentin
Jan 4 at 10:43
add a comment |
I suppose you need to use multipart/form-data header for file transfer
const fileData = $('#sortpicture').prop('files')[0];
const formData = new FormData();
form_data.append('file', fileData);
$.ajax({
type: 'POST',
url: '/player_pic',
data: formData,
contentType: 'multipart/form-data',
success: function(php_script_response){
console.log(php_script_response);
}
})
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
I suppose you need to use multipart/form-data header for file transfer
const fileData = $('#sortpicture').prop('files')[0];
const formData = new FormData();
form_data.append('file', fileData);
$.ajax({
type: 'POST',
url: '/player_pic',
data: formData,
contentType: 'multipart/form-data',
success: function(php_script_response){
console.log(php_script_response);
}
})
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
edited Jan 3 at 15:05
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
answered Jan 3 at 15:00
Nick OvchinnikovNick Ovchinnikov
10713
10713
contentType: 'multipart/form-data'— That won't work, the boundary parameter is missing.
– Quentin
Jan 4 at 10:43
php_script_response— The OP is using JavaScript on the server.
– Quentin
Jan 4 at 10:43
add a comment |
contentType: 'multipart/form-data'— That won't work, the boundary parameter is missing.
– Quentin
Jan 4 at 10:43
php_script_response— The OP is using JavaScript on the server.
– Quentin
Jan 4 at 10:43
contentType: 'multipart/form-data' — That won't work, the boundary parameter is missing.– Quentin
Jan 4 at 10:43
contentType: 'multipart/form-data' — That won't work, the boundary parameter is missing.– Quentin
Jan 4 at 10:43
php_script_response — The OP is using JavaScript on the server.– Quentin
Jan 4 at 10:43
php_script_response — The OP is using JavaScript on the server.– Quentin
Jan 4 at 10:43
add a comment |
1
Are you including enctype="multipart/form-data" in the opening <form> tag?
– Chris
Jan 3 at 14:55
Are you sending the correct
content-type? If you want to send files/filedata you need to setcontent-typetomultipart/form-data. See stackoverflow.com/questions/4526273/… for more information.– BRO_THOM
Jan 3 at 14:55
I hadn't so thank you for flagging that up for me, however I'm still getting the same results
– Alex Morrison
Jan 3 at 15:00
@AlexMorrison can you check what's inside the
$("#pic_form").serialize()before you post it? Maybe your file input isn't included in the serialize?– BRO_THOM
Jan 3 at 15:02
@AlexMorrison you can simple log the serialized data and see if it contains your file like such:
console.log($("#pic_form").serialize());– BRO_THOM
Jan 3 at 15:19