index.html.twig

{% extends "WebSocketClientBundle::layout.html.twig" %}

{% block content %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <div class="panel panel-default" id="panelChat" style="overflow-y: auto;">
        <div class="panel-body" >
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon" id="nickname">Anonymous</span>
            <input type="text" class="form-control" autofocus id="chat-input" style="width: 98%;">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="send-chat" style="color:#6a6e73;">Send</button>
      </span>

        </div>
    </div>

    <form id="fileForm" enctype="multipart/form-data">
        <input type="file" name="audio_message_form[file]">
        <input type="text" name="audio_message_form[chatId]">
        <button class="btn btn-download" type="submit">Send Audio</button>
    </form>

    <script>
        console.log('script');
        $(function () {
            console.log('ready');
            $('body').on('submit', '#fileForm', function (event)  {
                console.log('handler');
                event.preventDefault();
                var formData = new FormData(this);
                var self = $(this);

                $.ajax({
                    type: 'POST',
                    url: 'http://bubbles.loc/app_dev.php/api/v1/audios.json',
                    headers: {
                        "X-Auth-Token":'NDk5Y2UwZjA3YjlkM2QwNzJkOGY1Zjc5YjYwMjU4YTA4MzBkNmM1Mw',
                        "Accept":"application/x-www-form-urlencoded"
                    },
                    data: formData,
                    success: function(data) {
                        console.log(data);
                    }
                });
            });
        });

    </script>


{% endblock %}