About file upload for standalone editor

yu yen kan

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

allan

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 kan

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

tangerine

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

Why not?

yu yen kan

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);
    }

allan

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 kan

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

allan

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 kan

yes, it is object

allan

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 kan

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

tangerine

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.

allan

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 kan

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();

allan

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

sooli86

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);

}