File upload using Flask and jQuery
<p>I am having trouble writing a program for sending html form using an ajax call in jQuery.
Here is my upload.html and form.js file:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

 $('form').on('submit', function(event) {

  $.ajax({
   type : 'POST',
   url : '/uploadhc',
   data : $('#hc')
  })
  .done(function(data) {

   if (data.error) {
    $('#errorAlert').text(data.error).show();
    $('#successAlert').hide();
   }
   else {
    $('#successAlert').text(data.file).show();
    $('#errorAlert').hide();
   }

  });

  event.preventDefault();

 });

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;File Upload&lt;/title&gt;
    &lt;script type=text/javascript src="{{ url_for('static', filename='form.js') }}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Please upload all the corresponding files&lt;/h1&gt;
&lt;div id="upload"&gt;
    &lt;form id="upload-hc" &gt;
        &lt;input type="file" name="file" accept=".csv" id="hc"&gt;
        &lt;input type="submit" value="go"&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;p id="successAlert" style="display:none;"&gt;Success!&lt;/p&gt;
 &lt;p id="errorAlert" style="display:none;"&gt;Fail!&lt;/p&gt;


&lt;/div&gt;

&lt;script&gt;

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Here is my Flask server:</p>

<pre><code>import os
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)
APP_ROOT = os.path.dirname(os.path.abspath(__file__))

@app.route("/")
def index():
    return render_template("upload.html")


@app.route("/uploadhc", methods=['POST'])
def uploadhc():
    target = os.path.join(APP_ROOT, "DataSource/")


    if not os.path.isdir(target):
        os.mkdir(target)
    print request.files
    if 'file' not in request.files:
        error = "Missing data source!"
        return jsonify({'error': error})


    file = request.files['file']
    fileName = "DCData.csv"
    destination = '/'.join([target, fileName])
    file.save(destination)


    success = "Success!"
    return jsonify({'file': success})


if __name__ == "__main__":
    app.run(port=4555, debug=True)
</code></pre>

<p>When I try to select a csv file and submit the HTML form, the server says  the request.files is ImmutableMultiDict([]), which is empty. Any idea how to send the file to my server? Thanks!</p>