how to get the value of the id & refresh the data after upload the file

Frank Yu · April 2015

In my app. I'll have my user to upload an file with the form. I've downloaded the file upload plug-in and put it into my codes. But I dont' know how to send the id value to the server too. After the user uploading the file, the filename should be updated into the database.

Frank Yu · April 2015

The following is what I do:
1. add a hidden filed to the form.
fields : [ {
"name" : "guid",
"type" : "hidden"
}, {

use the following code to get the guid value ( the table key value) for ajax to the server:
var guid = editor.s.fields.guid.s.opts._val;

   // reader.onload = function ( e ) {
        data.append( 'action', 'upload' );
        data.append( 'uploadField', conf.name );
        data.append( 'upload', file );
        data.append( 'guid', guid);

Then, the server's php can update the table value with the guid key value.

allan · April 2015

Sounds a bit complicated. You should be able to just have the upload field's value as the primary key id for the file.

Can you show us your PHP and Javascript initialisation code please?

Allan

Frank Yu · April 2015

My PHP:


<div class="container">
    <table id="datatable" class="display DTTT_selectable dataTable" role="grid" aria-describedby="datatable_info" cellspacing="0" width="100%">
    </table>
</div>
<script type="text/javascript" src="js/filesupload.js"></script>
<script>
    var editor;

    $(document).ready(function(){
        filesUploadReady();
    });
</script>

My Javascript:

function getFilesUploads(){
    'use strict';
    getApACL("filesupload.php",$("#apaclguid").val());

    if ($("#clientguid").val()=="") {
        createDatatableTitle();
        return(false);
    };

    var editor = new $.fn.dataTable.Editor( {
        ajax        : "ajax/filesupload_json.php",
        table       : "#datatable",
        idSrc       : "guid",
        fields      : [ {
                            "name"      : "guid",
                            "type"      : "hidden"
                        },  {
                            "label"     : "設計檔名:",
                            "name"      : "csfilename",
                            "type"      : "upload",
                            "clearText" : "清空",
                            "uploadText": "選擇檔案",
                            "dragDrop"  : false,
                            "display"   : function ( val, row ) {
                                            return '<a href="' + row["cslink"] + '">' + val + '</a>';
                                        }
                        }
                      ]
    } );

    $('#datatable').DataTable( {
            destroy     : true,
            autoWidth   : true,
            stateSave   : true,
            ajax        : { url   : "ajax/filesupload_json.php",
                            type  : "post",
                            data  : {"action"        : "getAllRecords",
                                     "clientguid"    : $("#clientguid").val(),
                                     "clientaclguid" : $("#clientaclguid").val(),
                                     "bdate"         : $("#bdate").val(),
                                     "edate"         : $("#edate").val()
                                    }
                          },
            pagingType  : "full_numbers",
            language    : { url: "language/cn.json" },
            dom         : 'T<"clear">lfCrtip',
            colVis      : {
                            "buttonText": "隱藏/顯示欄位"
                          },
            tableTools  : {
                            sRowSelect: "os",
                            sSwfPath: "swf/copy_csv_xls_pdf.swf",
                            aButtons: [
                                { sExtends: "editor_create", sButtonText: "新增", editor: editor },
                            ]
                          },
            columns     : [
                            { data: "ccname" },
                            { data: "csfilename",
                                 render: function ( data, type, row, meta ) {return '<a href="' + row["cslink"] + '">' + data + '</a>';}
                            },
                            { data: "cscreated" },
                          ]
    });
};


function uploadFile ( editor, conf, file ){
    var data = new FormData();
    var ajax;
    var guid = editor.s.fields.guid.s.opts._val;

    data.append( 'action', 'upload' );
    data.append( 'uploadField', conf.name );
    data.append( 'upload', file );
    data.append( 'guid', guid );

    if ( typeof editor.s.ajax !== 'string' && ! conf.ajax ) {
        throw 'No Ajax option specified for upload plug-in';
    } else if ( conf.ajax ) {
        ajax = conf.ajax;
    } else {
        ajax = editor.s.ajax;
    }

    if ( typeof ajax === 'string' ) {
        ajax = { url: ajax };
    }

    // Use preSubmit to stop form submission during an upload, since the
    // value won't be known until that point.
    var submit = false;
    editor
        .on( 'preSubmit.DTE_Upload', function () {
            submit = true;
            return false;
        } );

    $.ajax( $.extend( ajax, {
        type: 'post',
        data: data,
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        xhrFields: {
            onprogress: function ( e ) {
                if ( e.lengthComputable ) {
                    buttonText( conf, (e.loaded/e.total*100)+"%" );
                }
            },
            onloadend: function ( e ) {
                buttonText( conf );
            }
        },
        success: function ( json ) {
            editor.off( 'preSubmit.DTE_Upload' );
            $.fn.dataTable.Editor.fieldTypes.upload.set.call( editor, conf, json.upload.id, json.upload.row );

            if ( submit ) {
                editor.submit();
            }
        }
    } ) );
};

function buttonText ( conf, text ){
    ( the following codes are just copied from ur plug-in)
};

$.fn.dataTable.Editor.fieldTypes.upload = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
  
   ( the following codes are just copied from ur plug-in)

    }
});

