JQGrid File Upload

Question

I want to use Multiple File Upload With JQGrid builtin Inline/popup Editing. User will supply some meta info and file. Meta info will go to DB and file will be saved on web server. I need to do this on Submit button. Any Suggestion/reference ?

Answer 1

This question is a bit old, but if anyone gets it on google, here:

http://www.trirand.com/blog/?page_id=393/feature-request/file-upload-again/

Answer 2

Here's a demo by the JqGrid staff, based on the Ajax file upload plugin. It's a pretty simple script!

you have your grid.php:

// add column "fileToUpload" , hidden in main table view, showed in add/edit forms
$grid->addCol(array("name"=>"fileToUpload", "hidden"=>true, "editable"=>true, "edittype"=>"file", "editrules"=>array("edithidden"=>true)));

// file upload code
$upload = <<< UPLOAD

function (formid) {

    //These are needed for fileupload plugin
    $(formid).attr("method", "POST");
    $(formid).attr("action", "");
    $(formid).attr("enctype", "multipart/form-data");

    // convert to jqueryUI button

    $("#fileToUpload", formid).button();

    // Create a button bellow the file field
    $("<BR/><button id='buttonUpload'>Upload</button>").button().insertAfter("#fileToUpload", formid);

    // bind a event

    $("#buttonUpload", formid).click(function () {

        $('<img src="loading.gif" />')
            .dialog()
            .ajaxStart(function () {
                $("#gview_grid").attr("disabled", true);  //disable jqgrid to avoid editing while uploading file
                $(this).show();
            })
            .ajaxComplete(function () {
                $(this).dialog("close");
                $("#gview_grid").removeAttr("disabled");;  //restore jqgrid after file loading complete
            });


        $.ajaxFileUpload({
            url: 'doajaxfileupload.php',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',


            success: function (data, status) {


                console.log(data);
                if (typeof (data.error) != 'undefined') {
                    if (data.error != '') {
                        /* if file-upload error */
                        alert(data.error);
                    } else {
                    // file successfully uploaded 
                        alert(data.msg);
                    }
                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        });
        return false;
    });
}
UPLOAD;

// bind $upload code to onInitializeForm
$grid->setNavEvent('add', 'onInitializeForm', $upload);

---

and the Ajax file uploader (doajaxfileupload.php):

<?php
    $error = "";
    $msg = "";
    $fileElementName = 'fileToUpload';
    if(!empty($_FILES[$fileElementName]['error']))
    {
        switch($_FILES[$fileElementName]['error'])
        {

            case '1':
                $error = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
                break;
            case '2':
                $error = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
                break;
            case '3':
                $error = 'The uploaded file was only partially uploaded';
                break;
            case '4':
                $error = 'No file was uploaded.';
                break;

            case '6':
                $error = 'Missing a temporary folder';
                break;
            case '7':
                $error = 'Failed to write file to disk';
                break;
            case '8':
                $error = 'File upload stopped by extension';
                break;
            case '999':
            default:
                $error = 'No error code avaiable';
        }
    }elseif(empty($_FILES[$fileElementName]['tmp_name']) || $_FILES[$fileElementName]['tmp_name'] == 'none')
    {
        $error = 'No file was uploaded..';
    }else 
    {
            $msg .= " File Name: " . $_FILES[$fileElementName]['name'] . ", ";
            $msg .= " File Size: " . @filesize($_FILES[$fileElementName]['tmp_name']);
            //for security reason, we force to remove all uploaded file
            //@unlink($_FILES[$fileElementName]);
            $fname = basename($_FILES[$fileElementName]['name']);
            if (move_uploaded_file($_FILES[$fileElementName]['tmp_name'], $fname)) {
                $msg .= " OK";
            } else {
                $error= 'Possible file upload attack';
                @unlink($_FILES['fileToUpload']);
            }           
            //@unlink($_FILES['fileToUpload']);     

    }       
    echo "{";
    echo                "error: '" . $error . "',\n";
    echo                "msg: '" . $msg . "'\n";
    echo "}";
?>