Response in file upload with Jersey and ExtJS

Question

I have a method which save an image file in the database as a BLOB file. The method works fine, but when I get the callback in ExtJS filefield component, it always goes through failure function and I don't know what I have to respond to go through success function, this is my code:

Server method:

@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;
}

What I have to return in the code above?

Client:

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();
            }
        });
    }
},

I write the same function, me.onCompleteSaveOrDelete(), in both callback functions to make it be called, that's the method which I want to be called in success.

Greetings.

UPDATE:

I did almost the same Alexander.Berg answered. The only difference was that I write @Produces({ MediaType.APPLICATION_JSON }) instead of @Produces({ MediaType.TEXT_HTML }), because I need Json Response. But when I debug in chrome and check the response, I get this:

In failure:

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

In action param, within responseText:

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

But It's still going through failure...I think I'm very close, any help??

Greetings.

Answer 1

The fileupload in Extjs is more tricky, because it is using iframe and submit, not a real ajax request for uploading files.

Try this on Server method:

@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();
}

this is because the upload accepts Content-Type text/html,

see Example at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.File -> Example Usage -> Live Preview

Use Firefox browser with Firebug plugin and on Net tab the following 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
(...)