Pending POST Request - AngularJS to Laravel - angularjs

I am sending a simple post request from AngularJS to Laravel API containing a name and an image. The problem is when I submit the request, it becomes pending for a long time. I have checked the code but I do not think there's anything which causes the request to take that much time.
I am using ng-file-upload and here's what I am doing in the Angular side:
service.store = function(hotel){
console.log('uploading..');
return Upload.upload({
url: 'api/hotels',
method: 'POST',
fields: hotel,
file: [hotel.logo],
fileFormDataName: 'file[]',
headers:{
'Content-Encoding': 'gzip'
}
}).success(function (response){
console.log(response)
service.result = response;
}).error(function (response){
service.errors = response;
});
};
and for the Laravel side:
try{
$hotel = new Hotel;
$hotel->name = $request->name;
$hotel->booking_availability = 0;
$hotel->save();
$slug = str_slug($request->name, "-");
$hotel->slug = $slug."-".$hotel->id;
$hotel->save();
if(isset($_FILES['file'])){
$type = explode("/", $_FILES['file']['type'][0]);
$name = date_timestamp_get(date_create()) . "." . $type[1];
$target = 'img/hotels/logo/original/'.$name;
$tmp_name = $_FILES['file']['tmp_name'][0];
move_uploaded_file($tmp_name, "$target");
$hotel->logo = $name;
$hotel->logo_path = $target;
$hotel->save();
}
return response()->json(['hotel' => $hotel], 200);
}catch(Exception $e){
return response()->json(['error' => $e], 500);
}
What could be the possible error that takes such amount of time? How can I further debug this issue?
EDIT:
I tried using gzip to compress the content before sending the post request in order to reduce the time needed but nothing changed.

Related

Not able to expose the custom headers from WebAPI to client

I have written a program to download the pdf, word or txt file returned by web api and it's working fine. On server side I have used WebApi and client side AngularJs. Now the problem is, I also need the file name from api as well and for that I need to read the headers returned by api. But reponse.headers doesn't contains all the headers info. Below is my code:
[HttpGet]
[Authorize]
public HttpResponseMessage GetTranscript(string key, int format)
{
var badRequest = Request.CreateResponse(HttpStatusCode.OK, "Not a valid input."); //ResponseMessage(Request.CreateResponse(HttpStatusCode.BadRequest, "Not a valid input."));
if (string.IsNullOrWhiteSpace(jiraTaskKey))
{
return badRequest;
}
string transcript = _mediaCaptionService.GetTranscript(UserId, key);
string fileName = "transcript";
var response = new HttpResponseMessage(HttpStatusCode.OK);
if (format == (int)TranscriptFormat.PDF)
{
byte[] byteInfo = GeneratePDFTranscript(transcript);
response.Content = new ByteArrayContent(byteInfo);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
fileName = fileName + ".pdf";
}
else if (format == (int)TranscriptFormat.TXT)
{
response.Content = new StringContent(transcript, System.Text.Encoding.UTF8, "text/plain");
fileName = fileName + ".txt";
}
else if (format == (int)TranscriptFormat.WORD)
{
string transcriptFontName = "Arial";
byte[] byteInfo = GenerateWordTranscript(transcript, transcriptFontName);
response.Content = new ByteArrayContent(byteInfo);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
fileName = fileName + ".doc";
}
else
{
return badRequest;
}
response.Content.Headers.Add("x-filename", fileName);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") {
FileName = fileName
};
//response.Content.Headers.ContentDisposition.FileName = fileName;
return response; //ResponseMessage(response);
}
and in client side
function getTranscriptResult(method, apiUrl, data) {
var deferred = $q.defer();
$http({
method: method,
url: apiUrl,
data: data,
responseType: 'arraybuffer'
}).success(function (data, status, headers, config) {
debugger;
var results = [];
results.data = data;
results.headers = headers();
results.status = status;
results.config = config;
deferred.resolve(results);
}).error(function (error, status, headers, config) {
deferred.reject(error);
});
return deferred.promise;
}
But when I put the break point in above code, I get this:
Can you please tell me where is the problem in my code that I am not able to get the file name? Also please let me know if you need more information.
After adding below lines has solved my problem.
// Add a custom header for filename and expose it to be consumed by JavaScript.
response.Content.Headers.Add("Filename", zipFileName);
response.Content.Headers.Add("Access-Control-Expose-Headers", "Filename");
So basically adding Access-Control-Expose-Headers helped me to expose the custom headers to client. For more information on this please follow this link