allan · April 2015

The "PHP" looks a bit wrong (it is HTML). Could you update that please?

Allan

Frank Yu · April 2015

The following is all the php code:

All the app is using ur code & ajax:
_data.php-> for data connection;
_function.php-> for php functions
_header.php -> for generate the page header


<?php
    session_start();
    $pagetitle = "eLab &raquo; 客戶上傳CASES清單 ";
    include_once("_data.php");
    include_once("_functions.php");
    //auth("filesupload.php",'grant1','index.php');
    include_once("_header.php");
?>
<input type="hidden" id="datatable_title" value="客戶,EMail,檔名,狀況,刪除否,上傳時間,設計檔案,設計時間">
<div class="container" style="border-bottom:1px solid #7d8ba6;" >
    <b>客戶:</b><span id="spanclientsguid"></span> &nbsp;&nbsp;
    <b>期間:</b><input name="bdate"   type="text" id="bdate" size="10" maxlength="10"  onfocus="new WdatePicker()" value="" > &nbsp;&nbsp; ~~
                <input name="edate"   type="text" id="edate" size="10" maxlength="10"  onfocus="new WdatePicker()" value=""> &nbsp;&nbsp;
    <input name="submit" type="button" value="查詢"  onclick="getFilesUploads();"/>
</div>
<div class="container">
    <table id="datatable" class="display DTTT_selectable dataTable" role="grid" aria-describedby="datatable_info" cellspacing="0" width="100%">
    </table>
</div>
<script type="text/javascript" src="js/filesupload.js"></script>
<script>
    var editor;

    $(document).ready(function(){
        filesUploadReady();
    });
</script>

Frank Yu · April 2015

I use the upload plug-in to upload the file to the server, but I cannot transfer the id key to the server with the post, that's why I add "data.append("guid", guid) " to the code. The guid is the key value of the table record.
If I don't add the guid value manually, the following codes with just upload the file to the server.

$.ajax( $.extend( ajax, {
        type: 'post',
      //  url: 'ajax/filesupload_json.php',   //url在editor時就有定義了 會直接帶進來
        data: data,
        async: false,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        xhrFields: {
            onprogress: function ( e ) {
                if ( e.lengthComputable ) {
                    buttonText( conf, (e.loaded/e.total*100)+"%" );
                }
            },
            onloadend: function ( e ) {
                buttonText( conf );
            }
        },
        success: function ( json ) {
            editor.off( 'preSubmit.DTE_Upload' );
            $.fn.dataTable.Editor.fieldTypes.upload.set.call( editor, conf, json.upload.id, json.upload.row );

            if ( submit ) {
                editor.submit();
            }
        }
    } ) );

allan · April 2015

So you are not using the Editor Upload class on the server side? That would probably explain why it is proving to be a bit more difficult that it should.

