Remove special characters from uploaded filename before inserts to database and file folder

Jorm

First things first: I'm on Editor 2.0.8, .NET....

I'm using Editor's 'uploadMany' to afford users the ability to link files to database records. Uploaded files with specific special characters (e.g. '#' or '+') in the file name result in the file not being viewable in a browser (get '.CheckSuspiciousPhysicalPath' error thrown when file hyperlink is clicked, and a 'file not found' browser error). I'd like to strip all special characters from the file name before that file info hits the database and server folder location, but am having a hard time figuring out how to do that. I've spent a few days now poking around various threads, but am not finding examples explicit enough for my skillset. Or, perhaps I'm going at it all wrong and there's a completely different way to fix this problem (other than asking users not to use special characters in the file name...)?

I'm guessing I need to use 'ajaxData' somehow to intercept the file name before that info gets sent to the server? If so, some help on how to code that is greatly, greatly appreciated. Below is the editor field in question, type 'uploadMany':

 {
   name: "RfiAttachments[].RatDBid",
   type: "uploadMany",
   display: function (fileID) { 
           fileID = fileID.toString();
           return '<img src="' + editor.file('RfiAttachments', fileID).RatUrl + '"/><span>  ' + 
                editor.file('RfiAttachments',fileID).RatName + '</span>';
                },
    ajaxData: function (e, name, file, data) {
            var newName = name.name.replace(/[&\/\\#,+()$~%@@'":*?<>{}]/g, '');
                 ** .....[something here?...]**
                 },

... and here's the relevant controller code where I use an MJoin:

.MJoin(new MJoin("RfiAttachments")                      
     .Link("Rfis.RfiDBid", "RfiAttachmentsLink.RfiID")
     .Link("RfiAttachments.RatDBid", "RfiAttachmentsLink.FileID")
     .Field(new Field("RatDBid")                              
        .Upload(new Upload("[explicit server path here]" + @"__ID_____NAME____EXTN__")
                 .Db("RfiAttachments", "RatDBid", new Dictionary<string, object>
                        {
                          {"RatFullPath", Upload.DbType.SystemPath},
                          {"RatUrl", '\\' + @"RfiImages\__ID_____NAME____EXTN__"},
                          {"RatSavedFileName", @"__ID_____NAME____EXTN__"},
                          {"RatName", Upload.DbType.FileName},
                          {"RatSize", Upload.DbType.FileSize},
                          {"RatType", Upload.DbType.ContentType },
                          {"RatRfiID", Request.Form["RfiDBid"]},
                       })
                 )))

allan

in the file name result in the file not being viewable in a browser (get '.CheckSuspiciousPhysicalPath' error thrown when file hyperlink is clicked, and a 'file not found' browser error)

Do you just need to URL encode the link address? That would seem like a better solution than modifying the file name.

Allan

Jorm

Thank you Allan for the quick feedback and general guidance. I've implemented 'encodeURIComponent' and that's helped, but I'm having problems with files that have a '+' in the file name: getting a 'double escaped' error. I found some info on StackOverflow that I think applies to my case in terms of the '+' sign problem, indicating I can allow double escaping, but it's a security risk:(https://stackoverflow.com/questions/7739233/double-escape-sequence-inside-a-url-the-request-filtering-module-is-configured).

So now I'm back on to this idea of sterilizing the actual file name before it hits the database and before the file is stored in a folder on the server.

Would this be possible through 'preUpload'? I've got the below and can see the modified file name, just no idea how to inject it in to the upload event:

answerEditor.on('preUpload', function (e, name, file, data) {
                    
                    var newName = file.name.replace(/[&\/\\#,+()$~%@@'":*?<>{}]/g, '');
                    console.log(newName)
                    console.log(data)
                    console.log(name)

                   <<<something here....?>>>

                    return true;
                })

Possibly relevant info regarding the file link(s) is that I've got it/them in a function-rendered child row (using responsive) as below:

function RFIsformat(d) {
                var rows = '';
                var i;
                for (i = 0; i < (d.RfiAttachments.length); i++) {

                    var fileID = editor.file('RfiAttachments', id = d.RfiAttachments[i].RatDBid).RatDBid;
                    var fileName = editor.file('RfiAttachments', id = d.RfiAttachments[i].RatDBid).RatName;
                    var fileType = editor.file('RfiAttachments', id = d.RfiAttachments[i].RatDBid).RatType;
                    var fileLink = editor.file('RfiAttachments', id = d.RfiAttachments[i].RatDBid).RatSavedFileName;

                    fileID = fileID.toString();
                    fileLink = fileLink.trim();
                    fileName = fileName.trim();
                    fileType = fileType.trim();

    // Encode special characters for browser functionality
                    fileLink = encodeURIComponent(fileLink);

                    rows = rows + '<tr><td><a href="/RfiImages/' + fileLink + '" target="_blank">' + fileName + '</a></td></tr>'

  return '<div class="flexrow">' +  
----more html here and then the HTML that returns file link data:
 '<div class="tableDiv"><table style="width:100%">' + rows + '</table></div>'