How to fix 413 HTTP Request entity too large

I have a project where I have a simple client written in angularjs and the server is in scala, in my client I have a simple upload button where you click on it and choose a local file(csv), and when I upload a certain csv that is a bit big, like 6000 rows I get
413 Request entity too large
my js code for the upload is:
$scope.upload = function(files) {
if (!files || !files.length) {
} else {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: '/uploadFile',
file: file
}).
}).success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
$scope.showServerError(status, data);
})
}
}
};
in the server is :
def uploadFile = Action(parse.multipartFormData) { implicit request =>
request.body.file("file").fold {
BadRequest("Missing file")
} { uploadedFile => {
val localFile = new File("/tmp/" + uploadedFile.ref.file.getName)
Files.copy(uploadedFile.ref.file.toPath, localFile.toPath, StandardCopyOption.REPLACE_EXISTING)
localFile.deleteOnExit()
val j = Json.parse( ${Crypto.encryptAES(localFile.getAbsolutePath)}})
Ok(j)
}}
}
what needs to be change in order to support bigger files?
You can use the maxLength body parser to specify the maximum size of the body in bytes:
// Allow up to 15MB files...
private val uploadParser = parse.maxLength(15*1024*1024, parse.multipartFormData)
def uploadFile = Action(uploadParser) { implicit request =>
...
}
The default is 10MB for multipart form data, which you can also override by changing the play.http.parser.maxDiskBuffer setting. See the docs.

Angular ng-file-upload Get Byte Array and FormData in Asp.net MVC

I am trying to use ng-file-upload to upload files using Angular. I need the byte array to store in our database (I cannot store the uploaded file on the server), but I also need the FormData as well. My problem is that I can only seem to get one or the other (either the byte array or the formdata) but not both.
Here is my Angular code:
$scope.uploadPic = function (file) {
$scope.emrDetailID = 7;
file.upload = Upload.upload({
url: '/SSQV4/SSQV5/api/Document/UploadEMRDocument',
method: 'POST',
data: { file: file, 'emrdetail': $scope.emrDetailID}
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
$scope.imageID = file.result;
});
});
};
Using the code below, I can get the byte array and store it in my database:
public async Task<IHttpActionResult> UploadDocument()
{
var provider = new MultipartMemoryStreamProvider();
await Request.Content.ReadAsMultipartAsync(provider);
var f = provider.Contents.First(); // assumes that the file is the only data
if (f != null)
{
string ClientIP = IPNetworking.GetIP4Address();
var filename = f.Headers.ContentDisposition.FileName.Trim('\"');
filename = Path.GetFileName(filename);
var extension = Path.GetExtension(filename).TrimStart('.');
var buffer = await f.ReadAsByteArrayAsync();
FileImageParameterModel pm = new FileImageParameterModel();
pm.binFileImage = buffer;
//pm.CompanyID = UserInfo.intMajorID;
pm.CompanyID = 10707;
pm.dteDocumentDate = Convert.ToDateTime("4/4/2016");
pm.dteExpiration = Convert.ToDateTime("4/4/2017");
pm.vchUserIP = ClientIP;
pm.vchUploadedbyUserName = UserInfo.Username;
pm.vchFileExtension = extension;
CommonClient = new CommonWebApiClient();
CommonClient.AuthorizationToken = UserInfo.AccessToken;
int imageID = await CommonClient.InsertNewFileImage(pm);
return Json(imageID);
}
else
{
return BadRequest("Attachment failed to upload");
}
}
Using the code below I can get the FormData
var provider = new MultipartFormDataStreamProvider(workingFolder);
await Request.Content.ReadAsMultipartAsync(provider);
var emr = provider.FormData["emrdetail"];
but then I can't get the byte array as using MultipartFormDataStreamProvider wants a folder to store the file.
There's got to be a way to get both. I have been searching the internet for 2 days and all I can find are the two solutions above neither of which solves my issue.
Any assistance is greatly appreciated!
You are thinking way to complicated. Here is some of my code which I used for file upload in AngularJS with .NET
Angular:
function uploadFileToUrl(file) {
var formData = new FormData(); // Notice the FormData!!!
formData.append('uploadedFile', file);
return $http({
url: uploadUrl,
method: 'POST',
data: formData,
headers: {
'Content-Type': undefined
}
}).then(resolve, reject);
function resolve(data) {
$log.debug('data : ', data);
return data;
}
function reject(e) {
$log.warn('error in uploadFileToUrl : ', e);
return $q.reject(e);
}
}
Server:
public Task HandleAsync([NotNull] UploadFilesCommand command)
{
return wrapper.InvokeOnChannel(async client =>
{
// init command
command.Output = new Dictionary<string, int>();
try
{
foreach (var file in command.Files)
{
var request = new UploadFileRequest
{
FileName = file.Name,
FileStream = file.Stream
};
UploadFileResponse response = await client.UploadFileAsync(request);
command.Output.Add(file.Name, response.Id);
}
}
finally
{
// dispose streams
foreach (var file in command.Files)
{
if (file.Stream != null)
{
file.Stream.Dispose();
}
}
}
});
}

