title: SecurityError: The operation is insecure.when using AjaxUpload library
body: <p>I'm using Valums AjaxUpload library for uploading images, and all of a sudden I'm getting <strong>SecurityError: The operation is insecure.</strong> errors. Nothing's changed apart from a bit of html, (I've added value attributes to text inputs and a src to an img tag).</p>
  
  <p>I've seen a few answers <a href="https://stackoverflow.com/questions/16275104/new-file-the-operation-is-insecure">this</a> and  <a href="https://stackoverflow.com/questions/14878406/how-to-prevent-operation-is-insecure-warning-when-dynamically-inserting-javasc">this</a> but I'm not sure these apply as this was working before, and now it isn't. I'm uploading files from the same directory I always have been.</p>
  
  <p>Has anyone else had the issue with this warning randomly starting to appear? The domain the script is running on doesn't use SSL so I can see any reason this error would be a http/https thing, especially since none of the JS code has changed.</p>
  
  <p>EDIT: The error seems to get thrown on this line </p>
  
  <pre><code>$('input[name=image]').val(response.data.url);
  </code></pre>
  
  <p>I'll do some digging see if I can figure out why</p>
  
  <p>Here's the JS for my upload function</p>
  
  <pre><code>new AjaxUpload( $('#imageUpload'),{
  
       action: '/sivactivities/ajax/upload',
       name: 'image',
       data: {
             'itemId' : DataBridge.itemId
       },
  
       onSubmit : function(file, ext){
                   // If you want to allow uploading only 1 file at time,
           // you can disable upload button
           this.disable();
  
  
       },
       onComplete: function(file, response){
  
           // enable upload button
          this.enable();
  
          response = SIV.decode(response);
          console.log(response);
          DataBridge.imageHeight = response.data.height;
          DataBridge.imageWidth = response.data.width;
          DataBridge.thumbSrc = response.data.url;
          $('#image-upload-load').hide();
          $('input[name=image]').val(response.data.url);
          $('#uploadedImg').attr('src', response.data.url);
       }
  }); 
  </code></pre>
  
  <p>And the HTML</p>
  
  <pre><code>&lt;div class="formKey"&gt;Image&lt;/div&gt;
  &lt;div class="formVal"&gt;
      &lt;p&gt;Please make sure this image is 246 x 164&lt;/p&gt;
      &lt;div style="display:inline-block; width:150px;float:left;"&gt;
          &lt;div class="upload-button"&gt;&lt;a class="smaller-button imageUpload" id="imageUpload" href="#"/&gt;&lt;span&gt;&lt;/span&gt;BROWSE&lt;/a&gt;&lt;/div&gt;
          &lt;div style="height: 75px;" id="divFileProgressContainer"&gt;&lt;/div&gt;
          &lt;div class="form-loading hide" id="item-upload-load"&gt;
              &lt;img src="/open/img/loading-indicator.gif" alt="loading"/&gt;
              &lt;input type="hidden" name="image" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div style="display:inline-block; width:300px;"&gt;
          &lt;img id="uploadedImg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>