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

Frank YuFrank Yu Posts: 22Questions: 7Answers: 3

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.

Answers

  • Frank YuFrank Yu Posts: 22Questions: 7Answers: 3

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

    1. 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.

  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    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 YuFrank Yu Posts: 22Questions: 7Answers: 3

    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)
    
        }
    });
    
    
    
    
    
  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

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

    Allan

  • Frank YuFrank Yu Posts: 22Questions: 7Answers: 3

    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 YuFrank Yu Posts: 22Questions: 7Answers: 3

    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();
                }
            }
        } ) );
    
    
  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

    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 YuFrank Yu Posts: 22Questions: 7Answers: 3
    edited 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;
    
This discussion has been closed.