We Keep Coding

CakePHP 4.x Ajax request with CSV-file

I am developing a responsive user interface in CakePHP 4.x which occasionally uses Ajax requests.
My Ajax requests are performing just fine but I am having a lot of trouble incorporating a CSV-file in the request so my controller can handle the data. What I want to accomplish is that that I can choose a CSV-file, press submit and that the Ajax-request sends the file to the controller and uses the independent rows to update the database.
My code:
Javscript:
function importProducts() {
/* Getting form data */
let form = document.getElementById('importProductsForm');
let formData = new FormData();
let file = $(form.products_file).prop('files')[0];
formData.append("csv_file", file);
/* Moving product stock */
ajaxRequest('Products', 'importProducts', formData, processImportProducts);
}
function ajaxRequest(controller, action, data = null, callback = null) {
$.ajax({
url : "<?=$this->Url->build(['controller' => '']);?>" + "/" + controller + "/" + action,
type : 'POST',
data : {
'data': data
},
dataType :'json',
/*processData: false,*/
/*contentType: false,*/
success : function(dataArray) {
let response = dataArray.response;
if (typeof response.data !== 'undefined') {
data = response.data;
if (callback != null) {
callback(data);
}
} else if (response.success == 0) {
data = null;
giveError(response.errorTemplate);
} else {
data = null;
if (callback != null) {
callback(data);
}
}
},
error : function(request,error)
{
console.error(error);
}
});
}
At the moment the controller function does not do anything special but receiving and setting the data:
public function importProducts() {
$this->RequestHandler->renderAs($this, 'json');
$response = [];
if($this->request->is('post')) {
$data = $this->request->getData();
$response['test'] = $data;
} else {
$response['success'] = 0;
}
$this->set(compact('response'));
$this->viewBuilder()->setOption('serialize', true);
$this->RequestHandler->renderAs($this, 'json');
}
After some research I discovered I could use the FormData object to send the file. The error I then received was 'illegal invocation'. After some more research I discovered this had to with automatic string parsing by Ajax. According to some other StackOverflow posts I could resolve this by setting the processdata and contenttype properties to false. This fixed the problem but resulted in an Ajax request which always would be empty (that does not contain any data). I tested this without the CSV-file with a regular data object that contains a variable with a string but also resulted in a empty request (no data send to controller).
So my problem is that without the processdata property as false I get the 'illegal invocation' error, otherwise with processdata as false I literary do not receive any data in my controller. I am looking for solution to resolve this problem so I can send my CSV-file or at least the data within the file to my controller.
Other solutions than using the FormData are also welcome, for example I tried to read the CSV-file in Javascript and turn this into another object (with the jquery csv api) to send to the controller, sadly without success until now.

Session Some Time reurn Null And some time reurn value

I create session when user Login and use session to check access page, when i check session some time rerun null if i refresh page or navigate to other page the session is not null , it's not about specific page ,it's about method some time return null some time get session value , my method in web service and i call it use javascript
[WebMethod(EnableSession = true)]
public object CheckIfLoggedin()
{
try
{
return new { Result = resultEnum.ok, Records = GetUserID() };
}
catch
{
return new { Result = resultEnum.error };
}
}
private Guid? GetUserID()
{
if (Context.Session["User"] != null)
{
string userid = Context.Session["User"].ToString();
if (userid != "")
return new Guid(userid);
else
return null;
}
else
return null;
}
function CheckIfLoggedin() {
var status = 0;
var ItemCount;
$.ajax({
type: "POST",
url: "../../../../_layouts/15/TripPlannerFrontend/TripPlannerSrv.asmx/CheckIfLoggedin",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (res) {
if (res.d.Result === 2) {
var userid = res.d.Records;
if (userid == null) {
//
}
else {
//window.location = "TripPlanner.aspx";
var returnurl = GetQueryString("returnurl");
if (returnurl != null && returnurl !== "")
window.location = returnurl;
else
window.location = "TripPlanner.aspx";
}
}
else
console.log("try again");
},
error: function (response) {
console.log("try again");
}
});
};

