My last few days have been spent on a lovely security feature of Internet Explorer, which manifests as an ambiguous “SCRIPT5: Access is denied” message. After some digging, and with some lucky previous experience, I figured out how to get around this.

Cause?

IE sees you take some jQuery (or plain javascript) and do something like $('input:file').click(); and starts to get suspicious. But on the FreshAiR Editor we did this with no nefarious intent; we needed to check some things before file selection and get ready to crop the user’s image once they selected one. When we later called $('form').submit(); everything would load into a same-domain iframe to be ready to send, and then… Access is denied.

Workaround time.

How to solve this? There are Adobe Flash and myriad other uploaders, but I remember implementing an open-source AJAX photo uploader-with-progress-bar in LunchTable a while ago, called qqFileUploader (now, it appears, called Fine Uploader). It was pure HTML/JavaScript/CSS, so I took a peek at how it was done, and came up with this result:

  • Using input buttons with this structure (optionally substituting “Upload Here” for an image):
<div class="button">
    Upload Here
    <input type="file" name="media" />
</div>
  • And styling the transparent file input on top of the text / image to make it clickable:
.button {
    position: relative;
    overflow: hidden;
}
.button input[type=file] {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 118px;
    margin: 0px;
    padding: 0px;
    opacity: 0;
    z-index: 1; /* In case you use an img for input button */
}
/* For effect emphasis... */
.button:hover {
    background-color: blue;
    color: white;
}

You have a customizable, clickable file input that won’t upset Internet Explorer. See the full result on jsFiddle.

$ logout

Advertisements