upload image with jasny-bootstrap extension angularjs

Question

Did Someone try to upload a image in angularjs with jasny-bootstrap extension?

I use http://jasny.github.io/bootstrap/javascript/#fileinput

That's the code

<div class="fileinput fileinput-new" data-provides="fileinput">
            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
            <div>
              <span class="btn btn-default btn-file">
                <span class="fileinput-new">Select image</span>
                <span class="fileinput-exists">Change</span>
                <span class="fileinput-upload" ng-click="">Upload</span>
                <input type="file" name="...">
              </span>
              <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
            </div>
          </div>

I want to upload a file selected on the server when click Upload.

Some advice?

Scott Edwards · Accepted Answer · 2017-02-02 18:59:10Z

7

To use this methodology, you will need the following module: https://github.com/ghostbar/angular-file-model

that works fine

in view html file:

    <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                <div>
                  <span class="btn btn-default btn-file">
                  <span class="fileinput-new">Select image</span>
                  <span class="fileinput-exists">Change</span>
                     <input type="file" name="file" file-model="compose.myFile">
                  </span>
                  <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
              </div>

in a controller

    var file = new FormData();
    var file1 = $scope.compose.myFile;
    file.append('file',file1);
    PubServices.save(file, function(data) {
                     .....
          }, function(error){
            console.log(error);
          });

And Service

angular.module('App')
  .service('PubServices', function ($resource) {
    return $resource(
      'http://localhost:8080/appServer/rest/secure/domain', 
      {file:'@file'}, 
      { 
      save: { 
        method: 'POST', 
        params: {file:'@file'},
        transformRequest: angular.identity,
        /* Note the headers property */
        headers: {'Content-Type': undefined},
      } 
  });
})

edited Feb 2, 2017 at 18:59

Scott Edwards

351 silver badge8 bronze badges

answered Apr 18, 2014 at 16:56

Silvio Troia

1,45920 silver badges36 bronze badges

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

3 Comments

Roberto Over a year ago

I don't get what does the address 'localhost:8080/appServer/rest/secure/domain' is for. Could you tell me please?

Silvio Troia Over a year ago

that is a address on my rest java server. You want to know how is composed my server method?

Israel Barba Over a year ago

You need to use the directive angular-file-model github.com/ghostbar/angular-file-model

Collectives™ on Stack Overflow

upload image with jasny-bootstrap extension angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related