I am using hapijs version 17.0.1. I am trying to upload an image using ajax request on a hapijs route. Here is my AJAX code to upload profile pic:
var image_file_input = document.getElementById("user_profile_upload");
image_file_input.onchange = function () {
if(this.files != undefined)
{
if(this.files[0] != undefined)
{
var formData = tests.formdata ? new FormData() : null;
if (tests.formdata)
{
//alert(file)
formData.append('image_file', this.files[0]);
formData.append('userId', user_id);
formData.append('memberId', member_id);
}
$.ajax({
url: "/v1/User/uploadUserPic",
data: formData,
type: "POST",
dataType: "json",
contentType: false,
processData: false,
contentType: "multipart/form-data",
success: function(data){
console.log(data);
var errMsg = null;
var resData = null;
if(data.statusCode == 200)
{
resData = data.result;
}
else
{
alert(data.message)
}
},
error: function(error){
alert(error);
}
});
}
}
}
And here is my Hapijs route Code:
var uploadUserPic = {
method: 'POST',
path: '/v1/Module/uploadUserPic',
config: {
description: 'Update Image For User',
tags: ['api', 'User'],
auth: 'session',
payload: {
output: 'stream',
parse: true,
allow: 'multipart/form-data'
},
validate: {
payload: {
userId : Joi.string().regex(/^[a-f\d]{24}$/i).required(),
memberId: Joi.string().required(),
image_file: Joi.object().required(),
},
failAction: FailCallBack
}
},
handler: function (request, reply) {
var resultData = null;
var error = null;
return new Promise(function (resolve) {
var multiparty = require('multiparty');
var fs = require('fs');
var form = new multiparty.Form();
form.parse(request.payload, function (err, fields, files) {
if(err)
{
error = err;
resolve();
}
else
{
var mkdirp = require('mkdirp');
var img_dir = "./files/users/";
mkdirp(img_dir, function (err) {
if (err)
{
error = err;
console.error(err);
resolve();
}
else
{
var oldpath = files.image_file.path;
var newpath = "./files/users/"+requestPayload.userId+".png";
fs.rename(oldpath, newpath, function (err) {
if(err)
{
error = err;
}
resolve();
});
}
});
}
});
}).then(function (err, result) {
if(err) return sendError(err);
if(error) return sendError(error)
return {
"statusCode": 200,
"success": true
};
});
}
}
The above code gives me following error cannot read property 'content-length' of undefined on line form.parse(request.payload, function (err, fields, files) {});
Please let me know If I am doing something wrong. If I replace the url in ajax request with anohter url that I have written in php then it works perfectly. which means that something is wrong with my hapijs/nodejs code.
There's a good post on how to handle file uploads in Hapi.js (written in version 16) https://scotch.io/bar-talk/handling-file-uploads-with-hapi-js
Since you are using payload.parse = true, I am not seeing a particular reason why you have to use multiparty. I have the following working code that would save files (of any type) uploaded from client into uploads directory on the server (Please do not use directly on production as no sanitation is done)
{
path: '/upload',
method: 'POST',
config: {
payload: {
output: 'stream',
parse: true,
allow: 'multipart/form-data'
},
validate: {
payload: {
files: Joi.array().single()
}
}
},
handler: function(request) {
const p = request.payload, files = p.files
if(files) {
console.log(`${files.length} files`)
files.forEach(async file => {
const filename= file.hapi.filename
console.log(`Saving ${filename} to ./uploads`)
const out = fs.createWriteStream(`./uploads/${filename}`)
await file.pipe(out)
})
}
return {result: 'ok'}
}
}
You can use the following curl command to test
curl http://localhost:8080/upload -F 'files=#/path/to/a/note.txt' -F 'files=#/path/to/test.png' -vvv
There are a few issues with your code. First in your $.ajax call, you have specified contentType twice, although it's not a syntax error but it's careless to code like that. Second the function's signature inside your .then() block is incorrect. You are mixing the idea of Promise and callback. I don't think the following line will be triggered
if(err) return sendError(err);
One last trivial thing, you said you are using Hapi 17 but based on the handler function's signature
handler: function (request, reply) {
...
Seems you are not totally onboard with Hapi17 as the new signature is
handler: function (request, h) {
And it's not just the rename of reply to h.
I have two Asp projects. On close of a dialog box in project A I am trying to call a static webmethod in project B using ajax call.
Instead of calling the Webmethod it is calling the PageLoad.
Any ideas what I am doing wrong?
WebMethod
[WebMethod]
public static string UpdateSession()
{
return "Test";
}
$(function () {
$('div#DialogDiv').on('dialogclose', function (event) {
CloseDialog("http://localhost:1330/Application_Default.aspx/UpdateSession");
return false;
});
});
function CloseDialog(URL) {
jQuery.support.cors = true;
$.ajax({
type: "GET",
url: URL,
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
success: function (response) {
alert("success");
},
failure: function (response) {
alert("Failed to trying to find the method: " + URL );
}
});
return false;
}
Try this with pure javascript
function CloseDialog(URL) {
var request = new XMLHttpRequest();
request.open("GET", URL);
request.onload = function() {
if (request.status === 200) {
alert(request.responseText);
// to convert to JSON object-> JSON.parse(request.responseText);
} else {
alert("Failed to trying to find the method: " + URL );
}
};
request.send();
return false;
}
With jQuery I would just do this, you don't need more. It should work with cross-domain too.
function CloseDialog(URL) {
$.ajax({
url: URL,
success: function (response) {
jQuery.each(result.list, function(i, val) {
// iterate the JSON object
// val.node;
});
},
failure: function (response) {
alert("Failed to trying to find the method: " + URL );
}
});
return false;
}
I have this ajax request:
this.sendApiRequestWithFile = function (method) {
var formData = new FormData();
formData.append("name", "my name");
data_ajax = {
url: "http://localhost:1337/" + method,
method: "PUT",
data: formData,
headers: {
'Cache-Control': 'no-cache',
'Content-Type': 'multipart/form-data; boundary=----',
}
}
return $http(data_ajax).success(function(data, status, headers, config) {
return data;
}).error(function(data, status, headers, config) {
return data;
});
}
And my server is in sails.js so I catch parameters like this: req.body and it doesn't work. I try req.params.all() and doesn't work too.
I hope the following code should work. If you try to access the uploaded file from server, use req.file("file_name")
var fd = new FormData()
fd.append("name", "name value")
$.ajax({
url: "/url",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
console.log("Success : " + response);
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
}
});
});
I have big string, now I want to pass data into api controller by $http angular service. I have lost many times.
Here is my large string
var strObj="{\"countryName\":null,\"cityName\":null,\"stateName\":null,\"objectID\":-1,\"id\":0,\"locationID\":1,\"companyName\":\"\",\"companyShortName\":\"\",\"yearEstablished\":0,\"companyTypeID\":0,\"noOfEmployee\":null,\"regNo\":\"\",\"cBINo\":null,\"yearlyRevenue\":null,\"tINNo\":\"\",\"vATNo\":\"\",\"phone\":\"\",\"mobile\":null,\"fax\":null,\"email\":\"\",\"webSite\":\"\",\"houseNo\":\"\",\"flat\":null,\"section\":null,\"block\":null,\"street\":null,\"cityID\":0,\"stateID\":null,\"countryID\":0,\"zip\":\"\",\"pOBox\":null,\"directories\":null,\"license\":null,\"status\":1,\"isGroupOfCompany\":1,\"isCompanyBranch\":1,\"insertUserID\":100000001,\"editUserID\":null,\"lastUpdate\":\"1899-12-31T18:00:00.000Z\",\"isSelected\":false,\"isEnabled\":false,\"companyMiscList\":[],\"contactPersonList\":[{\"countryName\":null,\"cityName\":null,\"stateName\":null,\"contactPersonName\":null,\"contactDetails\":null,\"objectID\":-2,\"id\":1,\"locationID\":1,\"contactPersonRefID\":-1,\"contactPersonBankID\":0,\"contactPersonRefCode\":1,\"titleID\":0,\"firstName\":\"\",\"middleName\":null,\"lastName\":\"\",\"genderID\":0,\"designation\":\"\",\"workPhone\":\"\",\"homePhone\":null,\"fax\":null,\"mobile\":\"\",\"email\":\"\",\"houseNo\":\"\",\"flat\":null,\"section\":null,\"block\":null,\"street\":null,\"cityID\":0,\"stateID\":null,\"countryID\":0,\"zip\":null,\"isMainContact\":0,\"insertUserID\":100000001,\"editUserID\":null,\"lastUpdate\":\"1899-12-31T18:00:00.000Z\",\"isSelected\":false,\"isEnabled\":false}],\"billingAddressList\":[{\"countryName\":null,\"cityName\":null,\"stateName\":null,\"addressType\":null,\"contactType\":null,\"contactPersonName\":null,\"contactPersonMobile\":null,\"contactPersonEmail\":null,\"addressDetails\":null,\"objectID\":-3,\"id\":2,\"locationID\":1,\"addressRefID\":0,\"addressBillingID\":-1,\"addressShippingID\":0,\"addressRefCode\":1,\"addressTypeID\":100000040,\"houseNo\":\"\",\"flat\":null,\"section\":null,\"block\":null,\"street\":null,\"cityID\":0,\"stateID\":null,\"countryID\":0,\"phone\":\"\",\"fax\":null,\"mobile\":\"\",\"zip\":\"\",\"email\":\"\",\"pOBox\":null,\"contactPersonID\":0,\"contactTypeID\":0,\"insertUserID\":100000001,\"editUserID\":null,\"lastUpdate\":\"1899-12-31T18:00:00.000Z\",\"isSelected\":false,\"isEnabled\":false}],\"shippingAddressList\":[{\"countryName\":null,\"cityName\":null,\"stateName\":null,\"addressType\":null,\"contactType\":null,\"contactPersonName\":null,\"contactPersonMobile\":null,\"contactPersonEmail\":null,\"addressDetails\":null,\"objectID\":-4,\"id\":3,\"locationID\":1,\"addressRefID\":0,\"addressBillingID\":0,\"addressShippingID\":-1,\"addressRefCode\":1,\"addressTypeID\":100000041,\"houseNo\":\"\",\"flat\":null,\"section\":null,\"block\":null,\"street\":null,\"cityID\":0,\"stateID\":null,\"countryID\":0,\"phone\":\"\",\"fax\":null,\"mobile\":\"\",\"zip\":\"\",\"email\":\"\",\"pOBox\":null,\"contactPersonID\":0,\"contactTypeID\":0,\"insertUserID\":100000001,\"editUserID\":null,\"lastUpdate\":\"1899-12-31T18:00:00.000Z\",\"isSelected\":false,\"isEnabled\":false}],\"bankList\":[{\"countryName\":null,\"cityName\":null,\"stateName\":null,\"objectID\":-5,\"id\":4,\"locationID\":1,\"bankRefID\":-1,\"bankRefCode\":0,\"bankName\":\"\",\"branchName\":null,\"houseNo\":\"\",\"flat\":null,\"section\":null,\"block\":null,\"street\":null,\"cityID\":0,\"stateID\":null,\"countryID\":0,\"zip\":\"\",\"pOBox\":null,\"acctName\":null,\"acctNumber\":\"\",\"swiftCode\":null,\"iBANNumber\":null,\"aBANumber\":null,\"phone\":\"\",\"mobile\":null,\"fax\":null,\"email\":\"\",\"webSite\":null,\"insertUserID\":100000001,\"editUserID\":null,\"lastUpdate\":\"1899-12-31T18:00:00.000Z\",\"isSelected\":false,\"isEnabled\":false,\"contactPersonList\":[]}]}"
I have written code for sending
$http({
url: remoteService + '/SaveDraft',
method: 'POST',
data: $.param({ jsonData: strObj }),
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
//params: { jsonData: strObj },
//timeout: d,
//cache: d,
//transformRequest: d,
//transformResponse: d
}).then(function (results) {
return results;
}).catch(function (e) {
throw e;
});
and Here is my api controller method
[HttpPost]
public int SaveDraft(string jsonData)
{
try
{
return 1;
}
catch (Exception)
{
throw;
}
}
What is problem of my code. please help me. Thanks
If you want to pass a large string that for cause you have to use two method one is javascript and another is api method.
The java script method look like this
var data = {
Data: strObj
};
$http({
url: url,
method: 'POST',
data: data,
headers: { 'Content-Type': 'application/json; charset=UTF-8' },
//params: { jsonData: "I am shohel rana" },
//timeout: 10,
//cache: false,
//transformRequest: false,
//transformResponse: false
}).then(function (success) {
return success;
}).catch(function (e) {
throw e;
});
and the api method is
[HttpPost]
public bool SaveDraft([FromBody]object draft)
{
try
{
}
catch (Exception)
{
throw;
}
}
I'm trying to use the ajax blockmanager plugin to manage my jquery ajax requests, but I'm not sure how to implement it...
// Follow button click event
$('#loginBtn').click(function () {
var that = this;
var request = {
'username': $('#txtUsername').val(),
'password': $('#txtPassword').val()
};
var params = $.toJSON(request);
ajaxManager.add($.ajax({
type: "POST",
url: "ajax/Login.aspx/Login",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d === true) {
window.location = "dashboard.aspx";
}
else {
$('#errorMessage').slideDown();
}
}
}));
I know it's a bit outdated question... But if anyone comes across this issue:
You are passing the already created/started request as a parameter to the manager.
You should only pass its options. The request will be created and handled by the manager.
ajaxManager.add({
type: "POST",
url: "ajax/Login.aspx/Login",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result.d === true) {
window.location = "dashboard.aspx";
}
else {
$('#errorMessage').slideDown();
}
}
});
Do you have ajaxManager instantiated?
//create an ajaxmanager named cacheQueue
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: true,
cacheResponse: true
});
You first create the manager
this.ajaxManager = $.manageAjax.create("aiapi", {
queue: true,
cacheResponse: true,
maxRequests: 3,
abort: this.abortCallback
});
where the queue of calls is active, max concurrent requests are 3, and the caching is enabled. The common abortCallback is like
this.abortCallback = function (response) {
Logger.log("APIManager.abortCallback " + Utils.toString(response));
};
It's convenient to add the common ajaxSetup setup like
$.ajaxSetup({
cache: true,
timeout: 10 * 1000
});
Here you can see the response timeout in msec set to 10 sec.
You then do a GET like
this.DoGet = function (url, method, timeout) {
return new Promise((resolve, reject) => {
var options = {
type: 'GET',
url: url + method,
contentType: "application/json",
timeout: (15 * 1000) // sets timeout to 60 seconds
};
if (timeout) options.timeout = timeout;
const errorCallback = function (error) {
console.error(error);
return reject(error);
};
const successCallback = function (data) {
return resolve(data);
};
const completeCallback = function (data) {
return resolve(data);
};
options.error = errorCallback;
options.success = successCallback;
//options.complete= completeCallback;
$.manageAjax.add("default-queue", options);
/*$.ajax(options)
.done(function (data) {
return resolve(data);
})
.fail(function (error) {
console.error(error);
return reject(error);
})
.always(function () {
// called after done or fail
});*/
});
You can see in the comment the version without the ajax manager. And it the same way to POST is like
this.DoPost = function (url, method, body, timeout) {
try {
body = JSON.stringify(body);
} catch (error) {
console.error(body);
return reject(error);
}
return new Promise((resolve, reject) => {
var options = {
type: 'POST',
url: url + method,
data: body,
contentType: "application/json",
dataType: 'json',
timeout: (15 * 1000) // sets timeout to 60 seconds
};
if (timeout) options.timeout = timeout;
const errorCallback = function (error) {
console.error(error);
return reject(error);
};
const successCallback = function (data) {
return resolve(data);
};
options.error = errorCallback;
options.success = successCallback;
$.manageAjax.add("default-queue", options);
/*$.ajax(options)
.done(function (data) {
return resolve(data);
})
.fail(function (error) {
console.error(error);
return reject(error);
})
.always(function () {
// called after done or fail
});*/
});
}//DoPost
The important thing here is the name of the ajax queue when adding a new GET / POST request via the api
$.manageAjax.add("default-queue", options);
This means basically that you can have one or more queues, that improves your requests parallelism.