Question

I am trying to implement file upload with jqgrid (in a Zend Framework project). jqgrid allows you to create an input field of type “file” but does not enable ENCTYPE=“multipart/form-data”.

The creator recommends using another plugin to handle file uploads, specifically Ajax File Upload. He says to initialize it using the onInitializeForm() method but exactly how to do this is not clear to me. He says,

“Also as I suggest you can use Ajax
file upload plugin and intialize it
only once in onInitializeForm event.”

And that is about it for instructions on how to do this.

What I have done so far:
I have the jqgrid edit form displaying the file input field and I have all of the various plugin files in place and loading properly. What I cannot figure out is how to get the submitted form to properly upload the file (I guess I can’t figure out how to “initialize the ajax file upload plugin with the onInitializeForm event”). Any ideas are greatly appreciated.

For what it is worth I can get onInitializeForm to trigger something simple like alert(‘test’) but it triggers in growing numbers each time you load the grid (like, nothing first time, one alert the next time you load the grid, two alerts the next time, etc).

Answer 1

The Answer is as like:

<!-- Add your other js files like jQuery, jqGrid etc. -->
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script language="javascript">
    $(function() {
        $(document).ready(function() {
            jQuery("#your_grid_id").jqGrid({
                url: 'your_url',
                datatype: 'json',
                mtype: 'post',
                pager: 'your_pager_id',
                colNames: ["Description", "File"],
                colModel: [{name: "desc", index: "desc", ... ... ...}, {name: "file_to_upload", index: "file_to_upload", edittype: "file", ... ... ...}]
            }).navGrid("#your_pager_id",{{... ... ...},{
                jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){
                    $(formid).attr('method','POST');
                    $(formid).attr('action','');
                    $(formid).attr('enctype','multipart/form-data');
                }, afterSubmit : function(response, postdata){
                       $.ajaxFileUpload({
                          url: 'your_file_url_where_upload_operates', 
                          secureuri:false,
                          fileElementId:'file_to_upload',
                          dataType: 'json',
                          success: function (data, status) {
                              alert("Upload Complete.");
                          }
                       });
                   }
                }},{
                jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){
                    $(formid).attr('method','POST');
                    $(formid).attr('action','');
                    $(formid).attr('enctype','multipart/form-data');
                }, afterSubmit : function(response, postdata){
                       $.ajaxFileUpload({
                          url: 'your_file_url_where_upload_operates', 
                          secureuri:false,
                          fileElementId:'file_to_upload',
                          dataType: 'json',
                          success: function (data, status) {
                              alert("Upload Complete.");
                          }
                       });
                   }
                }
            });
        });
    });
</script>

I used recreateForm: true to ensure that on every Add or Edit the form is re-created.

If you have problem yet, please feel free to ask me.