title: why is $(this).data('mycontrol') undefined?
body: <p>Unfortunately my front end skills are lacking as my role puts me more on the server side / db technologies as opposed to css / js.  In any event, I am trying to implement this:</p>
  
  <p><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net" rel="nofollow noreferrer">https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net</a>.</p>
  
  <p>And more specifically I was able to find an asp.net example here:</p>
  
  <p><a href="http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/" rel="nofollow noreferrer">http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/</a></p>
  
  <p>Basically allowing you to do mass image uploads.
  I've set up the front end with the correct css and js files.  I had to modify some of the js files to make use of <code>on()</code> instead of <code>live()</code> as <a href="http://api.jquery.com/live/" rel="nofollow noreferrer">live is deprecated</a>.  My form loads and looks like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/HhTzU.jpg" alt="enter image description here"></p>
  
  <p>So far so good, however, as soon as I "Add file" or drag and drop a file chrome developer tools tells me the following:</p>
  
  <p><code>Uncaught TypeError: Cannot read property '_adjustMaxNumberOfFiles' of undefined</code> </p>
  
  <p>It specifies the file as <code>jquery.fileupload-ui.js</code> and more specifically points me to this:</p>
  
  <pre><code>var that = $(this).data('fileupload');
  that._adjustMaxNumberOfFiles(-data.files.length);
  </code></pre>
  
  <p>I <code>alert</code>ed <code>that</code> and of course it seems to be undefined...But I don't know enough jquery to understand why it is undefined.  My fileupload div markup was as follows:</p>
  
  <pre><code>   &lt;div id="fileupload"&gt;
                           &lt;form action="/Handler.ashx" method="POST" enctype="multipart/form-data"&gt;
                              &lt;div class="fileupload-buttonbar"&gt;
                                  &lt;label class="fileinput-button"&gt;
                                      &lt;span&gt;Add files...&lt;/span&gt;
                                      &lt;input id="file" type="file" name="files[]" multiple&gt;
                                  &lt;/label&gt;
                                  &lt;button type="submit" class="start"&gt;Start upload&lt;/button&gt;
                                  &lt;button type="reset" class="cancel"&gt;Cancel upload&lt;/button&gt;
                                  &lt;button type="button" class="delete"&gt;Delete files&lt;/button&gt;
                              &lt;/div&gt;
                             &lt;/form&gt;
                              &lt;div class="fileupload-content"&gt;
                                  &lt;table class="files"&gt;&lt;/table&gt;
                                  &lt;div class="fileupload-progressbar"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>So what could be causing this to be undefined?  This is what <code>_adjustMaxNumberOfFiles</code> does</p>
  
  <pre><code>  _adjustMaxNumberOfFiles: function (operand) {
              if (typeof this.options.maxNumberOfFiles === 'number') {
                  this.options.maxNumberOfFiles += operand;
                  if (this.options.maxNumberOfFiles &lt; 1) {
                      this._disableFileInputButton();
                  } else {
                      this._enableFileInputButton();
                  }
              }
          },
  </code></pre>
  
  <p><strong>I'm using jquery 2.0.3 and jquery ui 1.10.3</strong></p>
  
  <h2>Update</h2>
  
  <p>I've gotten it down to the point that the example link which I posted (2nd link above) the only difference is the version of jquery they are using, appears to be 1.8.2 and I am using 2.0.3.  The difference and problem is this piece of code:</p>
  
  <p><code>var that =  $(this).data('fileupload');</code></p>
  
  <p>In the example download this returns some strange object:</p>
  
  <p><code>a.(anonymous function).(anonymous function) {element: e.fn.e.init[1], options: Object, _sequence: Object, _total: 0, _loaded: 0…}</code></p>
  
  <p>In my version (using 2.0.3) I am getting undefined for this:</p>
  
  <p><code>var that =  $(this).data('fileupload');</code></p>
  
  <p>Is there another way I can do this one line of code?</p>