The Upload class is documented here if you did want to try it.

Regards,
Allan

Frank Yu · April 2015

No, I don't use the Upload class on the server side, but use my own. I think that should be OK? Is there anything I've missed to send to client side. The following is my server side code for retrieving data:

switch ($action_post) {
    case "getAllRecords":
        $clientguid     = $_POST['clientguid'];
        $bdate          = $_POST['bdate'];
        $edate          = $_POST['edate'];
        if ($clientguid=='All') {
            $clientfilter = '';
        } else {
            $clientfilter = " and f.clientguid='" . $_POST['clientguid'] . "' ";
        };
        if ($bdate=='' or is_null($bdate)) {
            $bdatefilter = '';
        } else {
            $bdatefilter = " and f.udate >= '$bdate' ";
        };
        if ($edate=='' or is_null($edate))  {
            $edatefilter = '';
        } else {
            $edatefilter = " and f.udate <= '$edate' ";
        };
        $sql = "select f.guid guid, c.cname ccname, f.email email, f.clientfilename clientfilename, " .
               "f.clientdir clientdir,f.clientsavedfilename clientsavedfilename, f.csfilename csfilename, f.csdir csdir, f.cssavedfilename cssavedfilename, f.cscreated cscreated, f.ustatus ustatus, f.isdelete isdelte, f.created created " .
               "from filesupload f, clients c, csclients cs  " .
               "where f.clientguid=c.guid and c.guid=cs.clientguid and cs.csguid='$clientaclguid' $clientfilter $edatefilter $bdatefilter order by c.cname, f.created, f.clientfilename ";
        try{
            $stmcs = $pdo->query($sql);
            $rowcss= $stmcs->fetchAll(PDO::FETCH_ASSOC);
            $rows=array();
            $i=0;
            foreach($rowcss as $rowcs) {
                //把資料放到陣列裡
                switch ($rowcs['ustatus']) {
                    case "0":
                        $ustatusname = "failed";
                        break;
                    case "1":
                        $ustatusname = "Uploaded";
                        break;
                    case "2":
                        $ustatusname = "Downloaded";
                        break;
                    case "3":
                        $ustatusname = "Shipped";
                        break;
                    case "4":
                        $ustatusname = "Fabricating";
                        break;
                };
                $rows[$i]['guid']               = $rowcs['guid'];
                $rows[$i]['ccname']             = $rowcs['ccname'];
                $rows[$i]['email']              = $rowcs['email'];
                $rows[$i]['clientfilename']     = $rowcs['clientfilename'];
                $rows[$i]['clientdir']          = $rowcs['clientdir'];
                $rows[$i]['clientsavedfilename']= $rowcs['clientsavedfilename'];
                $rows[$i]['clientlink']         = $elab . $rowcs['clientdir'] . $rowcs['clientsavedfilename'];
                $rows[$i]['csfilename']         = $rowcs['csfilename'];
                $rows[$i]['csdir']              = $rowcs['csdir'];
                $rows[$i]['cssavedfilename']    = $rowcs['cssavedfilename'];
                $rows[$i]['cslink']             = $epanel . $rowcs['csdir'] . $rowcs['cssavedfilename'];
                $rows[$i]['ustatus']            = $rowcs['ustatus'];
                $rows[$i]['ustatusname']        = $ustatusname;
                $rows[$i]['isdelete']           = $rowcs['isdelete'];
                $rows[$i]['created']            = $rowcs['created'];
                $rows[$i]['cscreated']          = $rowcs['cscreated'];
                $i++;
            }
        } catch(PDOException $e){
            writeErrorLogsAjax('filesupload, clients, csclients', $e, $sql);
        };
        $r['data']      = $rows;
        $r['options']   = "";
        break;

how to get the value of the id & refresh the data after upload the file

how to get the value of the id & refresh the data after upload the file

Answers

Howdy, Stranger!

Categories

DataTables

how to get the value of the id & refresh the data after upload the file

how to get the value of the id & refresh the data after upload the file

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables