An error occured on upload

heizler

I have the same issue as this post below. The file is saved to the database and all but I keep hitting an error when trying to return the right Json to editor.

https://datatables.net/forums/discussion/comment/225563/#Comment_225563

This is my return. I am using c# and I have tried using return Json(), returning it as a string, and JsonSerializer:

{
"files": {
"fileId": 1
}
}

allan

Hi,

Have you taken a look at the Ajax request in the browser's network inspector? That might give a clue as to what is going wrong.

Can you give me a link to the page so I can take a look? You can PM it to me if you don't want to make it public .

Allan

heizler

Hey Allan, unfortunately I can't. The application is not external. I have change the response json multiple times. Currently, this is what I have:
{
"files": {
"file": {
"fileId": 12,
"fileName": "CallEndpointwAuthHeader.PNG",
"webPath": "/ProjectInfo/Download/630"
}
}
}

My editor javascript code for the upload looks like this:

 {
     label: 'File Upload:',
     name: 'upload',
     type: 'upload',
     ajax: {
         url: addAttachmentURL, // Replace with your server-side upload endpoint
         type: 'POST',       // Use POST for file uploads
         data: function (d) {
             // Optional: Add extra data to the upload request if needed
             d.upload = $('#DTE_Field_attachmentTitle');
             d.projectId = projId;
             d.attachmentGroupId = $('#DTE_Field_attachmentGroupId').val();
             return d;
         }                
     },
     display: function (files) {
         console.log(files.file.fileId);
         return attachmentEditor.file('files', file.fileId).filename;
     },
     clearText: 'Clear',
     noFileText: 'No File Selected'
 },

The documentation is pretty vague on this particular topic. Can you help me figure this out?

By the way, I am not saving the file to the file system. I am using MemoryStream to save it directly to the database. Do I need to save it to the file system for this to work properly?

allan

The response should look something like this:

{
    "files": {
        "files": {
            "3": {
                "id": 3,
                "filename": "image.png",
                "filesize": 65164,
                "web_path": "\/uploads\/3.png",
                "system_path": "\/usr\/share\/nginx\/html\/uploads\/3.png"
            }
        }
    },
    "upload": {
        "id": "3"
    }
}

The documentation for it is available here.

The key part is the upload.id property, which Editor will look for to know what the primary key identifier for the file is. That is currently missing from your response. You also need to nest the file information in an object with the primary key's value - so your response might look something like:

{
    "files": {
        "file": {
            "12": {
                "fileId": 12,
                "fileName": "CallEndpointwAuthHeader.PNG",
                "webPath": "/ProjectInfo/Download/630"
            }
        }
    },
    "upload": {
        "id": "12"
    }
}

Allan

heizler

Hey Allan, the information you've given me has been extremely helpful and I am able to make the upload work, just not in a way that would be useful. I think the way I think it should work is not the way it is designed, so I will have to build my own file upload process. What I expect is:

1. User clicks "Choose File" > Filename is displayed to the user but the upload has not happened yet. This is important because the user may choose the wrong file and need to do the "Choose File" process over again. The way it currently works would require some process to delete the file that was just saved to the database which over complicates things.
2. User clicks "Create" > File is saved to the db with any other metadata necessary. In my case "Attachment Group".

This workflow doesn't seem possible with Editor in its current form. Would you agree? Or am I missing something?