How to check service success or error in controller in angularJS

I have a function in controller which calls a service function. This is the code for both.
Controller
$scope.AddNewProduct = function (NewProduct) {
var newProduct = {};
newProduct.ProductID = NewProduct.id;
newProduct.ProductName = NewProduct.name;
newProduct.ProductImagePath = NewProduct.imagepath;
newProduct.SubCategoryID = NewProduct.subcategory.id;
newProduct.SubCategoryName = NewProduct.subcategory.name;
newProduct.BrandID = NewProduct.brand.id;
newProduct.BrandName = NewProduct.brand.name;
newProduct.Variants = [];
ProductService.AddNewProduct(newProduct);
$scope.NewProduct = {};
$scope.NewProduct.id = parseInt($scope.Products[0].ProductID) + 1;
};
Service
ProductService.AddNewProduct = function(NewProduct) {
productList.unshift(NewProduct);
var req = {
url: "cgi-bin/AddNewProduct.pl",
method: 'GET',
params: {ProductID: NewProduct.ProductID, ProductName: NewProduct.ProductName, ProductImagePath: NewProduct.ProductImagePath, BrandID: NewProduct.BrandID, SubCategoryID: NewProduct.SubCategoryID}
//params: { NewProduct: ProductData }
};
$http(req).success(function()
{
alert ('New Product Added!');
})
.error(function()
{
alert ('New Product Add Error!');
});
}
Perl Script for adding the product.
#!/usr/bin/perl
use cPanelUserConfig;
use strict;
use warnings;
use DBI;
use CGI::Carp qw(warningsToBrowser fatalsToBrowser);
use CGI;
use CGI::Cookie;
use CGI::Session qw();
use JSON;
print "Content-Type: text/html\n\n";
my $CFG = do "config.pl";
my $db_handle = DBI->connect ("DBI:mysql:$CFG->{database}", $CFG->{user}, $CFG->{password} ) or die "Couldn't connect to database: $DBI::errstr\n";
my $cgi = CGI->new();
#my $DecodedData = decode_json($cgi->param("NewProduct"));
my $product_id = $cgi->param('ProductID');
my $product_name = $cgi->param('ProductName');
my $product_description = 'DESC';
my $image_path = $cgi->param('ProductImagePath');
my $brand_id = $cgi->param('BrandID');
my $subcatty_id = $cgi->param('SubCategoryID');
my $sql_query = "insert into table_products values ($product_id, '$product_name', '$product_description', '$image_path', '$brand_id', 1)";
my $statement = $db_handle->prepare ($sql_query) or die "Couldn't prepare query '$sql_query': $DBI::errstr\n";
$statement->execute() or die "SQL Error: $DBI::errstr\n";
$sql_query = "insert into table_product_categories values ($product_id, '$subcatty_id')";
my $statement = $db_handle->prepare ($sql_query) or die "Couldn't prepare query '$sql_query': $DBI::errstr\n";
$statement->execute() or die "SQL Error: $DBI::errstr\n";
$db_handle->disconnect;
I have the following issues with the code.
Sometimes products is not getting added into DB, but in service i am seeing alert ('New Product Added!'); why is that so? Why it is not going to alert ('New Product Add Error!');
How to check for success or error in controller instead of service?
Please help me.
May be your returning http status code 200 after the request when its not inserting to the database, If the data is not insert correctly, you need to return a $http error.
you can return the $http promise from the service as below,
ProductService.AddNewProduct = function(NewProduct) {
productList.unshift(NewProduct);
var req = {
url: "cgi-bin/AddNewProduct.pl",
method: 'GET',
params: {ProductID: NewProduct.ProductID, ProductName: NewProduct.ProductName, ProductImagePath: NewProduct.ProductImagePath, BrandID: NewProduct.BrandID, SubCategoryID: NewProduct.SubCategoryID}
//params: { NewProduct: ProductData }
};
return $http(req);
}
in controller,
ProductService.AddNewProduct(newProduct).then(function(data) {
// success
}, function(data) {
// error
});
$http is able to utilize the response data:
// Simple GET request example :
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Make your API cgi-bin/AddNewProduct.pl to return success/error/status data. console.log to see what it returns, so that you can debug.

