I tried to use POST to send some bytes using ArrayBuffer, but it seems that the request payload is always empty. Here's some code snippet:
var buffer = new ArrayBuffer(10);
var dataView = new DataView(buffer);
dataView.setInt32(0, 0x1234ABCD);
var request = {
method: 'POST',
url: 'url',
headers: {'Content-Type': 'application/octet-stream'},
data: buffer,
responseType: 'arraybuffer'
};
$http(request)
.success(function(data, status, headers, config) { ... })
.error(function(data, status, headers, config) { ... });
As I commented, to send ArrayBuffer, you need to use XHR2 directly (seems AngularJs doesn't support it). Here's some code of how to do it:
var buffer = new ArrayBuffer(10);
var dataView = new DataView(buffer);
dataView.setInt32(0, 0x1234ABCD);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.onload = function(e) {
console.log('data received');
};
xhr.send(buffer);
More details about XHR2: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-string, hope this could help for someone who's also puzzled :)
Related
I have the following ajax code that makes a POST request for a blob to the server,and prints the returned data.
function upload(blob){
var formData = new FormData();
formData.append('file', blob);
$.ajax({
url: "http://custom-url/record.php",
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
}
});
}
How can I do the same thing in AngularJS?
Instead of appending the blob to FormData, it is more efficient to send the blob directly as the base64 encoding of the FormData API has an extra 33% overhead.
var config = { headers: { 'Content-Type': undefined } };
$http.post(url, blob, config)
.then(function (response) {
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
console.log("Success", status);
return response;
}).catch(function (errorResponse) {
console.log("Error", errorResponse.status);
throw errorResponse;
});
It as important to set the content type header to undefined so that the XHR send method can set the content type header. Otherwise the AngularJS framework will override with content type application/json.
For more information, see AngularJS $http Service API Reference.
I know it has been solved here many times, but I'm still not able to get it working.
My js call is:
var data = { value: 7 };
$http.post('api/controller/method', data);
But in fiddler there is no Content-Type and no JSON data.
I want the Content-Type to be 'application/json' which should be default, right?
Thanks
var data = { value: 7 };
$http({
url: "api/controller/method",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(data)
}).success(function(data, status, headers, config) {
//some code when success post
}).error(function(data, status, headers, config) {
//some code when error post
});
Try this:
var response = $http.post('api/controller/method', data);
response.success(function(data, status1, headers, config) {
//
}
I want to downlaod exe file using $http, it shows me when I console the data, but I am unable to download it.
$http({
url: url,
method: "GET",
headers: {
'Content-type': 'application/json'
}
}).success(function (data, status, headers, config) {
console.log(data);
window.open(objectUrl);
}).error(function (data, status, headers, config) {
//upload failed
});
Any help would be appreciated.
you can Use response type like responseType: "arraybuffer"
$http({
url: url,
method: "GET",
headers: {
'Content-type': 'application/json'
},
responseType: "arraybuffer"
}).success(function (data, status, headers, config) {
console.log(data);
var file = new Blob([data], { type: 'application/binary' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
var link=document.createElement('a');
link.href=fileURL;
link.download="testing.exe";
link.click();
window.open(objectUrl);
}).error(function (data, status, headers, config) {
//upload failed
});
and use Blob and pass type "application/binary" and create a link to download it.
Given code will help you to download exe file as well as to check
browser compatibility.
var ieEDGE = navigator.userAgent.match(/Edge/g);
var ie = navigator.userAgent.match(/.NET/g); // IE 11+
var oldIE = navigator.userAgent.match(/MSIE/g);
var blob = new window.Blob([data.data], { type: 'application/x-msdownload' });
if (ie || oldIE || ieEDGE) {
var fileName="filename"+'.exe';
window.navigator.msSaveBlob(blob, fileName);
}
else {
var file = new Blob([ data.data ], {
type : 'application/x-msdownload'
});
var fileURL = URL.createObjectURL(file);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = "filename"+'.exe';
document.body.appendChild(a);
a.click();
}
//Successfully Downloaded
I'm trying to make a post call with a simple object that has this structure:
{"name": "file.txt", "file": file}
file is an object I get from an input file.
I have tried to make this call but i can't submit my object:
var elements = $element[0];
var file = elements.getElementsByTagName('input')[0].files[0];
this.fileName = file.name;
var formData = new FormData();
formData.append('file', file);
var url = 'http://localhost:8080/upload';
var config = {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
};
$http.post(url, formData, config)
.success(function(data){
$log.info(data);
})
.error(function(err){
$log.error(err);
});
Any ideas on why this isn't working?
I recently had to do something smilar, it took a lot of fenagling to get the request to go through, but this configuration finally worked for us.
sendObj.append("file", fileObj.file, fileObj.file.name);
$http({
headers: {'Content-Type': undefined},
processData:false,
method: 'POST',
cache: false,
url: sendUrl,
data: sendObj,
transformRequest: function(data, headersGetterFunction) {
return data; // do nothing! FormData is very good!
}
})
On a side note, it also took a lot of messing about on the server side so depending on what you have, you may need to do something else. This was for our Spring server.
I have an API endpoint to which I must send a multipart HTTP request, composed of two parts, file (a file system file) and data (a JSON object).
After some research I found out how to do a multipart request in AngularJS:
$http({
method: 'POST',
url: url,
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
data: model,
file: file
},
transformRequest: customFormDataObject
});
1) The customFormDataObject function initially had this form:
customFormDataObject formDataObject = function (data, headersGetter) {
var fd = new FormData();
angular.forEach(data, function (value, key) {
fd.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return fd;
};
The outcome of this implementation is that the individual parts of the request do not have a contentType set to them.
2) After reading some more (https://stackoverflow.com/a/24535293/689216) I tried using a Blob for this, the customFormData object looking like this (a bit of a mess, basically the first part will be of contentType application/json, the second one image/png):
customFormDataObject = function (data, headersGetter) {
var fd = new FormData();
var contentType = 'application/json';
angular.forEach(data, function (value, key) {
fd.append(key, new Blob([JSON.stringify(value)], {
type: contentType
}));
contentType = 'image/png';
});
var headers = headersGetter();
delete headers['Content-Type'];
return fd;
};
This second approach sets the correct contentType for each part of the request, but it does not set any values for the parts.
Basically what happens is with 1) the correct values are set in the multiparts, but the contentType's are not set. With 2) the contentType's are set, but not the values for the multiparts.
Am I missing something? Is this functionality not supposed to work like this?
Thanks!
The easiest way to upload files in Angular:
var fd = new FormData();
fd.append('file', file);
fd.append('data', 'string');
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
Absolutely essential are the following two properties of the config object:
transformRequest: angular.identity
overrides Angular's default serialization, leaving our data intact.
headers: {'Content-Type': undefined }
lets the browser detect the correct Content-Type as multipart/form-data, and fill in the correct boundary.
Nothing else worked for me! Courtesy of Lady Louthan's wonderful blogpost.
Have you tried something like this:
$httpProvider.defaults.transformRequest = function(data) {
if (data === undefined){
return data;
}
var formData = new FormData();
for (var key in data){
if(typeof data[key] == 'object' && !(data[key] instanceof File)){
formData.append(key, JSON.stringify(data[key]));
}else{
formData.append(key, data[key]);
}
}
return formData;
};
I just solve exactly the same problem.
After some tests, I had this situation that you've described:
Basically what happens is with 1) the correct values are set in the multiparts, but the contentType's are not set. With 2) the contentType's are set, but not the values for the multiparts.
To fix this problem, I had to use Blob and Post Ajax instead of $http Post.
It seems that $http does not work correctly in this case.
Code:
var formData = new FormData();
var blobId = new Blob([100], { 'type':'text/plain' });
formData.append('testId', blobId);
var blobImage = fileService.base64ToBlob(contentToDecode, 'image/jpeg');
formData.append('file', blobImage, 'imagem' + (i + 1) + '.jpg');
Request:
$.ajax({
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(response) {
deferred.resolve(response);
$rootScope.requestInProgress = false;
},
error: function(error) {
deferred.reject(error);
$rootScope.requestInProgress = false;
}
});
You can use https://github.com/danialfarid/ng-file-upload/.
In this file uploader, there is a provision for sending the file and data (in JSON format) separately as you mentioned in your question above.
For Ex:-
var upload = $upload.upload({
url: url,
file: file,
method: 'POST' or 'PUT', default POST,
headers: {'Content-Type': 'multipart/form-data'}, // only for html5
fileName: 'doc.jpg',
fileFormDataName: 'myFile',
data: {'data': model}
});
In the above code, you can send either a POST or PUT request with 'multipart/form-data', file and data object as JSON separately.
For more information you can visit the above link and look at the ReadMe.md of the plug-in.
I know that my approach is a bit different from the one that you are currently following, but the objective is same.
what i did to solve this was.
var formData = new FormData(document.getElementById('myFormId'));
then in my service
var deferred = $q.defer();
$http.post('myurl', formData, {
cache: false,
contentType: false,
processData: false,
})
.success(function (response) {
deferred.resolve(response);
})
.error(function (reject) {
deferred.reject(reject);
});
return deferred.promise;