1

I'm using Valums AjaxUpload library for uploading images, and all of a sudden I'm getting SecurityError: The operation is insecure. 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).

I've seen a few answers this and this 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.

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.

EDIT: The error seems to get thrown on this line 

$('input[name=image]').val(response.data.url);

I'll do some digging see if I can figure out why

Here's the JS for my upload function

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);
     }
});

And the HTML

<div class="formKey">Image</div>
<div class="formVal">
    <p>Please make sure this image is 246 x 164</p>
    <div style="display:inline-block; width:150px;float:left;">
        <div class="upload-button"><a class="smaller-button imageUpload" id="imageUpload" href="#"/><span></span>BROWSE</a></div>
        <div style="height: 75px;" id="divFileProgressContainer"></div>
        <div class="form-loading hide" id="item-upload-load">
            <img src="/open/img/loading-indicator.gif" alt="loading"/>
            <input type="hidden" name="image" />
        </div>
    </div>

    <div style="display:inline-block; width:300px;">
        <img id="uploadedImg" />
    </div>
</div>
Community
  • 1
  • 1
TMH
  • 6,096
  • 7
  • 51
  • 88

1 Answers1

1

After some further debugging it turns out I was trying to update the value of the file input, rather than the image (both elements had ID image).

This answer made me check the ID's and ultimately solved my problem.

Community
  • 1
  • 1
TMH
  • 6,096
  • 7
  • 51
  • 88