Search code examples
javascriptangularjsangular-file-upload

How to detect file name exist on upload in Angular file manager


I'm using Angular File Manager In My current Angularjs App.

I want to show an error(like: file name exist) to user when upload a file with name exist in a directory.

$scope.uploadFiles = function () {

    /*******  I added these ↓↓↓ ********/
    var item = $scope.singleSelection();
    if (item) {
       var name = item.tempModel.name.trim();
       var nameExists = $scope.fileNavigator.fileNameExists(name);
       if (nameExists && validateSamePath(item)) {
          // this name is exist, so ↓
          $scope.apiMiddleware.apiHandler.error = $translate.instant('error_invalid_filename');
          return false;
       }
    }

/******* these code are exist before(your code) ↓↓↓ ********/

$scope.apiMiddleware.upload($scope.uploadFileList, $scope.fileNavigator.currentPath).then(function () {
       $scope.fileNavigator.refresh();
       $scope.uploadFileList = [];
       $scope.modal('uploadfile', true);
    }, function (data) {
       var errorMsg = data.result && data.result.error || $translate.instant('error_uploading_files');
       $scope.apiMiddleware.apiHandler.error = errorMsg;
    });
}

But in this case, I should to select an item then upload a file, means that, If I don't select a file and upload a new file with same name, error not appear. I need to detect with current file fileName that uploaded

How Can I Achieve This? Thanks in advance


Solution

  • I Solved the problem after many search and test codes.

    I Add time stamp to file name if repetitive.

    In main.js file

    function checkRepetitive(file) {
        var currentList = $scope.fileNavigator.fileList;
        var repetitive = false;
        angular.forEach(currentList, function (item, index) {
           if (item.model.name === file.name) {
              repetitive = true
           }
        });
    
        return repetitive;
    }
    
    
    // click on upload file button in upload modal
    $scope.uploadFiles = function () {
    
        angular.forEach($scope.uploadFileList, function (item, index) {
    
           if (checkRepetitive(item)) {
    
              // `morteza.jpg` => `morteza` + `new Date().getTime()).toString()` + `.jpg`
              var lastDotIndex = item.name.lastIndexOf('.');
              var fileName = item.name.substring(0, lastDotIndex);
              var extension = item.name.substring(lastDotIndex, item.name.length);
    
              // name was `read only` so, I can't change that if didn't write this ↓
              Object.defineProperty(item, 'name', {
                 writable: true
              });
    
              angular.extend(item, {'name': fileName + (new Date().getTime()).toString() + extension});
    
           } // if (checkRepetitive(item)) {
    
     });