Ng file upload with another data

Question

I want to add my uploaded file by ng-file-upload to another data which i sending to my Java backend. I wondering how to do it, when I have to put url in my .upload. In this case that can't work cause sendMail sending firstly file, next the text data. How can I fix it?

$scope.sendMail = function(){   

$scope.uploadFiles = function(file) {
    $scope.attach = file;
    file.upload = Upload.upload({
        data: {file: file} 
    });
}

$scope.emailData = new EmailData();
$scope.emailData.to = "myMail@a.com";       
$scope.emailData.from = "yourMail@a.com";
$scope.emailData.type = "TYPE";
$scope.emailData.title = $scope.data.title;
$scope.emailData.descr = $scope.data.description;
$scope.emailData.template = "template";
$scope.emailData.file = $scope.attach;

$http.post("sendemail", $scope.emailData, {headers: {'Content-Type': 'application/json'} })
.then(function (response) {         
    $scope.succes =  true;
},
function(fail) {
    $scope.error = true;
});
}

I want to send my file (uploaded with the ngfile-upload) with another data in the same time by one request. — Kondziowsky, Sep 05 '17 at 07:25

score 1 · Answer 1 · answered Sep 05 '17 at 07:23

1

use content-type: multipart form/data & make use form-data; have a look at this link https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

answered Sep 05 '17 at 07:23

johnjerrico

143
1
9

So, for example, can I just add something like that before .post: 'var fd = new FormData(); fd.append('file', $scope.attach); fd.append('data', angular.toJson($scope.emailData));' add add fd into http post? – Kondziowsky Sep 05 '17 at 07:35
yes, this might help you better, https://stackoverflow.com/questions/35722093/send-multipart-form-data-files-with-angular-using-http – johnjerrico Sep 05 '17 at 07:59

score 1 · Accepted Answer · answered Sep 05 '17 at 07:33

this is example from ng-file-upload Github

$scope.upload = function (file) {
    Upload.upload({
        url: 'upload/url',
        data: {file: file, 'username': $scope.username}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

as you see you can send what you want inside data

Ng file upload with another data

2 Answers2