How can i post files without ajax in angularjs on jQuery?

Question

I want to build a gallery, in which multiple images can be uploaded. I found some solution but all of them send the file immediately using ajax. But I want to post them by form submission.

I also want to show thumbnails of file which is going to be uploaded.

Is it possible?

True form submission means a page redirection which breaks the SPA, do you really really want this? The angular-file-upload directive lets you wait to upload the files and they get queued too if that's all you want. — shaunhusain
– shaunhusain, Commented Jun 2, 2014 at 4:40
Yes @shaunhusain, I need to save images after saving some other data. — Gaurav
– Gaurav, Commented Jun 2, 2014 at 4:41
github.com/danialfarid/angular-file-upload see the example code, onFileSelect you can take the for loop out of there and put it into another function that you call later, just store the array of files passed in so you call to upload them. — shaunhusain
– shaunhusain, Commented Jun 2, 2014 at 4:47
I have already checked it, but it is sending the file immediately. Am I missing something? — Gaurav
– Gaurav, Commented Jun 2, 2014 at 4:54
Yeah don't rely on the behavior you see in the demo look at the sample JS code in the link. onFileSelect is a function that is called and is passed an array of files, then it is immediately doing a for loop to upload those files, just don't do that part the same way, instead store your array that was passed in and later do the loop uploading the files — shaunhusain
– shaunhusain, Commented Jun 2, 2014 at 4:57

Gaurav · Accepted Answer · 2014-06-02 05:00:03Z

You can do this with.

<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data">
                <input type="text" name="username" ng-model="userName"/>
               <input type="file" name="image" ng-model="document.fileInput" id="file"  />
               <input type="file" name="docu" ng-model="document.fileInputTwo" id="fileTwo"  />
               <input type="text" class="col-sm-4" ng-model="document.title" id="title" />
               <button class="btn btn-primary" type="submit">
                     Submit
                </button>
            </form>

And with fallowing JS code.

$scope.uploadFile = function() {

                    var formData=new FormData();
                    console.log(file);               
                    formData.append("file",file.files[0]);
                    formData.append("docu", fileTwo.files[0]);                  
                    formData.append("name", $scope.userName);

                    $http({
                          method: 'POST',
                          url: 'rest/newDocument',
                          headers: { 'Content-Type': undefined},
                          data:  formData,
                          transformRequest: function(data, headersGetterFunction) {
                            return data; // do nothing! FormData is very good!
                        }
                    })
                    .success(function(data, status) {                       
                            alert("Success ... " + status);
                    })
                    .error(function(data, status) {
                            alert("Error ... " + status);
                    });
              };

In here, you call the uploadFile() method on button click which is form-submit. As per the thumbnail, you need to use FileReader HTML5 API.

shaunhusain · Accepted Answer · 2014-06-02 05:01:19Z

Example based on https://github.com/danialfarid/angular-file-upload

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    $scope.files = $files;
  }
  $scope.callMeLater = function(){
    var $files = $scope.files;
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        // method: 'POST' or 'PUT',
        // headers: {'header-key': 'header-value'},
        // withCredentials: true,
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files: $files for html5 only
        /* set the file formData name ('Content-Desposition'). Default is 'file' */
        //fileFormDataName: myFile, //or a list of names for multiple files (html5).
        /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */
        //formDataAppender: function(formData, key, val){}
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
      //.error(...)
      //.then(success, error, progress); 
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})// access and attach any event listener to XMLHttpRequest.
    }
    /* alternative way of uploading, send the file binary with the file's content-type.
       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. 
       It could also be used to monitor the progress of a normal http post/put request with large data*/
    // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
  };
}];

Collectives™ on Stack Overflow

How can i post files without ajax in angularjs on jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related