Discover Refinitiv
MyRefinitiv Refinitiv Perspectives Careers
Created with Sketch.
All APIs Questions & Answers  Register |  Login
Ask a question
  • Questions
  • Tags
  • Badges
  • Unanswered
Search:
  • Home /
  • Alpha /
avatar image
Question by naiyar88 · Sep 04, 2017 at 10:01 AM · javascriptangularjs

How to create File object in AngularJS ?

In javascript it is very simple to create file object just like that :

var assetLocalPath="C:/Users/Pictures/flower..jpg";

var file = new File([""],assetLocalPath);

alert(file);

It will alert [object File]

Same as above I would like to create in AngularJS, but I am getting an error " TypeError: File constructor cannot be called in nwdisabled frame "

Please suggest.

People who like this

0 Show 0
Comment
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

5 Replies

  • Sort: 
avatar image
REFINITIV
Best Answer
Answer by wasin.waeosri · Sep 04, 2017 at 11:12 PM

Hello @naiyar88

Is you AngularJS question related to any Thomson Reuters APIs/Products? If it is related to the pure AngularJS, I suggest you post the question in Angular JS community or Stack Overflow which are more appropiete place.

Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

avatar image
Answer by Amar · Dec 15, 2017 at 06:22 AM

Hi Naiyar88,

Are you trying to upload a file?

Use <input type="file">

I'm currently using angular-material-fileinput so the code looks a bit different but it does use <input type="file"> under the hood so I think you can figure it out:

// upload.html
// left out code for brevity
 <lf-ng-md-file-input lf-files="vm.filesToUpload"> </lf-ng-md-file-input>

// upload.controller.js
// left out code for brevity
(function() {

  "use strict";

  angular.module('Contracts').controller('UploadController', UploadController);

  UploadController.$inject = [
    'FileProviderService',
  ];
  function UploadController(FileProviderService) {
    var vm = this;

    vm.filesToUpload = [];
    vm.submit = submit;

    function submit() {
      FileProviderService.uploadFile(vm.filesToUpload, function(response) {
          // do stuff if success
        },
        function error(err) {
          // do stuff if error
        })
    }

  }

})();
// file-provider.service.js
// left out code for brevity
(function() {

  "use strict";

  angular.module('Services').factory("FileProviderService", FileProviderService);

  FileProviderService.$inject = [
    '$resource',
    'ENV_VARS'
  ];

  function FileProviderService($resource, ENV_VARS) {
    var url = ENV_VARS.FILE_PROVIDER_SERVICE_URL;
    var Resource = $resource(url, {}, {

      uploadFile: {
        method: 'POST',
        url: url + '/path',
        headers: {
          'Content-Type': undefined
        },
        transformRequest: function(data) {
          var formData = new FormData();
          angular.forEach(data, function(fileObj, index, files) {
            formData.append("filesToUpload", fileObj.lfFile);
          });
          return formData;
        }
      }
      // ******************************************* //
      // more file provider methods defined down here
      // ******************************************* //
    });

    return Resource;
  }

})();

Thank you

Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

avatar image
Answer by kumrravi89 · Jan 28, 2019 at 08:30 AM

First we write the directive to gain access to the file object in our controller. In the snippet below, file-model is an attribute on a file input element, and its value is the name of the variable in our controller’s scope that binds to the file object.

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

In the link function of the above directive, we listen for changes to the content of the input element and change the value of the variable in the scope accordingly. This is achieved using the $parse service to set the value in our scope. The markup required in the view for the directive to work is simple:

<input type="file" file-model="myFile"/>

Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

avatar image
Answer by meenatibiswalcynixit · Dec 19, 2019 at 04:58 AM

To have the file upload input handle the selection change event, what I had to do is use angular.element() to query the hidden file upload input and assign an event-handling method to it:

angular.element("#fileUploadField").bind("change", function(evt) { if (evt) { ... } });

Also, follow us https://www.codeproject.com/Articles/5163873/Upload-File-with-AngularJS-using-ngResource



Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

avatar image
Answer by patilpal34 · Jul 20, 2020 at 12:56 PM

There is an input control available in HTML that does this. I know. What I need is not this predefined input control. What I need is a readonly text field, and a button grouped together. The button can be clicked and pops up the File Open dialog so it can be used to select a file. The text field will display the file name. With Bootstrap, this is very easy to define:

<div class="input-group">

<input type="file" id="fileUploadField" style="display: none;">

<input type="text" id="fileNameDisplayField" class="form-control"


ng-model="vm.uploadFileName" placeholder="File to Upload" readonly="readonly">

<div class="input-group-addon btn btn-default"


ng-click="vm.clickSelectFile()"><i class="glyphicon glyphicon-file"></i></div>

</div>

In the code snippet above, there are some attributes specific for AngularJS. You can ignore these for now. The outer <div> element has CSS class "input-group". It can smash multiple input control into one. With the above code snippet, it will create an input control


Comment

People who like this

0 Show 0 · Share
10 |1500 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Watch this question

Add to watch list
Add to your watch list to receive emailed updates for this question. Too many emails? Change your settings >
11 People are following this question.

Related Questions

how to upload and download excel file on client side local folder in angularjs?

  • Feedback
  • Copyright
  • Cookie Policy
  • Privacy Statement
  • Terms of Use
  • Careers
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Alpha
  • App Studio
  • Block Chain
  • Bot Platform
  • Calais
  • Connected Risk APIs
  • DSS
  • Data Fusion
  • Data Model Discovery
  • Datastream
  • Eikon COM
  • Eikon Data APIs
  • Elektron
    • EMA
    • ETA
    • WebSocket API
  • Legal One
  • Messenger Bot
  • Messenger Side by Side
  • ONESOURCE
    • Indirect Tax
  • Open PermID
    • Entity Search
  • Org ID
  • PAM
    • PAM - Logging
  • ProView
  • ProView Internal
  • Product Insight
  • Project Tracking
  • Refinitiv Data Platform
    • Refinitiv Data Platform Libraries
  • Rose's Space
  • Screening
    • Qual-ID API
    • Screening Deployed
    • Screening Online
    • World-Check One
    • World-Check One Zero Footprint
  • Side by Side Integration API
  • TR Knowledge Graph
  • TREP APIs
    • CAT
    • DACS Station
    • Open DACS
    • RFA
    • UPA
  • TREP Infrastructure
  • TRIT
  • TRKD
  • TRTH
  • Thomson One Smart
  • Transactions
    • REDI API
  • Velocity Analytics
  • Wealth Management Web Services
  • World-Check Data File
  • Explore
  • Tags
  • Questions
  • Badges