I am going to walk you through a handy code snippet which can be used in case you wish to rename a file while uploading it to the file upload control and before it is uploaded to the target repository. This would be a rare scenario as most of the times users just want to see the same file name in target repository as what they selected from their local drive.
However if you did have a need of appending some metadata from other field on the form or may be a computed value like date time at the end of the file, following code snippet will help you achieve exactly that
Inject following JavaScript if the form level JavaScript editor. This is just a sample snippet and should be modified for better exception handling as well as allowing to rename multiple file if required. In my sample, I am going to just rename one file and append current date at the end.
// The current set on JavaScript works on the control of type file i.e. it assumes you have one file upload control only. If you have multiple file upload control, modify the JQuery selector to get the desired control by id
$(document).on(“change”, ‘input[type=”file”]’, function(e)
{
var _uploadControl = e.currentTarget;
if (_uploadControl.files && _uploadControl.files.length)
{
// If you have more than one files to be renamed, change the code accordingly
var _uploadedFileName = _uploadControl.files[0].fileName;
var _currentDate = getCurrentDate();
var _endingWithCurrentDate = “_” + _currentDate;
if (_uploadedFileName.lastIndexOf(_endingWithCurrentDate) < 0)
{
_uploadControl.files[0].fileName = _uploadedFileName.substring(0, _uploadedFileName.lastIndexOf(“.”)) + “_” + _currentDate +
_uploadedFileName.substring(_uploadedFileName.lastIndexOf(“.”), _uploadedFileName.length);
}
}
});
function getCurrentDate()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10)
{
dd = ‘0’ + dd
}
if (mm < 10)
{
mm = ‘0’ + mm
}
today = mm + ‘-‘ + dd + ‘-‘ + yyyy;
return today;
}
The append() method of FormData accepts a third optional filename parameter.
Thanks for your detailed article to change/update upload file control’s selected file name.
I implemented your code and unfortunately, it didn’t work for me. I have been trying to add a prefix to the selected file before uploaded to the target repository.
Appreciate your help.
I just tried this in AgilePoint NX 7.0 SU2.5 and it did work for me. Please make sure, you are not directly copying and pasting the script as is because the blog webpage converts quote character to something else. Please paste it in notepad and correct all quote characters before you paste it in the your script editor else you would notice that they are not recognized by script editor as valid characters. That might be the issue in your app.
I know this is a pretty old blog post but hoping I can get a reply! AgilePoint support actually directed me to this blog post because I am having an issue where users are uploading files that have special characters in the file name. And while these special characters, semicolon (;) and hash-tag (#), are accepted by Windows, they are causing problems in later steps of the process. So I needed a way to examine the file names and replace the special characters before they are uploaded to the file system.
The script provided here works wonderfully. One question I have is in regards to if the file upload control allows more than one file to be uploaded. I noticed in your script that when you are getting the uploaded file name you are referencing index 0 of the upload control which would indicate the first instance of the file upload repeating element.
What I have found in my testing is that if I upload files one at a time, then the script works as is. Each file uploaded gets examined and renamed. But if I upload several files at once (by using the CTRL or SHIFT click options in the explorer window) then only the first file selected gets renamed. I assume this is what you are referring to in the script comment ” If you have more than one files to be renamed, change the code accordingly”.
I’m not exactly sure how I would go about doing that. Would I have to setup some kind of loop to increment through all the possible occurrences of the upload control? For instance, if my file upload control allows five files to be uploaded, would I need to setup a loop that executes five times for each file uploaded? I would think that might cause problems if the user only updated three files.
Loren,
Yes, it is a very old blog post and actually in upcoming AgilePoint NX v7.0 SU2.6 and AgilePoint NX v8.0 release, there is a new form event called “preUpload” where you could write all the logic of blocking file name character, renaming them etc. Release is just round the corner for v7.0 SU2.6 i..e 1-2 weeks away so you could take advantage of that feature.
For now, since you needed a script which would have handled multiple files, I am pasting it for your reference. Feel free to make changes according to your needs
Note: Please make sure, you are not directly copying and pasting the script as is because the blog webpage converts quote character to something else. Please paste it in notepad and correct all quote characters before you paste it in the your script editor else you would notice that they are not recognized by script editor as valid characters.
$(document).on(“change”, ‘input[type=”file”]’, function (e) {
var _uploadControl = e.currentTarget;
if (_uploadControl.files && _uploadControl.files.length) {
// If you have more than one files to be renamed, change the code accordingly
for (var fileIndex = 0; fileIndex < _uploadControl.files.length; fileIndex++) { var file = _uploadControl.files[fileIndex]; var _uploadedFileName = file.fileName; var _currentDate = getCurrentDate(); var _endingWithCurrentDate = "_" + _currentDate; if (_uploadedFileName.lastIndexOf(_endingWithCurrentDate) < 0) { file.fileName = _uploadedFileName.substring(0, _uploadedFileName.lastIndexOf(".")) + "_" + _currentDate + _uploadedFileName.substring(_uploadedFileName.lastIndexOf("."), _uploadedFileName.length); } } } }); function getCurrentDate() { var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '-' + dd + '-' + yyyy; return today; } Hope this helps.