How to upload image to jqgrid column

jqGrid shows images in column using colmodel below. Images are stored in database in binary column. How to allow users to upload image to existing and new row ?

colModel: [{"name":"开发者_如何学CProductId","edittype":"custom","editoptions":{"custom_element":function(value, options) { return   combobox_element(value, options)}
,"custom_value":combobox_value
},"editable":true,"width":112,"fixed":true,"hidden":false},

{"name":"Image","formatter":function( cell, options,row) {
                             return "<img src='Grid/GetImage?image=" +  row[0] + "'/>"
}
}]

public FileContentResult GetImage(string image) {
    byte[] image = ....
    return File(image, "image/jpg");
}

The problem is jQgrid uses ajax, and the image upload requires a File Dialog, and File Dialogs don't work over ajax.

I got around this by not doing inline editing (as is done on the other grids), but I redirected to a form on another page when the user clicks on the inline edit button. One form for edit and another for add. These forms then have the file dialog, as well as the other form elements for editing/adding the row. When the form is submitted, the user is redirected back to the grid.

In most grids I use formatter: 'actions', as well as navgrid. But for the grid with the images it did it like this:

For the navgrid, I use the following code:

jQuery("#grid1").jqGrid('navGrid', '#pager1',
            { search: false, editfunc: goEdit, addfunc: goAdd }, //options

It calls functions goEdit(), etc, which look like this:

function goEdit(rowid) {
        window.location = "/controllerName/EditFormName/" + rowid;
    }

This column replaces the column that is usually the formatter: 'actions' column:

 { name: 'RowActions', width: 60, fixed: true, sortable: false, resize: false, formatter: formatCustomED },

formatCustomED function makes the inline edit images, and makes them redirect:

formatCustomED = function (el, cellval, opts) {
        return "<div style=\"float: left; cursor: pointer;padding-left:8px\" class=\"ui-pg-div ui-inline-edit\" onmouseover=\"jQuery(this).addClass('ui-state-hover');\" title=\"Edit selected row\" onmouseout=\"jQuery(this).removeClass('ui-state-hover')\" onclick='goEdit(" + opts[0] + ")'><span class=\"ui-icon ui-icon-pencil\"></span></div><div style=\"margin-left: 5px; float: left;\" class=\"ui-pg-div ui-inline-del\" onmouseover=\"jQuery(this).addClass('ui-state-hover');\" title=\"Delete selected row\" onmouseout=\"jQuery(this).removeClass('ui-state-hover');\" onclick=\"doDelete("+opts[0]+")\"><span class=\"ui-icon ui-icon-trash\"></span></div>";
    }