title: JQuery Ajax Upload File - Selectors not working in Mozilla
body: <p>I have created an ajax upload file and i am have some simple problems, I have callbacks that allow you to check the file size, file format, progress, when the upload finished and starts. Now the problem lies when the file has finished. When the upload starts the Ajax gif image loader displays to $(xxx).show() then the obvious is when the upload finishes i want the Ajax gif image loader to hide $(xxx).hide() but in Mozilla the selectors are not working to hide the Ajax gif image loaders but works in IE, very strange. The code below is the full source in JQuery Ajax Upload using a .NET module to handle the upload requests.</p>
  
  <h2>MODULE</h2>
  
  <pre><code>Imports System.Web.UI.WebControls
  Imports System.Web.UI
  Imports System.Web
  Imports System.Web.UI.HtmlControls
  Imports API.HTML.Controls
  Imports System.IO
  
  Public Class JQueryFileUploadModule
  Implements IHttpModule
  
  
  Public Sub Dispose() Implements System.Web.IHttpModule.Dispose
  
  End Sub
  
  Public Sub Init(ByVal context As System.Web.HttpApplication) Implements System.Web.IHttpModule.Init
  
      AddHandler context.BeginRequest, AddressOf OnBeginRequest
  
  End Sub
  
  Public Sub OnBeginRequest(ByVal sender As Object, ByVal e As EventArgs)
  
      Dim httpApplication As HttpApplication = CType(sender, HttpApplication)
      Dim contextPage As HttpContext = CType(sender, HttpApplication).Context
  
      If contextPage.Request.QueryString("request") IsNot Nothing Then
          If contextPage.Request.QueryString("request") = "getfilesize" Then
  
              Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
              Dim count As Integer = 0
  
              If contextPage.Request.Files.Count &gt; 0 AndAlso contextPage.Request.Files(0).FileName &lt;&gt; "" Then
  
                  Dim httpPostedFile As HttpPostedFile = contextPage.Request.Files(0)
                  Dim contentLength As String = httpPostedFile.ContentLength.ToString
  
                  contentLength = CInt(contentLength) / 1024
  
                  Dim javascript As String = String.Empty
                  javascript += "$(document).ready(function() {" &amp; Environment.NewLine
                  javascript += String.Format("  window.parent.$.fn.fileUpload.GetFileSize('{0}');", contentLength) &amp; Environment.NewLine
                  javascript += "});" &amp; Environment.NewLine
  
                  contextPage.Response.Clear()
                  contextPage.Response.Write(String.Format("&lt;html&gt;&lt;head&gt;&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;{0}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;", javascript, contentLength))
                  contextPage.Response.End()
              End If
          ElseIf contextPage.Request.QueryString("request") = "savefile" Then
  
              Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
              Dim savePath As String = contextPage.Request.QueryString("savePath")
  
              Dim httpPostedFile As HttpPostedFile = contextPage.Request.Files(0)
              Dim contentLength As String = httpPostedFile.ContentLength.ToString
  
              Dim folderPath As String = System.Web.HttpContext.Current.Server.MapPath(savePath &amp; "/")
              Dim directory As New DirectoryInfo(folderPath)
              If Not directory.Exists Then
                  directory.Create()
              End If
  
              Dim remotePath As New FileInfo(folderPath &amp; "/" &amp; fileNameQuesryString)
  
              Dim os As New System.IO.FileStream(remotePath.FullName, IO.FileMode.Create)
  
              Dim inputStream As System.IO.Stream = HttpPostedFile.InputStream
  
              Dim length = HttpPostedFile.ContentLength
  
              Dim b(1) As Byte
              Dim bb As Byte
              While length &gt; 0 AndAlso inputStream.Read(b, 0, b.Length) &gt; -1
  
                  os.Write(b, 0, b.Length)
  
                  length -= b.Length
  
              End While
              os.Close()
              os.Dispose()
          ElseIf contextPage.Request.QueryString("request") = "fileprogress" Then
  
              Dim fileNameQuesryString As String = contextPage.Request.QueryString("file")
              Dim savePath As String = contextPage.Request.QueryString("savePath")
  
              Dim remotePath As New FileInfo(System.Web.HttpContext.Current.Server.MapPath(savePath &amp; "/" &amp; fileNameQuesryString))
  
              Dim fileSizeDone As Integer = 0
              If remotePath.Exists Then
                  fileSizeDone = remotePath.Length
              Else
  
              End If
  
              Dim javascript As String = String.Empty
              javascript += "$(document).ready(function() {" &amp; Environment.NewLine
              javascript += String.Format("  window.parent.$.fn.fileUpload.SavingFile({0});", fileSizeDone / 1024) &amp; Environment.NewLine
              javascript += "});" &amp; Environment.NewLine
  
              contextPage.Response.Clear()
              contextPage.Response.Write(String.Format("&lt;html&gt;&lt;head&gt;&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;{0}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;", javascript))
              contextPage.Response.End()
  
          End If
      End If
  
  End Sub
  
  End Class
  </code></pre>
  
  <h2>JQUERY PLUGIN AjAX UPLOAD</h2>
  
  <pre><code>(function($) {
  
  $.fn.fileUpload = function(settings) {
  
      var def = {
          fileSizeLimit: 2048,
          fileExtAllowed: '',
          iframe: null,
          fileFormatCheck: function() { },
          fileSizeError: function() { },
          fileProgress: function() { },
          finish: function() { },
          start: function() { },
          savePath: '/'
      }
  
      var container = this;
      var fileInputName = '';
      var fileInputExt = '';
      var fileLength = 0;
      var formAction = $("form").attr("action");
  
      settings = $.extend(def, settings);
  
      iframe = $("&lt;iframe id='fileupload' name='fileupload'/&gt;");
      $(iframe).css("display", "none");
  
      $(iframe).insertAfter(this);
  
      iframe2 = $("&lt;iframe id='fileupload2' name='fileupload2'/&gt;");
      $(iframe2).css("display", "none");
  
      $(iframe2).insertAfter(this);
  
      var SubmitFormForFielSizeRequest = function(text) {
  
          $("form").attr("enctype", "multipart/form-data");
          $("form").attr("target", 'fileupload');
  
          if (GetWindowURL().indexOf("?") != -1) {
              $("form").attr("action", GetWindowURL() + '&amp;request=getfilesize&amp;file=' + text)
          }
          else {
              $("form").attr("action", GetWindowURL() + '?request=getfilesize&amp;file=' + text)
          }
  
          $("form").submit();
  
      };
  
      var SubmitFormForFileSaveProcess = function(text) {
  
          $("form").attr("enctype", "multipart/form-data");
          $("form").attr("target", 'fileupload');
  
          if (GetWindowURL().indexOf("?") != -1) {
              $("form").attr("action", GetWindowURL() + '&amp;request=savefile&amp;file=' + text + '&amp;savepath=' + settings.savePath)
          }
          else {
              $("form").attr("action", GetWindowURL() + '?request=savefile&amp;file=' + text + '&amp;savepath=' + settings.savePath)
          }
          $("form").submit();
  
      };
  
      var SubmitFormForFileProgressCheck = function(text) {
  
          $("form").attr("enctype", "multipart/form-data");
          $("form").attr("target", 'fileupload2');
  
          if (GetWindowURL().indexOf("?") != -1) {
              $("form").attr("action", GetWindowURL() + '&amp;request=fileprogress&amp;file=' + text + '&amp;savepath=' + settings.savePath)
          }
          else {
              $("form").attr("action", GetWindowURL() + '?request=fileprogress&amp;file=' + text + '&amp;savepath=' + settings.savePath)
          }
          $("form").submit();
  
      };
  
      var GetWindowURL = function() {
  
          return window.location.href;
  
      };
  
      var GetFileName = function() {
  
          var text = $(container).attr("value");
          var fileName = '';
  
          var splitText = text.split("\\");
  
          if (splitText.length &gt; 1) {
              fileName = splitText[splitText.length - 1];
          }
          else {
              fileName = text;
          }
  
          return fileName;
  
      };
  
      var GetFileExt = function() {
  
          var fileExtSplit = GetFileName().split(".");
          var fileExt = fileExtSplit[fileExtSplit.length - 1];
  
          return fileExt;
  
      };
  
      $(this).change(function() {
  
          if (settings.fileExtAllowed != GetFileExt()) {
              settings.fileFormatCheck.call(this, GetFileExt());
          }
          else {
  
              SubmitFormForFielSizeRequest(GetFileName());
          }
  
  
      });
  
      $.fn.fileUpload.GetFileSize = function(size) {
  
          if (size &gt; settings.fileSizeLimit) {
  
              $("form").attr("action", formAction);
              settings.fileSizeError.call(this, size);
  
          }
          else {
              fileLength = size;
              SubmitFormForFileSaveProcess(GetFileName());
              settings.start.call(this, GetFileName());
              setTimeout(function() { $.fn.fileUpload.SavingFile(0); }, 2000);
          }
  
      }
  
      $.fn.fileUpload.SavingFile = function(progress) {
  
          var len = parseInt(fileLength).toFixed(0);
          var prog = parseInt(progress).toFixed(0);
          if (len &lt;= prog) {
              $("form").attr("enctype", "");
              $("form").attr("action", formAction);
              settings.finish.call(this, GetFileName());
          }
          else {
              SubmitFormForFileProgressCheck(GetFileName());
              this.SavingProgress(progress);
          }
  
  
      }
  
      $.fn.fileUpload.SavingProgress = function(progress) {
  
          settings.fileProgress.call(this, fileLength, progress);
  
      }
  
  }
  
  })(jQuery);
  </code></pre>
  
  <h2>INSTALLATION</h2>
  
  <pre><code>$("#htmlinputfilecreateroom").fileUpload({ fileExtAllowed: 'jpg', fileSizeLimit: 2048, savePath: 'docs',
  
          fileFormatCheck: function(format) {
  
              if (format != 'jpg') {
              }
  
          },
  
          fileSizeError: function(size) {
          },
  
          fileProgress: function(length, progress) {
  
          },
  
          start: function(fileName) {
  
              $(".imageselectedcreaterromloader").show();
  
          },
  
          finish: function(fileName) {
  
              $(".imageselectedcreaterromloader").hide(); //Doesnt hide here but works in ie
              $(".imageselectedcreaterrom").css("backgroundImage", "url('docs/" + fileName + "')");//Image doesnt display but works in ie
  
          }
  
  
  
  
      });
  </code></pre>