Jersey 및 ExtJS를 사용한 파일 업로드의 응답

Question

데이터베이스의 이미지 파일을 BLOB 파일로 저장하는 방법이 있습니다. 이 메서드는 제대로 작동하지만 ExtJS filefield 구성 요소에서 콜백을 받으면 항상 실패 함수를 통과하고 성공 함수를 통해 응답해야하는 내용을 알지 못합니다. 내 코드는 다음과 같습니다.

서버 메서드 :

@POST 
@Path("/upload") 
@Consumes(MediaType.MULTIPART_FORM_DATA) 
@Produces({ MediaType.APPLICATION_JSON }) 
public ServiceResponse uploadFile(@QueryParam("id") Long iconId, FormDataMultiPart form) { 
    CatIcon icon; 
    if (iconId != null) { 
     icon = catIconBean.getOne(iconId); 
    } else { 
     icon = new CatIcon(); 
    } 

    byte[] image = form.getField("iconBmp").getValueAs(byte[].class); 
    if (image.length != 0) { 
     MultivaluedMap<String, String> headers = form.getField("iconBmp").getHeaders(); 
     String type = headers.getFirst("Content-type"); 
     List<String> list = Arrays.asList("image/gif", "image/png", "image/jpg", "image/jpeg", 
       "image/x-icon", "image/bmp"); 
     if (list.contains(type)) { 
      icon.setIconBmp(image); 
      icon.setType(type); 
     } 
    } 

    icon.setDescription(form.getField("description").getValue()); 
    icon.setFileName(form.getField("fileName").getValue()); 
    icon = catIconBean.saveIcon(icon); 

    ServiceResponse sr = new ServiceResponse(); 
    sr.httpResponse = true; 
    return sr; 
} 

위의 코드에서 무엇을 반환해야합니까?

클라이언트 :

uploadIcon : function(item, e, eOpts) { 
    var me = this; 
    var form = this.getDetail().getForm(); 
    var valid = form.isValid(); 
    if (!valid) { 
     return false; 
    } 
    var values = form.getValues(); 
    if(values) { 
     form.submit({ 
      url : myApplication.defaultHost() + 'icon/upload?id=' + values.id, 
      waitMsg : 'Uploading...', 
      success : function(form, action) { 
       me.onCompleteSaveOrDelete(); 
      }, 
      failure : function(form, action) { 
       me.onCompleteSaveOrDelete(); 
      } 
     }); 
    } 
}, 

나는 그것이 내가 성공을 호출 할 방법, 그것은 호출 할 수 있도록 모두 콜백 함수에서 동일한 기능, me.onCompleteSaveOrDelete()를 작성합니다.

인사말.

UPDATE :

내가 한 거의 같은 Alexander.Berg는 대답했다. 유일한 차이점은 @Produces({ MediaType.TEXT_HTML }) 대신 @Produces({ MediaType.APPLICATION_JSON })을 쓰는 것입니다. Json Response가 필요하기 때문입니다.

액션 PARAM에서

failure : function(form, action) { 
    me.onCompleteSaveOrDelete(); 
} 

, responseText 내 :

실패 :

"{"data":"{\"success\":true}","httpResponse":true,"totalCount":0}" 

을하지만 여전히 failure을 통해거야 내가 크롬에서 디버깅하고 응답을 확인하지만,이 얻을. .. 나는 내가 매우 가깝다고 생각한다, 어떤 도움?

인사말.

Answer 1

파일 업로드에 대한 실제 아약스 요청이 아닌, iframe 및 submit을 사용하기 때문에 Extjs의 파일 업로드가 더 까다 롭습니다.

서버 방법에서이 시도 :

@POST 
@Path("/upload") 
@Consumes(MediaType.MULTIPART_FORM_DATA) 
@Produces(MediaType.TEXT_HTML) 
public String uploadFile(@QueryParam("id") Long iconId, FormDataMultiPart form) { 
    (...) 
    JSONObject json = new JSONObject(); 
    json.put("success", true); 
    json.put("msg", "Success"); 
    return json.toString(); 
}

을이이 업로드 콘텐츠 유형 텍스트/HTML을 허용하기 때문에,

가 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.File에서 예를 참조 -> 사용 예 ->

실시간 미리보기 Firefox 브라우저를 Firebug 플러그인과 함께 사용하고 넷 탭에서 다음 URL ->http://docs.sencha.com/extjs/4.2.2/photo-upload.php

Response Headersview source 
(...) 
Content-Type text/html 
(...) 

Request Headersview source 
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
(...)