how to parse and trim multiple file names with angular

Question

I am using Angular-Upload to submit files. I need to extract 2 sections of the file name to use as the formData that is going back to the api controller. The files are currently named mm/yyyy PipeName PipelineLocation.pdf I need to actually remove the date and then add the PipeName to 'pipeName': '', and then the PipelineLocation to 'locationName': '' The sample files I am using are named '02-2011 P3D4LB38A2 DDEC33D.pdf' and '11-2008 ED34PL89G5 23FFWC580.pdf'

I can see the arrays with the name property but I do not know how to access it. Array from the view Plunker

app.controller('MainCtrl', function($scope, $upload) {
  $scope.$watch('files', function () {
    $scope.upload($scope.files);
  });



$scope.result={};
   $scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            $upload.upload({
                url: '/api/apiBatchPipeLine',
                fields: {

                    'typeId': 1,
                    'companyId': $scope.companyId.CompanyId,
                    'documentDate': $scope.model.documentDate,
                    'companyName': $scope.CompanyName,
                    'pipeName': ,
                    'locationName': ,
                    'typeName': 'Pipeline Reports'
                },
                file: file
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                  console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
            }).success(function (data, status, headers, config) {
                console.log('file ' + config.file.name + 'uploaded. Response: ' +
                            JSON.stringify(data));
            });

        }
    }
  };
});

UPDATE Error

TypeError: undefined is not a function
at l.$scope.upload (https://localhost:44300/MyScripts/Controllers/BatchSubmit/batchSubmitPipesController.js:68:31)
at Object.fn (https://localhost:44300/MyScripts/Controllers/BatchSubmit/batchSubmitPipesController.js:55:16)
at l.$get.l.$digest (https://localhost:44300/Scripts/angular.min.js:123:445)
at l.$get.l.$apply (https://localhost:44300/Scripts/angular.min.js:126:362)
at bg.$$debounceViewValueCommit (https://localhost:44300/Scripts/angular.min.js:219:34)
at bg.$setViewValue (https://localhost:44300/Scripts/angular.min.js:218:263)
at https://localhost:44300/Scripts/angular-file-upload-all.min.js:2:1349
at https://localhost:44300/Scripts/angular.min.js:138:513
at e (https://localhost:44300/Scripts/angular.min.js:40:339)
at https://localhost:44300/Scripts/angular.min.js:44:375

line 68

 if (file.name.test(regex)) { // used to validate the filename

line 55

 $scope.$watch('files', function (files) { // this can be simplified like so.
    $scope.upload(files);

Update PICS

No, don't know anything about it. Can you show me what you are referring to — texas697
– texas697, Commented Mar 4, 2015 at 3:47
Given: 02-2011 P3D4LB38A2 DDEC33D.pdf what is the filename that you're expecting? — dmcqu314
– dmcqu314, Commented Mar 4, 2015 at 4:19

dmcqu314 · Accepted Answer · 2015-03-05 17:07:23Z

1

You can use a regular expression to extract the wanted parts of your filename:

A regular expression that will accomplish this could be something like:

^\d+\D\d+\s*(\S*)\s*(\S*)\..*$

This is looking for any sequence of numbers followed by a non number followed by any sequence of numbers. Then followed by all whitespace, then by a sequence of non-spaces (your pipename) then followed by whitespace and another sequence of non spaces (your locationname). Finally the last tidbit is to make sure it matches a filename extension.

app.controller('MainCtrl', function($scope, $upload) {

  var regex = /^\d+\D\d+\s*?(\S*)\s*(\S*)\..*$/i;

  $scope.$watch('files', function (files) { // this can be simplified like so.
    $scope.upload(files);
  });

$scope.result={};
   $scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];

            if(regex.test(file.name)) { // used to validate the filename
                var matches = file.name.match(regex);

                $upload.upload({
                    url: '/api/apiBatchPipeLine',
                    fields: {

                        'typeId': 1,
                        'companyId': $scope.companyId.CompanyId,
                        'documentDate': $scope.model.documentDate,
                        'companyName': $scope.CompanyName,
                        'pipeName': matches[1],
                        'locationName': matches[2],
                        'typeName': 'Pipeline Reports'
                    },
                    file: file
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                      console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' +
                                JSON.stringify(data));
                });
            }
        }
    }
  };
});

edited Mar 5, 2015 at 17:07

answered Mar 4, 2015 at 4:29

dmcqu314

87511 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dmcqu314 Over a year ago

Can you verify that file.name exists? If that property is undefined this would fail.

texas697 Over a year ago

just added 3 screenshots

dmcqu314 Over a year ago

ah, sorry about that was a typo. I updated the answer.

Collectives™ on Stack Overflow

how to parse and trim multiple file names with angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related