File upload unexpected instant upload JSON response

pmj7

Hi

I'm putting together my own backend, as your supplied server code isn't suitable for a noSQL solution with a file store service.

I'm looking at https://editor.datatables.net/examples/advanced/upload.html

I'm see that the JSON response from the instant upload of the image when creating a new record, includes details for file beyond what was just uploaded. I've uploaded a 2nd image, but you can see details for the first image as well. Is this required? I'm hoping that all is needed is the file details for the image you just uploaded.

{
    "data": [],
    "files": {
        "files": {
            "1": {
                "id": "1",
                "filename": "EUROPA-CRESCENT small.jpg",
                "filesize": "45751",
                "web_path": "\/upload\/1.jpg",
                "system_path": "\/home\/datat\/public_html\/editor\/upload\/1.jpg"
            },
            "2": {
                "id": "2",
                "filename": "EUROPA-CRESCENT small2.jpg",
                "filesize": "45751",
                "web_path": "\/upload\/2.jpg",
                "system_path": "\/home\/datat\/public_html\/editor\/upload\/2.jpg"
            }
        }
    },
    "upload": {
        "id": "2"
    }
}

Peter

allan

Hi Peter,

No - detailing every file that has been uploaded is not required. You can pass back only the information for the most recently uploaded file. The information for the other files (if there are any) will be retained on the client-side from before.

I will look at updating my server-side libraries to limit the information passed back.

Allan

pmj7

https://datatables.net/reference/api/file()

I see that the file_id is an integer. This doesn't work for a multi-server noSQL solution. If it was a string then it would be fine.

I keep an ImageRef field in the record, set to null if there is nothing. If it's something then that value is a string reference to where the file is stored, eg: 'ab576fe8a6926582.jpg'. I don't have a separate table to store file information. I'm building the 'files' part of the list of items JSON return on-the-fly, but my string ids cause things to fail.

Any change you could update how this works in the really near future? ;)

Thanks.

Peter

allan

It shouldn't actually matter what value the file id is - an integer is typical, but a uuid should work just as well. The id is defined by the server - the Javascript just uses whatever valid is given.

but my string ids cause things to fail.

In what way? What error are you getting and where?

Allan

pmj7

I can add a file, and things update. The problem occurs when I refresh the page, and try to edit the item I've added.

code:
{
                            label: "Image:",
                            name: "ImageRef",
                            type: "upload",
                            display: function(file_id) {
                                console.log("display ImageRef, file_id: " + file_id);
                                var fileInfo = mainTable.file( 'files', file_id );
                                if (fileInfo)
                                    return '<img src="'+ fileInfo.web_path+'"/>';
                                else
                                    return '<img src=""/>';
                            },
                            clearText: "Clear",
                            noImageText: 'No image',
                            ajax: APIUrl + "v1/itemimage/upload",
                        }

response after refresh:
{ "data" : [ 
      { "ImageRef" : "13a3684129126e898667b1f13b6670e1.jpg",
        "ItemId" : "5670f366-05379a-0001-de249120-50f7-081c",
        "Name" : "test",
      }
    ],
  "files" : { "files" : { "13a3684129126e898667b1f13b6670e1.jpg" : { "filename" : "EUROPA_CRESCENT_small.jpg",
              "filesize" : 45000,
              "id" : "13a3684129126e898667b1f13b6670e1.jpg",
              "system_path" : "/home/datat/public_html/editor/upload/1.jpg",
              "web_path" : "https://s3.amazonaws.com/bucket/13a3684129126e898667b1f13b6670e1.jpg"
            } } },
  "pagination" : null
}

Initially, the edit dialog would not come up at all, this turned out to be a Javascript error that came up when trying to get the .web_path field after calling the 'file' function. I check the return from 'file' before trying to use it an now the dialog comes up.

The problem is that I don't see the image coming up in the dialog. My feeling was that it was because your documentation defines the file_id as an integer.

Thanks.

Peter

pmj7

Hi

I have it going, basically not relying on the file api call at all for loading the image when bringing up the editing dialog. No changes were necessary for adding an image to a blank record (updating).

Strange that the JSON response has 'files' => 'files' => ..., not sure why we need to say what it is twice, but it does partially work that way, just not on page refresh.

                        }, {
                            label: "Image:",
                            name: "ImageRef",
                            type: "upload",
                            display: function(imageRef) {
                                console.log("display ImageRef: " + imageRef);
                                var fallbackPath = '';
                                if (imageRef)
                                    fallbackPath = itemsBaseUrl + imageRef;
                                var fileInfo = mainTable.file( 'files', imageRef );
                                if (fileInfo) {
                                    if (fileInfo.web_path)
                                        console.log("web_path: " + fileInfo.web_path);
                                    else {
                                        console.log("web_path: none");
                                        fileInfo.web_path = fallbackPath;
                                    }
                                    return '<img src="'+ fileInfo.web_path+'"/>';
                                }
                                else {
                                    console.log("no fileInfo"); // always goes here...
                                        return '<img src="' + fallbackPath + '"/>';
                                }
                            },
                            clearText: "Clear",
                            noImageText: 'No image',
                            ajax: APIUrl + "v1/itemimage/upload",
                        }, {

It is working, but it's a bit of a hack.

Peter

allan

Strange that the JSON response has 'files' => 'files' => ...,

The second parameter relates to the database table name - in this case files, but you could have it called something else, and you could also have multiple tables that contain file information.

Good to hear you have it working. I'm not sure why there wouldn't be a web_path sometimes. Is the server always returning that?

Allan

pmj7

Hi

It's not that there isn't a web_path sometimes, I see an ImageRef value on the console from the code above but mainTable.file( 'files', imageRef ) returns null. Note the comment that says "always goes here".

It would be useful to have 'files' work, then I could pass along the base image url in the JSON returned instead of it being a hard coded JS constant.

Peter

pmj7

Hi

How can I expand the 'display' function shown above, so that it can access other fields in the record? This is my plan, since the 'file' function isn't working for me.

ImageRef: a87e6a765eae9878.jpg
ImageRefUrl: http://site.com/images/a87e6a765eae9878.jpg

So to properly create the image tag, the display function for ImageRef needs to be able to access the data field 'ImageRefUrl'.

Thanks.

Peter

pmj7

Hi

It was misbehaving because I was messing up the 'files' structure. Corrected that and it worked, but still a bit awkward.

I found it easiest to just bypass the whole 'files' business when possible. I don't return the 'files' sub-structure when loading data for the page, I just include something within the 'options' that defines the base url for the page's images. I join that with the ImageRef from the record and there's your path. Way easier. Of course the itemimage/upload returns the 'files' stuff for the single new image, but that's the only bit that uses 'files'.

// pulling base url from initial ajax response (when the DataTable is defined), keep it global
if (response['options'] && response['options']['BaseImageUrl'])
    itemsBaseUrl = response['options']['BaseImageUrl'];

// revised editor definition for the ImageRef field
 {
    label: "Image:",
    name: "ImageRef",
    type: "upload",
    display: function(imageRef) {
         var imageUrl = '';
        if (imageUrl) 
            imageUrl = itemsBaseUrl + imageRef;
        return '<img src="' + imageUrl + '"/>';
     },
    clearText: "Clear",
    noImageText: 'No image',
    ajax: APIUrl + "v1/itemimage/upload",
}

Peter

allan

Good to hear you got it working. There is always more than one way to do everything :-).

Allan

pmj7

Thanks!