使用Angular ngf-select上传名称中具有特殊字符的文件

Question

I am working on Angular2 application with spring boot in back-end. In application there is feature to upload file on server. The code to upload file working fine.

I am using ngf-select to choose file. It works well when file name is without special characters.

<input type="file" name="file" ng-model="obj.fileModel" ngf-select accept="file_extension">

The problem occurs when I choose file having special character like my name neelam shrma @@ !! %%% ggg %.json

Upload js code is :

var formData = new FormData();
formData.append("fileObj", obj.fileModel);
UploadFile.save(formData, onUploadSuccess, onUploadError);

As file obj.fileModel having File object with special character name, so it do not call resource method to upload file

Also I have tried by updating the file name withe encoding, but as file object is read-only, so won't allowing me to change the name, also created new file object with encoded file name, but didn't worked.

Resource Method :

public boolean uploadMyFile(MultipartFile mpfile) throws IOException {
...
....
 File file = new File(myFolder + File.separator + file.getOriginalFilename());               
 mpfile.transferTo(file);
......
......
}

So the file having special character not calling my resource method : uploadMyFile(..) and throwing 500 server error.

How to resolve the issue of uploading file having special character using angularJs ngf-select?

Answer 1

Add a filter as below

.filter('decodeURL', function () {
    return function (text) {
        if (text) {
            return window.encodeURIComponent(text);
        }
    }
});

and below html

<img src="{{itemDetails.LargeImageName | decodeURL}}" />