Remove special characters from attachment?

I'm having issues with form attachments when users attach documents with special characters that are not allowed in SharePoint. It saves a new item to my list then throws an error and does not close the form, resulting in a duplicate record.

How could I rename the attachment before save to remove any special characters, or at least use a validator to prevent submission if the attachment title has rejected charactors?

Thanks!

Hello @Gabegia,

That is strange, when uploading the file with special characters you should see an error like this:

Yes, you can submit the form, but users see the error first.

How do you open the form: in a panel or full screen? Are you using the SharePoint Attachments field or a common attachments field? Could you please make screenshots or record a short video that demonstrates the issue.

This was recently reported by a user - I'll have to dig for more info and I'll get back to you.

@mnikitina -

  • The form is opening in full screen - user is on a Mac (not sure if that would impact anything)
  • Using the SharePoint attachments field

I'll have the user record a video and will do some troubleshooting on my side, as I can't actually reproduce it (I get the expected file upload validation error). I'll post back on whatever I find out.

1 Like

@mnikitina I had the user replicate the issue. They're opening the SharePoint form in full screen, and are uploading 2 document simultaneously - an email (.eml) with a pipe character in the name, and a .pdf without special characters:

Documents uploaded without failing validation:
image

It doesn't throw any error after adding these but when he saves, it does not close the form, but submits the SharePoint record anyhow.
image

After he removes the offending file, he is able to save, which creates a duplicate SP item:

To troubleshoot, we had him just upload the failing .eml file, and he was still able to upload it without error but showed the same behavior listed above - it errored the form but still saved a new SharePoint item.

Hope this helps - let me know how else I can help!

Hello @Gabegia,

Thank you for the details!

Were you able to reproduce the issue on the form using your PC?

What browser does the client use?

Hey @mnikitina - I was not able to reproduce it on my computer (Chrome on Win 10 PC) - it automatically replaces the pipe character with an underscore on upload.

The user is using Chrome (latest release) for Mac.

Hello @Gabegia,

Thank you! I will try to reproduce the issue first and contact you.

We have issues removing files from the Doc Library when file names are long and contain certain symbols, such as [ "!@#$%^()" ]. We have a Power Automate process that copies the uploaded attachment to a designated DL. We also experience no errors and users are allowed to upload whatever file name they wish.

We place a disclaimer on the plumsail form for users to read before uploading attachments. We would like to add JavaScript to rename the upload and remove any special characters during the file upload process. How can I manage this with JavaScript?

Hello @shedev,

You can either add a custom validation for the Attachments filed to force user remove special characters:

