Databases
StackOverflow2013
Postsdbo
POPictures uploaded with valums ajax upload and OctetStreamReader dosn't work in IE - Java/JSP
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPictures uploaded with valums ajax upload and OctetStreamReader dosn't work in IE - Java/JSP
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSergey K.
    1. USEmil Kaminski
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPictures uploaded with valums ajax upload and OctetStreamReader dosn't work in IE - Java/JSP
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload