title: Pictures uploaded with valums ajax upload and OctetStreamReader dosn't work in IE - Java/JSP
body: <p>I'm having a problem with picture uploading in Internet Explorer 7, 8 and 9 (haven't tested other versions). It works fine in FF and Chrome, but for some reason the picture is uploaded wrong when i try to upload in any versions of IE.</p>
  
  <p>What i mean by that is that the file gets uploaded in the right directory with the right name, but i cant open it in any picture editing programs.</p>
  
  <p>Furthermore when i open the picutre in Notepad++ i see that the picture got some meta data displaying like:</p>
  
  <p>-----------------------------7db1f6c907fe
  Content-Disposition: form-data; name="qqfile"; filename="jingjang.jpg"
  Content-Type: image/jpeg</p>
  
  <p>(hashcode here)</p>
  
  <p>-----------------------------7db1f6c907fe--</p>
  
  <p>If i remove the code the picture works fine! So can anyone tell me what is generating the code and how do i stop it? :)</p>
  
  <p>I use Valums Ajax Upload on my JSP page:</p>
  
  <pre><code>var imageFolder = "images/upload/&lt;%=user.getUsername()%&gt;/temp/";
  new qq.FileUploader({
  
  element: document.getElementById('TempUploadButton'),
  action: 'OctetStreamReader',
  debug: false,
  multiple: false,
  params: {"type" : "user"},
  
  onComplete: function(id, fileName) {    
      var d = new Date();
      $("#UserPageAvatarPic a img").attr("src", imageFolder+"&lt;%=user.getUsername()%&gt;.jpg?cache="+d.getTime() );
  },
  onSubmit : function(id, fileName) {
      // hide all prev elements
      $('#TempUploadButton ul.qq-upload-list li').each(function() {
          $(this).hide();
      });
  }
  
  });
  </code></pre>
  
  <p>And OctetStreamReader as my servlet</p>
  
  <pre><code>    public class OctetStreamReader extends HttpServlet {
  
  private static final long serialVersionUID = 6748857432950840322L;
  private static final String DESTINATION_DIR_PATH = "files";
  private static String realPath;
  UserService userService = UserService.getService();
  
  /**
   * {@inheritDoc}
   * @param config
   * @throws ServletException
   */
  @Override
  public void init(ServletConfig config) throws ServletException {
      super.init(config);
      realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH) + "/";
  }
  
  /** 
   * Handles the HTTP &lt;code&gt;POST&lt;/code&gt; method.
   * @param request servlet request
   * @param response servlet response
   * @throws ServletException if a servlet-specific error occurs
   * @throws IOException if an I/O error occurs
   */
  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
          throws ServletException {
      User user = userService.getUser(((Integer) request.getSession().getAttribute("user")).intValue());
      String type = request.getParameter("type");
      String username = user.getUsername();
      PrintWriter writer = null;
      InputStream is = null;
      FileOutputStream fos = null;
      type = "user";
      try {
          writer = response.getWriter();
      } catch (IOException ex) {
          log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
      }
  
      try {
          String filename = "";
          if (type.equals("user")) {
              realPath = getServletContext().getRealPath("/images/upload/" + username + "/temp/");
              is = request.getInputStream();
              String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/temp/" );
              boolean success = (new File(strDirectoy)).mkdir();
              File f1 = new File(strDirectoy);
              File[] children = f1.listFiles();
              filename = username + ".jpg";
          }
          if (type.equals("post"))  {
              realPath = getServletContext().getRealPath("/images/upload/" + username + "/post/");
              is = request.getInputStream();
              String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/post/" );
              boolean success = (new File(strDirectoy)).mkdir();
              File f1 = new File(strDirectoy);
              File[] children = f1.listFiles();
              filename = Calendar.getInstance().getTimeInMillis()+".jpg";
          }
          if (type.equals("editpost"))  {
              realPath = getServletContext().getRealPath("/images/upload/" + username + "/editpost/");
              is = request.getInputStream();
              String strDirectoy = getServletContext().getRealPath("/images/upload/" + username + "/editpost/" );
              boolean success = (new File(strDirectoy)).mkdir();
              File f1 = new File(strDirectoy);
              File[] children = f1.listFiles();
              filename = Calendar.getInstance().getTimeInMillis() + ".jpg";
          }
  
  
          fos = new FileOutputStream(new File(realPath + "/" + filename), false);
          IOUtils.copy(is, fos);
          response.setStatus(response.SC_OK);
          writer.print("{success: true, filename: \"" + filename + "\"}");
      } catch (FileNotFoundException ex) {
          response.setStatus(response.SC_INTERNAL_SERVER_ERROR);
          writer.print("{success: false}");
          log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
      } catch (IOException ex) {
          response.setStatus(response.SC_INTERNAL_SERVER_ERROR);
          writer.print("{success: false}");
          log(OctetStreamReader.class.getName() + "has thrown an exception: " + ex.getMessage());
      } finally {
          try {
              fos.close();
              is.close();
          } catch (IOException ignored) {
          }
      }
   writer.flush();
      writer.close();
  }
  }
  </code></pre>
  
  <p>Also in fileuploader.js i tried to change the Content Type from application/octet-stream to multipart/form-data</p>
  
  <pre><code>        /**
   * Sends the file identified by id and additional query params to the server
   * @param {Object} params name-value string pairs
   */    
  _upload: function(id, params){
      var file = this._files[id],
          name = this.getName(id),
          size = this.getSize(id);
  
      this._loaded[id] = 0;
  
      var xhr = this._xhrs[id] = new XMLHttpRequest();
      var self = this;
  
      xhr.upload.onprogress = function(e){
          if (e.lengthComputable){
              self._loaded[id] = e.loaded;
              self._options.onProgress(id, name, e.loaded, e.total);
          }
      };
  
      xhr.onreadystatechange = function(){            
          if (xhr.readyState == 4){
              self._onComplete(id, xhr);                    
          }
      };
  
      // build query string
      params = params || {};
      params['qqfile'] = name;
      var queryString = qq.obj2url(params, this._options.action);
  
      xhr.open("POST", queryString, true);
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
      xhr.setRequestHeader("X-File-Name", encodeURIComponent(name));
      xhr.setRequestHeader("Content-Type", "multipart/form-data");
      xhr.send(file);
  },
  </code></pre>