Unexpected token , in Angular code after $http request

I am submitting an $http request to my server using this code below, yet all the of sudden Angular is complaining about an "Unexpected token , " somewhere.
function sendAggrRequestToServer(url) {
var deferred = $q.defer();
$http({
method: 'GET',
encoding: 'JSON',
headers: {
'Access-Control-Allow-Origin': 'true'
},
withCredentials: true,
url: url
}).success(function (data, status, headers, config) {
var retval = data;
deferred.resolve(retval);
}).error(function (data, status, headers, config) {
logErr("Error submitting aggregation request to server: " + status);
});
return deferred.promise;
}
The strange thing is that this exact URL works successfully both in the browser and in Fiddler. And the Json data is returned as expected. However, for some strange reason my javascript code is throwing this
exception:
[app] [HT Error] Unexpected token ,
Object {exception: SyntaxError, cause: undefined}
angular.js:9778
(anonymous function) angular.js:9778
logIt logger.js:55
logError logger.js:49
(anonymous function) logger.js:32
(anonymous function) config.exceptionHandler.js:26
deferred.promise.then.wrappedCallback angular.js:11322
(anonymous function) angular.js:11405
Scope.$eval angular.js:12412
Scope.$digest angular.js:12224
Scope.$apply angular.js:12516
done angular.js:8204
completeRequest angular.js:8412
xhr.onreadystatechange
And my URL is :
http://localhost:49479/api/aggr?sid=9630a8040ee6c901a4034c07894abc317272f855c757a4c60a6a&kri=[CDSStress%20A]:[USD%2010Y%20X%20-1.25],[CDSStress%20A]:[USD%2010Y%20X%201.25]&aggrFunc=SUM([CDSStress%20A]:[USD%2010Y%20X%20-1.25]),SUM([CDSStress%20A]:[USD%2010Y%20X%201.25])&dim=Counterparty
FYI: All appears to be fine in angular.js at this point in angular, and I can indeed see the response data (which is definitely valid Json data). The callback status param has a value of "200" and the statusText is 'OK':
function completeRequest(callback, status, response, headersString, statusText) {
// cancel timeout and subsequent timeout promise resolution
timeoutId && $browserDefer.cancel(timeoutId);
jsonpDone = xhr = null;
// fix status code when it is 0 (0 status is undocumented).
// Occurs when accessing file resources or on Android 4.1 stock browser
// while retrieving files from application cache.
if (status === 0) {
status = response ? 200 : urlResolve(url).protocol == 'file' ? 404 : 0;
}
// normalize IE bug (http://bugs.jquery.com/ticket/1450)
status = status === 1223 ? 204 : status;
statusText = statusText || '';
callback(status, response, headersString, statusText);
$browser.$$completeOutstandingRequest(noop);
}
};
Here is a screen image of the break point where I can inspect the "response" param:
However, as soon as it resolves the promise and returns to my calling function, angular throws the Unexpected token error.
I have been using this for days now, but today I must have introduced something to cause this. I just can't figure out what !
Your advice and guidance is greatly appreciated.
regards.
Bob
UPDATE:
I now find Angular throwing the actual exception inside $HttpProvider() on this line :
data = fromJson(data);
inside here :
function $HttpProvider() {
var JSON_START = /^\s*(\[|\{[^\{])/,
JSON_END = /[\}\]]\s*$/,
PROTECTION_PREFIX = /^\)\]\}',?\n/,
CONTENT_TYPE_APPLICATION_JSON = {'Content-Type': 'application/json;charset=utf-8'};
var defaults = this.defaults = {
// transform incoming response data
transformResponse: [function(data) {
if (isString(data)) {
// strip json vulnerability protection prefix
data = data.replace(PROTECTION_PREFIX, '');
if (JSON_START.test(data) && JSON_END.test(data))
data = fromJson(data);
}
return data;
}],
// transform outgoing request data
transformRequest: [function(d) {
return isObject(d) && !isFile(d) && !isBlob(d) ? toJson(d) : d;
}],
// default headers
headers: {
common: {
'Accept': 'application/json, text/plain, */*'
},
post: copy(CONTENT_TYPE_APPLICATION_JSON),
put: copy(CONTENT_TYPE_APPLICATION_JSON),
patch: copy(CONTENT_TYPE_APPLICATION_JSON)
},
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN'
};
And sendAggregationREquest() is called from here :
function buildAndSendAggregationQuery() {
// iterate list in reportsContext , pass data to to sendAggregationRequest()
var userKRIs = vm.kriUserDataSource.get();
userKRIs.load();
var group;
var kri = '';
var aggrFunc = '';
var aggrKriFuncArray;
var dimension = vm.selectedDimen;
var dimenMulti = '';
var applyScenarioAggr = false;
if (vm.kriUserDataSource.data()[0].group == '99_HSVaR') {
applyScenarioAggr = true;
}
// Call function to build the aggr function. Return value is an array.
if (applyScenarioAggr) {
aggrKriFuncArray = reportsContext.buildAggrFunc(vm.kriUserDataSource.data(), 'AVERAGE');
}
else {
aggrKriFuncArray = reportsContext.buildAggrFunc(vm.kriUserDataSource.data(), 'SUM');
}
kri = aggrKriFuncArray[0];
aggrFunc = aggrKriFuncArray[1];
for (var i = 0; i < vm.multiSelectedDimen.length; i++) {
dimenMulti += vm.multiSelectedDimen[i] + ',';
}
dimenMulti = dimenMulti.substr(0, dimenMulti.length - 1); // ' remove final ","
sendAggregationRequest(kri, aggrFunc, dimension); //dimenMulti);
}
and finally, the response data that comes back from server prior to that exception:
{"status":"SUCCESS", "messages":[], "data":[{"attributes":[{"name":"Counterparty","type":"string"},{"name":"SUM(CDSStress A:USD 10Y X -1.25)","type":"double"},{"name":"SUM(CDSStress A:USD 10Y X 1.25)","type":"double"}],"rows":[{"id":0,"values":["Goldman",0.,0.]},{"id":1,"values":["IBM",0.,0.]},{"id":2,"values":["JP Chase",0.,0.]},{"id":3,"values":["MINESCONDIDA",0.,0.]},{"id":4,"values":["Merrill",0.,0.]},{"id":5,"values":["Nokia",0.,0.]},{"id":6,"values":["Pequot",0.,0.]},{"id":7,"values":["Pimco Fund A",0.,0.]},{"id":8,"values":["Pimco Fund B",0.,0.]},{"id":9,"values":["Deutsche",0.,0.]},{"id":10,"values":["Ditech",0.,0.]},{"id":11,"values":["GM Isuzu",0.,0.]},{"id":12,"values":["GM Opel",0.,0.]},{"id":13,"values":["GMAC",0.,0.]},{"id":14,"values":["GMAC Insurance",0.,0.]},{"id":15,"values":["GSAM",0.,0.]},{"id":16,"values":["General Insurance",0.,0.]},{"id":17,"values":["Genworth",0.,0.]},{"id":18,"values":["AIG",0.,0.]},{"id":19,"values":["Andor",0.,0.]},{"id":20,"values":["BARCLAYS",92.7731197209214,-10.1717767200607]},{"id":21,"values":["BHHSH",0.,0.]},{"id":22,"values":["BHPBFIN",0.,0.]},{"id":23,"values":["BHPSTEEUR",1468.80370935,-161.395632863801]},{"id":24,"values":["BHPSUS",0.,0.]},{"id":25,"values":["BLUESCOPEFIN",0.,0.]},{"id":26,"values":["CSFB",3.35029024626419,-0.367366071961442]},{"id":27,"values":["BLOSOFL",0.,0.]},{"id":28,"values":["GRMOBND",0.,0.]}]}]}
can you make a jsfiddle ? or at least show us how you call the sendAggrRequestToServer method.
It shouldbe
var promise = sendAggrRequestToServer(url);
promise.then(function(data) {
console.log('Success we got: ' + data);
}, function(reason) {
console.log('Failed we got: ' + reason);
}, function(update) {
console.log('Strange we got: ' + update);
});
Thx

Resources