So I've been working on this API and I didn't have issues until now when I tried figuring out how to make a POST method that takes an image as a parameter. In theory, this is how it should work:
From a web page, you will upload an image and then using the route to the API, the image information will be sent to the database like this:
Now, I've been searching for an answer to this on different several pages but none of them actually helped. In fact, the only guides that I've found were about integrating that method into a Web Api (see https://www.c-sharpcorner.com/article/uploading-image-to-server-using-web-api-2-0/) but this doesn't really work for me as I can't inherit some of the methods in my solution. For example, using the link above, I had issues with HttpContext.Current, and I would guess that is because of the solution that I am currently using. However, that's another question to be asked.
So my methods look pretty much like this:
public class RecipeController : Controller
{
private readonly Func<SqlConnection> _connFactory;
public RecipeController(Func<SqlConnection> connFactory)
{
_connFactory = connFactory;
}
[Route("v1/recipe/{recipeBy}")]
[HttpGet()]
public List<Recipe> GetRecipes(string recipeBy)
{
using (var con = _connFactory())
{
con.Open();
return con.Query<Recipe>("SELECT * FROM dbo.Recipe WHERE RecipeBy = #recipeBy", new { recipeBy }).ToList();
}
}
....
I am using Dapper to pass the values to the database.
Therefore, my question is: How can I write a POST method that takes an uploaded image as a parameter and then passes it to the database? I do realize that this question is pretty vague, as I didn't even provide reproducible code. The thing is, until now I didn't even figure out a correct way to start working on, so I couldn't really provide any useful code that you can help me with. Any tips, hints, advice, tutorials... Anything is welcome!
You can accomplish this by using the Html5 FileReader class to read the image to a string on the client-side and then post this to the api end-point:
function UploadImage()
{
var file = input[0].files[0];
var reader = new FileReader();
reader.onloadend = function () {
var imageDataString = reader.result;
// post the fileString value to your api here
}
if (file) {
reader.readAsDataURL(file);
}
}
Then on your Controller you would convert the Base64String into a byte[] and store it in your db:
if (imageDataString != null && imageDataString != String.Empty)
{
string imageDataParsed = imageDataString.Substring(imageDataString.IndexOf(',') + 1);
byte[] imageBytes = Convert.FromBase64String(imageDataParsed);
}
Related
I am relatively new to programming in C# (Learning on my own for a school project) and decided to try using TweetInvi to implement Twitter functionality.
So far it's going good, got the authentication and publishing up and running, but I'm struggling to find out how to use the DestroyTweet() method.
It, and many other methods takes a tweetID parameter, which I can't figure out of how to find for a specific tweet.
Using the following code to publish a tweet, how can i find the tweetID of this tweet?
public ITweet publishTweet(string text)
{
return Tweet.PublishTweet(text);
}
// Snippet from a test method in main class.
twitter.twitterUser.publishTweet(System.Console.ReadLine());
// Still working on GUI so using ReadLine for now.
It's probably an easy solution, but I just can't figure it out!
Thanks in advance.
You can try something like this:
public string PublishTweet(string text)
{
var appCredentials = new TwitterCredentials(_apiKey,_apiSecret, _accessToken, _accessTokenSecret);
Tweetinvi.Auth.SetCredentials(appCredentials);
text = "my tweet";
var publishedTweet = Tweetinvi.Tweet.PublishTweet(text);
var tweetId = publishedTweet.Id.ToString();
return tweetId;
}
You just need to get the published tweet into a var for the result of the PublishTweet() method then you select the field(s) you need.
Simple solution. As explained before you need to take the tweet back from PublishTweet.
string text = "text";
ITweet tweet = Tweet.PublishTweet(text);
bool destroySuccess = tweet.Destroy();
So I'm building an app with twilio voice, and I've got all the phonecall stuff working. But I'm having a little trouble understanding which parameters my callback should have.
I've registered the URL as described in the docs:
options.From = formatPhoneNumber(callout.callback_number);
options.To = formatPhoneNumber(offer.employee_phone_number);
options.Url = TwilioCallBotController.TwilioCalloutScriptURL;
options.StatusCallback = TwilioCallBotController.StatusCallbackURL;
options.StatusCallbackEvents = new []{"initiated", "ringing", "answered", "completed" };
options.StatusCallbackMethod = "POST";
I've also made a callback method here, but I'm not having much luck finding out how the parameters are supposed to work with their API. I'm kindof at a loss as to what could be the reason behind this one not working:
[HttpPost]
public ActionResult TwilioStatusCallback()
{
var twiml = new Twilio.TwiML.TwilioResponse();
twiml.Say("This is a test");
string CallSid = Request.Form["CallSid"];
string CallStatus = Request.Form["CallStatus"];
Debug.WriteLine("Status Callback Delivered");
Shift_Offer shoffer = db.Shift_Offers.Where(s => s.twillio_sid == CallSid).ToList()[0];
shoffer.status = CallStatus.ToString();// + DateTime.Now.ToString();
return TwiML(twiml);
}
Edit:
So it turns out that the API is very sensitive about the method signature (the call was previously throwing a method not found exception in a number of microsoft DLLs, including System.Web and System.Web.Mvc.
So I've actually gotten the software to call the method by using an empty method signature (no parameters).
However I'm still having trouble getting the parameters from the HTTPPOST
Edit: So upon further investigation I've managed to inspect the Request. The values I'm after exist in Request.Form["foo"], but they don't seem to be getting put into the two strings I have declared. I've removed the ["HttpPost"] attribute to try to troubleshoot the issue, but I'm really at a loss as to why I can see the values in the debugger, but they're not translating into memory.
public ActionResult TwilioStatusCallback()
{
var twiml = new Twilio.TwiML.TwilioResponse();
string sid = Request.Form["CallSid"];
string status = Request.Form["CallStatus"];
Shift_Offer shoffer = db.Shift_Offers.Where(s => s.twillio_sid == sid).ToList()[0];
shoffer.status = status;// + DateTime.Now.ToString();
return TwiML(twiml);
}
Last issue was that the database wasn't being saved.
Just added a db.SaveChanges() and we're good.
Edit: Sorry - now that I've understood the problem a bit better, I think my problem lies elsewhere
I have 2 asynchronus requests.
The first is this:
public void DownloadWebData(Uri apiUrl)
{
WebClient client = new WebClient();
client.DownloadDataCompleted += DownloadDataCompleted;
client.DownloadDataAsync(apiUrl);
}
public void DownloadDataCompleted(object sender, DownloadDataCompletedEventArgs e)
{
string result = System.Text.Encoding.UTF8.GetString (e.Result);
Uri downloadLink = (GetUri(result));
}
Basically it makes a simple url based API request to a remote webserver which returns some basic textual data over http. GetUri() just parses that data to extract an address from the data for an image to download.
I'm then using imageLoader in monotouch.dialog to download the image. All code is in the same class.
Edit: added the imageLoader code (I left the Console lines in because they serve reasonably well as comments).
public void downloadImage (Uri imageUri)
{
var tmp_img = ImageLoader.DefaultRequestImage (imageUri, this);
if (tmp_img != null)
{
adView.Image = tmp_img;
Console.WriteLine ("Image already cached, displaying");
}
else
{
adView.Image = UIImage.FromFile ("Images/downloading.jpg");
Console.WriteLine ("Image not cached. Using placeholder.");
}
}
public void UpdatedImage (System.Uri uri)
{
adView.Image = ImageLoader.DefaultRequestImage(uri, this);
}
You missed to check if e.Result actually contains something. The download might as well have failed and e.Result is null. Add some basic error handling to your code.
if you are using DownloadWebData inside a for loop, it will be better you generate seperate functions for DownloadDataCompleted event.
You can use anonymous function inside DownloadWebData().
client.DownloadDataCompleted +=(s,e)=>{
string result = System.Text.Encoding.UTF8.GetString (e.Result);
Uri downloadLink = (GetUri(result));
};
After realizing I was asking the wrong question, I finally figured it out here:
Hand back control to main UI thread to update UI after asynchronus image download
I'm tryping to use JSON to update records in a database without a postback and I'm having trouble implementing it. This is my first time doing this so I would appreciate being pointed in the right direction.
(Explanation, irrelevant to my question: I am displaying a list of items that are sortable using a jquery plugin. The text of the items can be edited too. When people click submit I want their records to be updated. Functionality will be very similar to this.).
This javascript function creates an array of the objects. I just don't know what to do with them afterwards. It is called by the button's onClick event.
function SaveLinks() {
var list = document.getElementById('sortable1');
var links = [];
for (var i = 0; i < list.childNodes.length; i++) {
var link = {};
link.id = list.childNodes[i].childNodes[0].innerText;
link.title = list.childNodes[i].childNodes[1].innerText;
link.description = list.childNodes[i].childNodes[2].innerText;
link.url = list.childNodes[i].childNodes[3].innerText;
links.push(link);
}
//This is where I don't know what to do with my array.
}
I am trying to get this to call an update method that will persist the information to the database. Here is my codebehind function that will be called from the javascript.
public void SaveList(object o )
{
//cast and process, I assume
}
Any help is appreciated!
I have recently done this. I'm using MVC though it shouldn't be too different.
It's not vital but I find it helpful to create the contracts in JS on the client side and in C# on the server side so you can be sure of your interface.
Here's a bit of sample Javascript (with the jQuery library):
var item = new Item();
item.id = 1;
item.name = 2;
$.post("Item/Save", $.toJSON(item), function(data, testStatus) {
/*User can be notified that the item was saved successfully*/
window.location.reload();
}, "text");
In the above case I am expecting text back from the server but this can be XML, HTML or more JSON.
The server code is something like this:
public ActionResult Save()
{
string json = Request.Form[0];
var serializer = new DataContractJsonSerializer(typeof(JsonItem));
var memoryStream = new MemoryStream(Encoding.Unicode.GetBytes(json));
JsonItem item = (JsonItem)serializer.ReadObject(memoryStream);
memoryStream.Close();
SaveItem(item);
return Content("success");
}
Hope this makes sense.
You don't use CodeBehind for this, you use a new action.
Your action will take an argument which can be materialized from your posted data (which, in your case, is a JavaScript object, not JSON). So you'll need a type like:
public class Link
{
public int? Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Url { get; set; }
}
Note the nullable int. If you have non-nullable types in your edit models, binding will fail if the user does not submit a value for that property. Using nullable types allows you to detect the null in your controller and give the user an informative message instead of just returning null for the whole model.
Now you add an action:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DoStuff(IEnumerable<Link> saveList)
{
Repository.SaveLinks(saveList);
return Json(true);
}
Change your JS object to a form that MVC's DefaultModelBinder will understand:
var links = {};
for (var i = 0; i < list.childNodes.length; i++) {
links["id[" + i + "]"] = list.childNodes[i].childNodes[0].innerText;
links["title[" + i + "]"] = list.childNodes[i].childNodes[1].innerText;
links["description[" + i + "]"] = list.childNodes[i].childNodes[2].innerText;
links["url[" + i + "]"] = list.childNodes[i].childNodes[3].innerText;
}
Finally, call the action in your JS:
//This is where I don't know what to do with my array. Now you do!
// presumes jQuery -- this is much easier with jQuery
$.post("/path/to/DoStuff", links, function() {
// success!
},
'json');
Unfortunately, JavaScript does not have a built-in function for serializing a structure to JSON. So if you want to POST some JSON in an Ajax query, you'll either have to munge the string yourself or use a third-party serializer. (jQuery has a a plugin or two that does it, for example.)
That said, you usually don't need to send JSON to the HTTP server to process it. You can simply use an Ajax POST request and encode the form the usual way (application/x-www-form-urlencoded).
You can't send structured data like nested arrays this way, but you might be able to get away with naming the fields in your links structure with a counter. (links.id_1, links.id_2, etc.)
If you do that, then with something like jQuery it's as simple as
jQuery.post( '/foo/yourapp', links, function() { alert 'posted stuff' } );
Then you would have to restructure the data on the server side.
I am using a jQuery Ajax control from this site http://abeautifulsite.net/2008/03/jquery-file-tree/
I have it all working. I tried to ask a support question but never heard back, thinking maybe someone on here can shed some light on the situation.
Basically what I am trying to do, is on a file selection run an action that returns a JsonResult, that gives more details about the file and then show them to the screen in a container. While I debug, the method gets hit, returns the correct data. After the return in the ajax call i get a error in firebug say the recursionlimit exceeded. I am not sure how to get around this...I thought I could use the callback of the fileTree(options, callback) method provided but that is not fired on selection of the file only the initialization of the file tree. Any ideas?
Heres what I did via JavaScript
function initFileTree() {
$('#fileTree').fileTree({ root: '/', script: '/Scripts/filetree/jqueryFileTree.aspx', multiFolder: false, expandEasing: 'easeOutBounce', collapseEasing: 'easeOutBounce' }, function(file) {
getFileDetails(file);
});
}
function getFileDetails(file) {
// alert(file);
$.getJSON('/Files.mvc/GetFileDetails', { Data: file }, function(data) {
$('#fileDetail').html('<h6>Selected File: ' + data.Length + '</h6>');
}, 'json');
}
Here is my action that take the data and returns a JsonResult
public virtual JsonResult GetFileDetails(string data)
{
string pageMessage = null;
FileInfo fileInfo = null;
try
{
fileInfo = new FileInfo(data);
}
catch (Exception e)
{
pageMessage = e.Message;
}
return Json(fileInfo);
}
Apparently returning a FileInfo obj is not acceptable for a JsonResult. Simplifying the return, I changed it to:
return Json("helloWorld");
and all my problems went away. Not sure why it cares that I was attempting to return a FileInfo type but either way problem solved when I changed it to return a string. So now I just create a small wrapper class to hold the data I want to pass back and life is good.
Thanks! Hope this helps someone else.