title: Spring Ajax File Upload Cannot Find Function
body: <p>I am getting this errors on Chrome. It can't find the function when called to upload a file to Spring MVC using Angular and Ajax.</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: uploadFile is not defined(…)</p>
  </blockquote>
  
  <pre><code>&lt;form id="upload-file-form"&gt;
      &lt;label for="upload-file-input"&gt;Upload your file:&lt;/label&gt;
      &lt;input id="upload-file-input" type="file" name="uploadfile" accept="*" /&gt;
      &lt;button value="Submit" onclick="uploadFile()" &gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
    // bind the on-change event
    $(document).ready(function() {
    $("#upload-file-input").on("change", uploadFile);
  });
  
  /**
   * Upload the file sending it via Ajax at the Spring Boot server.
   */
  function uploadFile() {
    $.ajax({
      url: "/uploadFile",
      type: "POST",
      data: new FormData($("#upload-file-form")[0]),
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      cache: false,
      success: function () {
        // Handle upload success
        // ...
      },
      error: function () {
        // Handle upload error
        // ...
      }
    });
  } // function
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my <strong>Controller</strong> on Spring</p>
  
  <pre><code>@Controller
  public class uploadFile {
  
  
  // The Environment object will be used to read parameters from the
  // application.properties configuration file
  
  //@Autowired
  //private Environment env;
  
  /**
   * Show the index page containing the form for uploading a file.
   */
  @RequestMapping("/")
  public String index() {
      return "index.html";
  }
  
  /**
   * POST /uploadFile -&gt; receive and locally save a file.
   *
   * @param uploadfile The uploaded file as Multipart file parameter in the
   * HTTP request. The RequestParam name must be the same of the attribute
   * "name" in the input tag with type file.
   *
   * @return An http OK status in case of success, an http 4xx status in case
   * of errors.
   */
  @RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
  @ResponseBody
  public ResponseEntity&lt;?&gt; uploadFile(
          @RequestParam("uploadfile") MultipartFile uploadfile) {
  
      try {
          // Get the filename and build the local file path
          String filename = uploadfile.getOriginalFilename();
          String filepath = Paths.get("/src/main/resources", filename).toString();
  
          // Save the file locally
          BufferedOutputStream stream =
                  new BufferedOutputStream(new FileOutputStream(new File(filepath)));
          stream.write(uploadfile.getBytes());
          stream.close();
      }
      catch (Exception e) {
          System.out.println(e.getMessage());
          return new ResponseEntity&lt;&gt;(HttpStatus.BAD_REQUEST);
      }
  
      return new ResponseEntity&lt;&gt;(HttpStatus.OK);
  } // method uploadFile
  
  } // class MainController
  </code></pre>