The problem is session affinity. If you have multiple Web front-ends and a load-balancer dispatching requests to one of these SP servers: a first request may be routed to server A, then the session is created, and when a second request is issued by the client, it may be redirected to server B, where the session does not exist.
In such situations, the best approach is to configure your load-balancer for "session affinity": this means that once a given client is assigned one of the Web front-ends, all subsequent requests will be redirected to the same server. Please Ask the Administrator of the load-balancer if there is Session affinity configuration if not ask him if this can be configured at his level (it depends on the technology used for load-balancing).

Can't connect to web service by JQuery

I use jquery (ajax) to connect to a web service which returns string , it is not working with me. it always go to error function. here is my web service :
[HttpGet]
[ActionName("GetImage")]
public string GetImage(string base64String, string imgName,string reqTitle , string reqSubject, string reqStatus,string Creator , DateTime creationdate )
{
try
{
using (PhMobAppEntities context = new PhMobAppEntities())
{
ClaimsApproval _ca = new ClaimsApproval();
_ca.imageBasestrg = base64String;
_ca.imageName = imgName;
_ca.Creator = Creator;
_ca.CreationTime = creationdate;
_ca.ReqStatus = reqStatus;
_ca.ReqTitle = reqTitle;
_ca.ReqSubject = reqSubject;
context.ClaimsApprovals.Add(_ca);
context.SaveChanges();
return "Success";
}
}
catch (DbEntityValidationException ex)
{
var errorMessages = ex.EntityValidationErrors
.SelectMany(x => x.ValidationErrors)
.Select(x => x.ErrorMessage);
var fullErrorMessage = string.Join("; ", errorMessages);
var exceptionMessage = string.Concat(ex.Message, " The validation errors are: ", fullErrorMessage);
throw new DbEntityValidationException(exceptionMessage, ex.EntityValidationErrors);
}
}
and here is my js code :
$("#sendphoto").click(function () {
var url = "http://41.128.183.109:1212/api/Data/GetImage";
var data = {
imgName: "test"
};
$.ajax({
url: url,
type: 'Get',
data: data,
success: function (data) {
alert("Success");
},
error: function (data) {
alert("Please Check Your Internet Connection");
}
});
});
It is running ok when i tested my web service in advanced rest client ,please advice .

I tried connecting to your web service and I get the following response:
{"$id":"1","Message":"No HTTP resource was found that matches the request URI 'http://41.128.183.109:1212/api/Data/GetImage'."}
I think what you have is an internal problem with your c# code, probably with your routing. Your javascript call is probably working fine, but you are passing only one parameter, "test" while you have many more in your declaration.
What http response code are you getting?

ASP.NET MVC & Angular: After session expires, Angular Factory returns HTML of Login Page instead of JSON object

If the user is on a page for a long time and the session ends, if they proceed to make an AJAX call after the session is already expired.. instead of receiving the JSON object, it instead receives the HTML of the login page.
Ideally I'm trying to make it so that it will redirect to a log in page.
Is there any way i can detect this?
I already have an ActionFilterAttribute that works for non-AJAX calls like so:
public class VerifySessionAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var userId = filterContext.HttpContext.Session["UserId"];
var userName = filterContext.HttpContext.Session["UserName"];
if (userId == null || userName == null)
{
filterContext.Result = new RedirectResult(string.Format("/Account/Login"));
return;
}
base.OnActionExecuting(filterContext);
}
}
But that doesn't get hit for the scenario above during AJAX calls.
I've also tried an Interceptor.. something like this:
app.factory('httpAuthInterceptor', function ($q) {
return {
'responseError': function (response) {
// NOTE: detect error because of unauthenticated user
if ([401, 403].indexOf(response.status) >= 0) {
// redirecting to login page
//$state.go('home');
$window.location.href = '/Account/Login';
return response;
} else {
return $q.reject(rejection);
}
}
};
})
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpAuthInterceptor');
});
But in the same scenario it doesn't seem to hit there as well during the expired session / AJAX call
Is there anything I can do to detect this? When the session is expired I just want to redirect to the login page.. Thanks for any help
EDIT: here's how I make my calls
app.factory('HeadlinesFactory', ['$http', function ($http) {
var HeadlinesFactory = {};
HeadlinesFactory.getShowsForClient = function (clientId) {
return $http({
method: 'POST',
url: '/Show/GetShowsForClient',
data: { clientId: JSON.stringify(clientId) }
});
};
//etc
EDIT2: how all my controllers look like. Except my Account Controller where I put the VerifySession in front of everything except the Login page to prevent loop redirects:
[Authorize]
[CustomFilters.VerifySession]
public class ShowController : Controller
{ ... }

Ajax requests will not process redirect requests for security reasons. In addition, since you are returning a redirect result, a 401/403 status code is not thrown but rather a 302 is returned.
What you could do is expand your filter to conditionalize logic based on whether or not the request is an ajax request. In addition, based on your comments, it seems like creating a new Authorize attribute instead would be the right way to go since that way you can simply replace the default Authorize attribute with your own logic.
public class VerifySessionAttribute : AuthorizeAttribute
{
protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
{
if (!filterContext.HttpContext.User.Identity.IsAuthenticated)
{
if (filterContext.HttpContext.Request.IsAjaxRequest())
{
filterContext.HttpContext.Response.StatusCode = 401;
filterContext.HttpContext.Response.SuppressFormsAuthenticationRedirect =
true;
}
else
{
filterContext.Result = new RedirectResult(string.Format("/Account/Login"));
return;
}
}
}
}
This would allow your Angular interceptor to pick up the request and handle it appropriately.
Since IsAjaxRequest looks explicitly for the "X-Requested-With": "XMLHttpRequest" and AngularJS no longer provides that header with Ajax requests, you can add a configuration to the $httpProvider to always include the header.
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}]);

