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?

score 7 · Accepted Answer · edited Feb 02 '17 at 18:59

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},
      } 
  });
})

I don't get what does the address 'http://localhost:8080/appServer/rest/secure/domain' is for. Could you tell me please? — Roberto, Aug 19 '14 at 15:34
that is a address on my rest java server. You want to know how is composed my server method? — Silvio Troia, Aug 20 '14 at 09:07
You need to use the directive angular-file-model https://github.com/ghostbar/angular-file-model — Israel Barba, Jul 31 '15 at 18:09

upload image with jasny-bootstrap extension angularjs

1 Answers1