-1

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

Alex Morrison
  • 167
  • 5
  • 13
  • 1
    Are you including enctype="multipart/form-data" in the opening
    tag?
     – Chris Jan 03 '19 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 https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean for more information. – BRO_THOM Jan 03 '19 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 03 '19 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 03 '19 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 03 '19 at 15:19
  • @BRO_THOM is it possible to access the ID of the form in the server side JavaScript like that? – Alex Morrison Jan 03 '19 at 16:09
  • No, when a form is submitted, all of it's inputs are sent. This is why you can only send one form at a time, and why a form cannot contain a form. If you use var_dump($_POST) you should find all your submitted variables – BRO_THOM Jan 03 '19 at 16:27
  • @BRO_THOM var_dump($_POST) is something I wasn't familiar with so I have done some research into it and am I right in concluding that it is PHP? If so, I have no experience with PHP, just JavaScript! – Alex Morrison Jan 04 '19 at 09:55
  • @Quentin I'm not sure how my question of why it's returning undefined is answered in the duplicate question? – Alex Morrison Jan 04 '19 at 10:53
  • @AlexMorrison — The file is undefined when you look at the request because you aren't sending the file in the request. The duplicate tells you how to send the file in the request. – Quentin Jan 04 '19 at 10:55
  • @BRO_THOM — `serialize()` doesn't support file inputs (and the form isn't being submitted, the Ajax request is being used instead). – Quentin Jan 04 '19 at 11:00
  • @Quentin I have used both the long and short version of the accepted answer of that question and I'm still having no luck – Alex Morrison Jan 04 '19 at 12:09
  • @AlexMorrison — You might have *additional* problems (like a `body-parser` that can't handle the data format), but the duplicate covers the problem that you definitely have (and which is certainly the *first* problem you have). You might also have implemented the answers from the duplicate incorrectly, but we can't see your attempts. – Quentin Jan 04 '19 at 12:12

1 Answers1

-1

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);
    }
})
Nick Ovchinnikov
  • 433
  • 4
  • 5