I'm trying to convert a image url from facebook login. I'd like to this task using Vue.
getDataUri(url, callback){
let image = new Image()
image.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = this.naturalWidth
canvas.height = this.naturalHeight
canvas.getContext('2d').drawImage(this, 0, 0)
callback(canvas.toDataUrl('image/png').replace(/^data:image\/(png|jpg);base64,/, ''))
callback(canvas.toDataURL('image/png'))
}
image.src = url
},
retrivePhoto(id){
FB.api('/'+id+'/picture?redirect=false&height=120&width=120','GET',{},
function(response) {
console.log(this.getDataUri(response.data.url));
});
},
When I tried to run the code, I got this javascript error
all.js:108 Uncaught TypeError: this.getDataUri is not a function
The context changed, use arrow functions or Function.prototype.bind to call getDataUri on the right context:
FB.api('/' + id + '/picture?redirect=false&height=120&width=120',
'GET', {}, response => {
console.log(this.getDataUri(response.data.url));
}
);
or
FB.api('/' + id + '/picture?redirect=false&height=120&width=120',
'GET', {}, function(response) {
console.log(this.getDataUri(response.data.url));
}.bind(this)
);
Related
I am new in.net core MVC. I want to send data from view to controller in JSON format.
I am creating dynamic table for saving data of data. post I want to send this newly added data controller.
Kindly see the logic and update me if anything I doing wrong or how can I achieve my aim.
I want to retrieve the values in SubmitExpense() method
Here is the javascript:
$(function () {
$('#btnSave').on('click', function () {
//alert('1111');
var ExpenseCliamViewModel = {};
var ExpenseClaimLineItems = new Array();
$("#myTable:eq(0) TR").each(function () {
var row = $(this);
var ExpenseClaimLineItem = {};
//ExpenseCliamViewModel.ExpenseClaimLineItem.
ExpenseClaimLineItem.LineItemTitle = row.find("TD").eq(1).html();
ExpenseClaimLineItem.LineItemDescription = row.find("TD").eq(2).html();
ExpenseClaimLineItem.ExpenseTypeName = row.find("TD").eq(3).html();
ExpenseClaimLineItem.LineItemAmount = row.find("TD").eq(4).html();
ExpenseClaimLineItem.LineItemClaimDate = row.find("TD").eq(5).html();
// alert(ExpenseClaimLineItem);
ExpenseClaimLineItems.push(ExpenseClaimLineItem);
});
ExpenseCliamViewModel.ExpenseClaimLineItem = ExpenseClaimLineItems;
ExpenseCliamViewModel.Title = $("#Title").val();
ExpenseCliamViewModel.Description = $("#Description").val();
ExpenseCliamViewModel.TotalAmount = $('#lblGrandTotal').html();
// ExpenseCliamViewModel.Title = $("#Title").val();
console.log(JSON.stringify(ExpenseCliamViewModel));
if (ExpenseCliamViewModel != null) {
$.ajax({
type: "POST",
url: "/Expense/SubmitExpense",
data: JSON.stringify(ExpenseCliamViewModel),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response != null) {
alert('Sucess');
} else {
alert("Something went wrong");
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
else
alert('failed');
});
});
Here is the controller C# method:
[HttpPost]
public JsonResult SubmitExpense(ExpenseCliamViewModel expenseCliamViewModelData)
{
int insertedRecords = 1;
return Json(insertedRecords);
}
In your ajax, try :
$.ajax({
type:'POST',
url:"/Expense/SubmitExpense",
data:ExpenseCliamViewModel,
success:function(data){alert("success")},
error:function(){alert("error")}
});
Update:
Change your code $("#myTable:eq(0) TR") like below :
$("#myTable").find("tr:gt(0)").each(function () {
...
});
Result:
JS function:
(function () {
//fix to dismiss tooltips of iOS Safari
if ('ontouchstart' in document.documentElement) {
$('body').css('cursor', 'pointer');
}
})();
function getOrderProgressBar(orderNumber) {
$('#order-status-container').hide();
$.ajax({
url: '/GetOrderProgressBar',
type: "POST",
data: {
orderNumber: orderNumber
},
success: function (data) {
if (data.Success) {
var activeStepTitle = "";
var stepsFraction = "";
$(".order-progress-bar-container").empty();
var html = '<div class="order-progress-bar" data-current-step-index="' + data.CurrentActiveStepIndex + '" data-current-step-description="' + data.CurrentActiveStepDesctiption + '">';
I am needing to get the value of the last line "data.CurrentActiveStepDescription" I have tried several different ways to put the value out but cannot get the program to recognize the function.
Any help is greatly appreciated!! Thank you
I use Ionic 4 and Angular 7 with PHP as Back-end.
I am trying to upload files (images/videos/PDFs/audio).
Is there a general way to send it.
I tried to send image using camera plugin it returns the URI and it works on the app using img tag.
But I can't get the file it self to send it using formData
openCamera() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
};
this.camera.getPicture(options).then((imageData) => {
this.imageData = imageData;
this.image = (<any>window).Ionic.WebView.convertFileSrc(imageData);
// this.image works fine in img tag
this.sendMsg(this.image);
}, (err) => {
// Handle error
alert('error ' + JSON.stringify(err));
});
}
sendMsg(file?) {
const data = new FormData();
data.set('group_id', this.groupId);
data.set('text', this.msg);
if (file) {
data.set('file', this.image);
data.set('text', '');
}
this.messeges.push(data);
this._messengerService.postMsg(data).subscribe(
res => {
console.log('res ', res);
if (res.success === true) {
console.log('data added ', res);
}
}
);
}
I want the use the URI to get the actual file
Ionic Native plugin will return only base64. As per your question, you need to convert formdata. so, You need to convert base64 to formdata externally.
dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
and
profileUpdate(options) {
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpg;base64,' + imageData;
let data = this.dataURItoBlob(base64Image);
let formData = new FormData();
formData.append('profile', data, "filename.jpg");
//here you pass the formdata to to your API
})
I have some trouble declaring my controller using ui.router and requirejs.
I'm trying calling route from a variable (menu) to create dynamic route.
See my code below
controller declaration:
var Portal = angular.module('Portal');
Portal.controller('SUSR',['$scope', function($scope)
{
$scope.name = 'This my name';
}]);
this is my loader:
var menu = {
'SUSR':
['ACTIVITY',
'SETTINGS',
'TIMELINE'],
// 'SEU':
// ['MODULE'],
};
var loadController = function(controllerName) {
return ["$q","$rootScope", function($q,$rootScope) {
var deferred = $q.defer();
require([controllerName], function() {
deferred.resolve();
$rootScope.$apply();
});
return deferred.promise;
}];
}
_.each(menu,function(value,key){
var module = baseDirectories + key + '/' + key ;
$stateProvider.state('/' + key,{
url: '/' + key,
templateUrl : module + '.html',
controller: key,
resolve : loadController(module),
});
})
And I'm getting the error below :
Argument 'SUSR' is not aNaNunction, got undefined
Could you please tell me where the problem is?
thanks and regards.
I have a photo app that uploads photos to AWS. When testing the uploading photos feature on my localhost, my terminal throws the following error:
express deprecated res.send(status, body): Use
res.status(status).send(body) instead aws/aws.js:50:18
My photos DO save to AWS, im just wondering what this error is and how to fix it. Below is my aws code that the error refers too.
'use strict';
var AWS = require('aws-sdk'),
crypto = require('crypto'),
config = require('./aws.json'),
createS3Policy,
getExpiryTime;
getExpiryTime = function () {
var _date = new Date();
return '' + (_date.getFullYear()) + '-' + (_date.getMonth() + 1) + '-' +
(_date.getDate() + 1) + 'T' + (_date.getHours() + 3) + ':' + '00:00.000Z';
};
createS3Policy = function(contentType, callback) {
var date = new Date();
var s3Policy = {
'expiration': getExpiryTime(),
'conditions': [
['starts-with', '$key', 'images/'],
{'bucket': config.bucket},
{'acl': 'public-read'},
['starts-with', '$Content-Type', contentType],
{'success_action_status' : '201'}
]
};
// stringify and encode the policy
var stringPolicy = JSON.stringify(s3Policy);
var base64Policy = new Buffer(stringPolicy, 'utf-8').toString('base64');
// sign the base64 encoded policy
var signature = crypto.createHmac('sha1', config.secretAccessKey)
.update(new Buffer(base64Policy, 'utf-8')).digest('base64');
// build the results object
var s3Credentials = {
s3Policy: base64Policy,
s3Signature: signature,
AWSAccessKeyId: config.accessKeyId
};
// send it back
callback(s3Credentials);
};
exports.getS3Policy = function(req, res) {
createS3Policy(req.query.mimeType, function (creds, err) {
if (!err) {
return res.send(200, creds);
} else {
return res.send(500, err);
}
});
};
Replace res.send(statusCode, "something") with res.status(statusCode).send("something")
This should do it for your code:
exports.getS3Policy = function(req, res) {
createS3Policy(req.query.mimeType, function (creds, err) {
if (!err) {
return res.send(creds); //200 is not needed here, express will default to this
} else {
return res.status(500).send(err);
}
});
};