About file upload for standalone editor

About file upload for standalone editor

yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
edited April 2017 in Free community support

json response from server when upload file

{"data":[],"files":{"gallery":{"182":{"id":182,"filename":"abc","filesize":10000,"path":"...."}}},"upload":{"id":182}}

render editor field

                name: "itemGallery[].id",
                type: "uploadMany",
                display: function (file_id, counter) {
                    return '<img src="' + editor.file('gallery', file_id).path + '"/>';
                },

I get javascript error

Unknown file table name: gallery

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi,

    What version of Editor are you using please? That looks like it should actually work with 1.6.1.

    If you are already using 1.6.1, could you give me a link to the page showing the issue so I can debug it please?

    Thanks,
    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0

    yes, it is 1.6.1, I cant setup on http://live.datatables.net/ and it is on local hosting

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    I cant setup on http://live.datatables.net/

    Why not?

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0

    http://live.datatables.net/cusuzoyu/1/edit

    server code

    public function addGallery() {
            $response = new stdClass();
    
            try {
                $data = Request::file("upload");
    
                if ($data->isValid()) {
    $gallery = new stdClass();
    $gallery->id = 100;
    $gallery->name = test;
    $gallery->size = 100;
    $gallery->path = "...";
    
                    $response->data = [];
                    $response->files = [];
                    $response->files['files'] = [];
                    $response->files['files'][$gallery->id] = new stdClass();
                    $response->files['files'][$gallery->id]->id = $gallery->id;
                    $response->files['files'][$gallery->id]->filename = $gallery->name;
                    $response->files['files'][$gallery->id]->filesize = $size;
                    $response->files['files'][$gallery->id]->path = $gallery->path;
                    $response->upload = [];
                    $response->upload['id'] = $gallery->id;
                } else {
                    throw new Exception($data->getErrorMessage());
                }
            } catch (Exception $e) {
                $response->error = $e->getMessage();
                throw $e;
            }
    
            return json_encode($response);
        }
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Ah - I think I know what it is. Do you get this error when you open the Editor view to edit the values? Or does it happen when you upload the file?

    My guess is the former, and that is happening because with a DataTable, the files object can be populated from the DataTables Ajax request. If you are using a standalone Editor there is no way for Editor to know about the files that you have uploaded already.

    What you would need to do is add the file information to the $.fn.dataTable.Editor.files object.

    This is what Editor does:

                            $.each( json.files, function ( table, files ) {
                                $.extend( Editor.files[ table ], files );
                            } );
    

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
    edited April 2017

    with $.extend( Editor.files[ table ], files ), editor.file('files', file_id) will still get error of table name 'files', I tried to use

    editor.files[ table ] = files;
    
    var galleries = editor.files['files'];
                        if(galleries !== undefined){
                            return '<img src="' + galleries[file_id].path + '"/>';
                        }
    

    and it work

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    What is your files variable? It would need be an object that contains a galleries object that has the information about the files.

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0

    yes, it is object

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    And does it contain a galleries property? If you could show me the result of JSON.stingify( files ) that would be useful.

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
    edited April 2017

    the json string returned from server and editor field declaration is shown in on the question of this discussion

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    If you are referring to this:

    {"data":[],"files":{"gallery":{"182":{"id":182,"filename":"abc","filesize":10000,"path":"...."}}},"upload":{"id":182}}

    I don't see a "galleries" property, which is what Allan has been asking you.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    the json string returned from server and editor field declaration is shown in on the question of this discussion

    That's after an edit. I'm interested in the value of your variable when that code runs - i.e. before the Ajax request for the edit is made.

    Allan

  • yu yen kanyu yen kan Posts: 65Questions: 31Answers: 0
    edited April 2017

    this?

    "{"action":"upload","uploadField":"item_gallery","upload":{}}"

    or

    var data = {};
            
            data.name = response.name;
            data.price = response.price;
            data.detail = response.detail;
            if (response.item_gallery !== undefined && response.item_gallery !== null && response.item_gallery.length > 0) {
                data.item_gallery = [];
                var object = [];
                $.each(response.item_gallery, function (index, gallery) {
                    object[gallery.id] = gallery;
                    data.item_gallery.push(gallery.id);
                });
                editor.files['gallery'] = object;
            }
            if (response.item_manual !== undefined && response.item_manual !== null && response.item_manual.length > 0) {
                data.item_manual = [];
                var object = [];
                $.each(response.item_manual, function (index, manual) {
                    object[manual.id] = manual;
                    data.item_manual.push(manual.id);
                });
                editor.files['manual'] = object;
            }
            if (itemType === 'products' && response.item_brand !== undefined && response.item_brand !== null) {
                data.item_brand = response.item_brand;
            }
    
            editor
                    .edit(response.id)
                    .set(data)
                    .open();
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I might be understanding the issue now:

    editor.files['gallery'] = object;

    Here editor is your Editor instance presumably. However, it should be getting assigned to $.fn.dataTable.Editor which is what the Editor variable in my code above is. I should have made that clear at the start.

    Allan

  • sooli86sooli86 Posts: 2Questions: 0Answers: 0
    edited July 2017

    work fine for me by edit in below 2 places(support uploadMany):

    edit in dataTables.editor.js:4101

    if ( json.files )
    {
        // Loop over the tables that are defined
        $.each( json.files, function ( table, files )
             {
                     //$.extend( Editor.files[ table ], files );
                     if(Editor.files[table]==null)
                     {
                            Editor.files[table] =[];
                      }
                      $.each( files, function ( id, filesObj )
                      {
                             Editor.files[table][id] = filesObj;
                      });
        } );
    }
    
    

    in javascript:

    {
                        label: "Image Upload",
                        name: "image_src[].id" ,
                        type:"uploadMany",
                        display: function ( file_id , counter)
                        {
                            return '<img src="'+editor.files('files')[file_id].web_path+'"/>';
                        },
                        noFileText: 'No images'
                    },
    

    in PHP server i use the simple way:

    if(isset($_FILES['upload']))
    {
        session_start();
        $imageCount =0;
        if(isset($_SESSION['imageCount']))
        {
            $imageCount = $_SESSION['imageCount'];        
        }
        $imageCount += 1;
        $_SESSION['imageCount'] =$imageCount;
        
        $id = $imageCount;
        $file =$_FILES['upload'] ;
        move_uploaded_file( $file['tmp_name'], '/resources/image/uploads/'.$file['name'] );
    
        $filesObj = array();
        $filesObj["id"]= $id;
        $filesObj["filename"]= $file['name'];
        $filesObj["filesize"]= $id;
        $filesObj["web_path"]= "/resources/image/uploads/".$file['name'];
        $filesObj["system_path"]= 'resources/image/uploads/'.$file['name'];
    
        $echoResult = array("data"=>array(),"files"=>array("files"=>array($id=>$filesObj)),"upload"=>array("id"=>$id));
        echo json_encode($echoResult);
    
    }
    
This discussion has been closed.