How can I show a message from server side?

I am not a java developer, but my company purchase a product to handle their accounting stuff based on java. Now I am facing a problem because they want to prevent repeated invoices on the system and the software allows the user to do it. I called support and they suggested me to create a suppressed field on the client side, copy on that field the message I want to show and read that field when the user tab to the next field. those are a lot of steps and totally inefficient. Below is my code based on what they suggested. It currently showed me the invoice exist message twice.
server side
CSServer.log (Step)
if ((CSEvent.getTarget().getName() == "InvoiceNumber") && (CSEvent.getAction() == "Tabout" ) && (Step == 0))
{
if (!cnn)
{
CSServer.log ("GPCONNECT Lookup::CSForm_OnValidateLookup Connection to the database failed");
}
else
{
Sql = "SELECT COUNT (*) as Result FROM [DYNAMICS].[dbo].[AP_Invoice_Table] WHERE [VendorID] = '" + CSForm.getField("VendorID").getValue() + "' and [DocumentNumber] = '" + CSForm.getField("InvoiceNumber").getValue()+"'";
resultInvSet = cnn.executeSQL(Sql);
var x =null;
x = resultInvSet.getValue("Result");
}
if (x > 0)
{
CSForm.getField("msg").setValue("Invoice number already exist, please check your entry!");
return false;
}
else
{
CSForm.getField("msg").setValue("");
}
}
client side
function InvoiceAmount_OnFocus()
{
var m =CSForm.getField('msg').getValue();
if (m != "")
{
$("#InvoiceNumber").focus();
CSClient.alert(m);
CSForm.getField("InvoiceNumber").setFillColor("FF0000");
}
else
{
CSForm.getField("InvoiceNumber").setFillColor("FFFFFF");
}
return true;
}
Could someone please showed me the right way to handle this?
Update:
Client and server use SOAP and HTTP call to communicate.

Create a webmethod that you call via AJAX and pop the javascript alert based on the result of that function.
example (in your .aspx page):
function doSomething(id) {
$.ajax({
type: "POST",
url: "Do_Something.aspx/DoSomething?id=" + id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
In Do_Something.aspx.cs:
[WebMethod]
public static string DoSomething(string id)
{
var docs = SqlHelper.SelectAllByInvoiceId(id);
if (docs.Count > 0)
{
return "exists";
}
return "does not exist";
}

Step 1: Create AJAX function to talk to server side function.
Step 2: Return message from server side function and handle that in AJAX function (success or done).
Step 3: Alert message if ajax function catches any result.
For ajax implementation you can refer: http://www.w3schools.com/jquery/ajax_ajax.asp
Or
http://api.jquery.com/jquery.ajax/