file upload - how to update row with returned file id?

louking

I am trying to create an Editor form which has a file upload, and after the file upload completes I want a field in the table for this row to be updated with the returned id for the file.

I've read https://editor.datatables.net/manual/server#File-upload and https://editor.datatables.net/reference/field/upload, and I am a little murky on how to make the association with the row's id.

If I understand correctly, the file upload happens asynchronously of the (say) create form which contains the file select field. Yet after the upload completes, I need to update the newly created row in the table with the file's id. Alternately the user may not have clicked on the Create button by the time the file upload completes, so the handling for that isn't clear to me either.

Finally (and maybe this should be a separate question), when upload occurs from the update form I'd like to replace the original file, and therefore would need to see the file's original id in the request from the client. (I'm storing these files on google drive)

Possibly I am just not understanding the documentation. Must the ajaxData option be used? I see in https://editor.datatables.net/reference/field/upload examples that fileId can be used for rendering, but don't see how that variable is initialized.

allan

I want a field in the table for this row to be updated with the returned id for the file.

Do you just want to show the file id in the table? Set the columns.data property for the column you want to show it in, to whatever the name of the property holding the id is - e.g. data: 'staff.pictureId'.

Alternately the user may not have clicked on the Create button by the time the file upload completes, so the handling for that isn't clear to me either.

This is called an orphaned file in Editor. The PHP and .NET libraries have methods to handle this - documented here.

when upload occurs from the update form I'd like to replace the original file

That isn't really something that Editor's upload does. You could use a custom upload action to overwrite a file, rather than simply moving it around, but you'd also need to use the ajaxData option of the upload option to add the original id.

Alternatively, use the orphaned record approach and simply delete the old file if it is no longer needed.

Allan

louking

I guess I don't understand the flow completely.

I think in my upload method on the server (python, but will look at the php for guidance), I can use id to get the id of the row which will be associated with the file.

One thing I didn't mention is that the contents of the file will be used to determine values for other fields in the table. In my case, this is a file of gpx coordinates of a running route. The distance for that route will be calculated during the upload and then I'll set that value into the correct field.

But on the server when the upload completes I don't know the rest of the contents of the row, so I'm not sure I can create the row id at that time. I guess I can return the fields which are updated (including fileID and distance) -- and these will be stored in the create window. Then I hope when the user clicks Create then all the fields are sent to the server.

Does the javascript above DataTables/Editor need to handle the event when the upload finishes? If this is a create, the create response normally carries the id and the data for the row. Can the create with upload be handled the same way?

I'll do some experimentation based on what I can glean from the documentation and report back with more questions or my new understanding.

louking

Hmm. I have been able to update fields other than the upload select "Choose file..." by setting proprietary json on the server, catching uploadXhrSuccess and using https://editor.datatables.net/reference/api/set() within the event handler, but have not yet figured out how to update the Choose file... text with the filename after my file uploads. I'll keep experimenting, but if you see this and have the easy answer before I figure it out, would love to save some time.

Thanks again for this wonderful package -- saves me so much work and is very configurable to whatever I seem to need.

louking

Here is the source of my confusion:

https://editor.datatables.net/reference/field/upload seems to indicate render option should be used under Editor fields and doesn't mention display option other then showing it in the example. But render function doesn't seem to get called during file upload process. After some messing around I learned display function does get called and can be used to indicate the filename (e.g.). https://editor.datatables.net/manual/upload also mentiones 'display'

BTW, the display for options and other reference items seems to have changed to full width buttons. I liked the smaller buttons from before, and suspect this was inadvertent. E.g., see https://editor.datatables.net/reference/option/

allan

and suspect this was inadvertent

Yup! Total mistake. I'll be correctly it shortly.

https://editor.datatables.net/reference/field/upload seems to indicate render option should be used under Editor fields and doesn't mention display option other then showing it in the example

I fear this is a bug in the documentation that is causing the issue here. It should be called display there and not render. That I'll fix shortly as well!

Allan

louking

I see the fix for display at https://editor.datatables.net/reference/field/upload but not for the buttons in the reference docs. Clearly you've been busy today, though, as I see there is a new release of Editor and several other packages.

BTW (and sorry to poke), you might consider reordering the options at https://editor.datatables.net/reference/field/upload as now they are not in alphabetical order (it's a little jarring to my obsessive compulsive nature).

What a pain I am, eh?

allan

but not for the buttons in the reference docs

Yup - not got to that yet. Its next in the queue!

Good point about the ordering! I'll get that automated.

Allan

louking

Still murky about how the files database within the DataTables/Editor system is initially built. I see in https://editor.datatables.net/manual/server#DataTables-parameters that there's a files parameter, which I assume can be used when instantiating the DataTables object, e.g., _dt_table = $('#datatable').DataTable ( options=dtopts, files=dtfiles ), but I don't see this anywhere else in the documentation. I also can't quite figure this out by looking through the code.

Is there some place which shows the signature for DataTable()? Or an example of how files database is initially created?

Maybe this happens in Editor somewhere? Looking through the Editor code I see several references to Editor.files, but this seems to be only initialized through ajax rather than at initialization, and then I think only when upload is done. Note I am user server processing only for the Editor functionality -- the initial table is defined through DataTables data, and therefore it would be convenient to have the associated files created at initialization as well.

I'm sure I'm missing something and will continue to experiment.

allan

that there's a files parameter, which I assume can be used when instantiating the DataTables object, e.g.,

Not quite I'm afraid. DataTables only accepts a single parameter (a configuration object). Instead, the files object is in the JSON returned by the server in response to the initial DataTables request.

If you load up this example and upload a file to one of the records. Then refresh the page, and you'll be able to see the JSON returned from the server looks like this:

{
  "data": [
    ...
  ],
  "options": [],
  "files": {
    "files": {
      "1": {
        "id": "1",
        "filename": "car.jpg",
        "filesize": "4566",
        "web_path": "/upload/1.jpg",
        "system_path": "/home/datat/public_html/editor/upload/1.jpg"
      }
    }
  }
}

Basically its just the information that is described by the db() method in the server-side libraries, allowing access to it via the file() method (table and id lookup).

Regards,
Allan

louking

Yes, I figured out how an uploaded file gets into the database, but I don't see how the database is initialized with files that are referenced with current records.

Instead, the files object is in the JSON returned by the server in response to the initial DataTables request.

Does this mean the files object can only be created when using server side processing? Again, I'm initializing the table through data option, so would like files to be initialized at this time as well.

allan

the initial table is defined through DataTables data, and therefore it would be convenient to have the associated files created at initialization as well.

Sorry - I completely missed that bit in my initial reply. There isn't actually an option to set that at the moment via the API. You can write to it directly using $.fn.dataTable.Editor.files though - that's the data point that the file() method uses to get the details and the file property of the JSON object returned by the server (if you were using Ajax) gets written to.

Allan

louking

Perfect, thanks!