fd.field('Attachments').validators.push({
    name: 'Attachments Validation',
    error: "remove special chatacters",
    validate: function(value) {
        const spch = /[!@#$%^()]+/;
        for (let i = 0; i < value.length; i++) {
            if (spch.test(value[i].name)) {
                return false
            }

            return true
        }
    }
}); 

Or replace the Attachments field with a List or Library control. This way you can rename files when they are uploaded to a document library, using the code:

var listOrLibrary = 'SPDataTable1';
var docLibraryTitle = 'DocumentLibraryName';
var docLibraryId = '2afe31be-ac14-49db-a0a8-bf8724bc8487';

fd.control(listOrLibrary).$on('filesUploaded',
    function(itemIds) {
        //get document library by Title
        var library = pnp.sp.web.lists.getById(docLibraryId);
        //go through each uploaded Item Id and set field values
        library.getListItemEntityTypeFullName().then(function(entityTypeFullName) {

            var batch = pnp.sp.web.createBatch();
            var currentName;
            var uri;


            for (var i = 0; i < itemIds.length; i++) {
                //specify which fields to update and how
                var itemId = itemIds[i];
                library.items.getById(itemId).select('FileRef', 'Id').get().then(function(item) {
                    return item

                }).then(function(item) {
                    uri = item.FileRef;
                    var fileID = item.Id;
                    filename = uri.substring(uri.lastIndexOf("/") + 1, uri.lastIndexOf(".")).replace(/[`~!@#$%^&*()]/gi, '');
                    var nbatch = pnp.sp.web.createBatch();
                    library.items.getById(fileID).inBatch(nbatch).update({
                        FileLeafRef: filename
                    }, "*", entityTypeFullName)
                    nbatch.execute().then(function() {
                        fd.control(listOrLibrary).refresh();
                    });
                });
            }
        });
    });

Thank you @mnikitina - the first option worked beautifully, other than the error message itself. How to I target the notification and customize it to say something more helpful to the user?

ErrorSymbols

@shedev,

Please share the code you are using.

Thank you @mnikitina. We are using this script. We added the '&' as that is the most common issue we have. Yet it does not block the upload. Rather, once a filename with '&' is uploaded, we cannot remove the file and the form errors.

//Prohibit Special Characters

fd.spRendered(function() {
fd.field('Attachments').validators.push({
    name: 'Attachments Validation',
    error: "remove special chatacters",
    validate: function(value) {
        const spch = /[&!@#$%^()]+/;
        for (let i = 0; i < value.length; i++) {
            if (spch.test(value[i].name)) {
                return false
            }
 
            return true
        }
    }
}); 

});

@shedev,

The code works correctly on my form. Are you getting any errors in the browser console(F12). Probably other code breaks validation.

@mnikitina - I bet that is correct. I am seeing some Uncaught (in promise) Errors but that is about it.

Another issue that may be involved is that we are using the Attachments control to upload the file(s) to the list, then using Power Automate flows to send those attachments with metadata to a Document Library. I wonder if we should avoid the List attachments and somehow upload directly to the DL.

In this sample illustration, the form is newly created with no attachments. The user adds some content in various fields, then attempts to upload an offending file name with an ampersand '&', then clicks a custom Save button (in orange below).

Upon clicking Save - Come Back Later, the error is thrown as expected, which is great.

ErrorAsExpected

If the user clicks Remove (x) and then attempts to Save, the error persists. The only way we have found to correct the problem requires clicking Remove (x), uploading a non-offending file name, then clicking Save - Come Back Later. I suspect the SP List is already aware of the existence of that file. The error won't clear until you provide a non-offending file name.

Is it a false assumption to think the SP List is already reading the upload? Is something else happening that you know of from your experience?

In a related matter, in a form/item without the special-character-block script in place, users upload offending file names and save successfully. Later, when the list administrators attempt to remove the offending file, the operation fails. Essentially the offending file name document is seemingly tied to the form with no way to remove or rename the file in the DL. Each time the form is opened, the attachment seems to regenerate itself in the DL. It's maddening, but also a good puzzle. My sense is that the Power Automate Flows and List Attachments are part of the equation.

I hope that offers a bit of clarity, but it may muddy the waters! Thank you as always for your wisdom.

@shedev,

From what I know, when using SharePoint Attachments field files are uploaded only after saving the item.

I was able to reproduce the problem. On my form, it happens when only one file with an invalid character is attached and it is already uploaded to SharePoint. I resolved it by adding one more condition:

fd.spRendered(function(vue) {
    fd.field('Attachments').validators.push({
        name: 'Attachments Validation',
        error: "remove special chatacters",
        validate: function(value) {
            if (value.length > 0) {
                const spch = /[&!@#$%^()]+/;
                for (let i = 0; i < value.length; i++) {
                    if (spch.test(value[i].name)) {
                        return false
                    }

                    return true
                }
            }
            return true
        }
    });

});

@mnikitina -

Thank you for the added condition. Appreciated. As you say, files already uploaded in the forms cause great trouble for our administrators. In the first video example, you can see that we are unable to remove invalid file-named files from the forms. I am trying to remove the file named Test&SomethingsWritingALongtitle.pdf and then perform a Save.

Do you have knowledge of this experience and how we might resolve the matter?

In the second video example, we have a form with a good file name, previously uploaded. When we revisit the form and attempt to upload an invalid file name and it is allowed, which then creates the same problem as the first video.

We have explored the "Library or List Control" to avoid this issue, but we have no elegant way to add metadata from the list to the file in the Document Library to relate the uploaded file directly to the item itself. In the third video sample, I have a Document Library upload field above the Attachment upload field. The DL control allows us to delete bad filenames. The Attachments control prohibits us from deleting bad filenames. BUT - the ampersand is still allowed to upload.

@shedev,

Thank you for the videos!

"item cannot be modified because the site is on hold or retention policy" is related to SharePoint settings, not to Plumsail Forms. Please see this posts on how to resolve it:

no elegant way to add metadata from the list to the file in the Document Library to relate the uploaded file directly to the item itself.

To relate files to List item, you need to create a lookup column in the Document library. Please find the instructions in our documentation: How to create SharePoint form with associated items or documents