Answers

• allan Posts: 63,353Questions: 1Answers: 10,444 Site admin

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016 edited January 2016

  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 Posts: 63,353Questions: 1Answers: 10,444 Site admin

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016 edited January 2016

  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 Posts: 63,353Questions: 1Answers: 10,444 Site admin

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016

  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 Posts: 18Questions: 5Answers: 0

  January 2016

  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 Posts: 63,353Questions: 1Answers: 10,444 Site admin

  January 2016 Answer ✓

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

  Allan
• pmj7 Posts: 18Questions: 5Answers: 0

  January 2016

  Thanks!