Uploading photos to Facebook in ASP.NET Facebook app

3.1k views Asked by At

I've been cracking my head over this and reading all the available docs I can find but still cannot find a solution, so I am posting here.

First, I started here, the official Facebook guide on posting a photo via the Graph API.

https://developers.facebook.com/blog/post/498/

Since it's in PHP, I rewrote it in ASP.NET C#. The code works in that the photo was upload successfully, and I got the JSON response with the photo's ID.

I need a way to read this ID back, so I suppose I'd have to do the upload from the server side. However, this would mean that the user will need to upload to my server first, and my code would then send this over to Facebook's API.

My question is: Is there a way to do this without first saving the file to the server's disk? Since at this point of time I'd have a data buffer of the file uploaded, can I somehow send this over to the Graph API? I find it rather redundant to first save the file and then upload again.

I thought of doing this using Javascript/AJAX but there doesn't seem to be a way either. Facebook's Javascript API does not provide for this.

I also tried to look at the various libraries such as this but the documentation is rather lacking. I also looked at this article but it assumes that I already have a file to upload.

Can the experts here post some sample code for doing this (if it's possible at all) or point me to the correct direction for what I needed. While we are on this, is there a way to trigger Facebook's photo upload dialog or do I have to build my own from scratch?

Thanks a lot in advance.

1

There are 1 answers

0
ckng On

Ok, after some tinkering around I think I found the solution.

In the aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="upload.aspx.cs" Inherits="photocontest_upload" %>
<!DOCTYPE HTML>
<html lang="en">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        File: <asp:FileUpload ID="fileUpload" runat="server" /><br />
        Caption: <asp:TextBox ID="caption" runat="server"></asp:TextBox><br />
        <asp:Button id="btnSubmit" runat="server" onclick="btnSubmit_Click"  text="Upload" />
    </div>
    </form>
    <asp:Literal ID="msg" runat="server"></asp:Literal>
</body>
</html>

Codebehind (the authentication portion was converted from the sample PHP code given by Facebook.) No error handling yet

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using Facebook;

public partial class photocontest_upload : System.Web.UI.Page
{
    protected string access_token = "";
    protected string form_url = "";

    protected void Page_Load(object sender, EventArgs e)
    {
        string app_id = "your_app_id";
        string app_secret = "your_app_secret";
        string post_login_url = "your_post_login_url";

        string code = Request["code"] ?? "";

        if (code == "")
        {
            string dialog_url = "http://www.facebook.com/dialog/oauth?" + "client_id=" + app_id + "&redirect_uri=" + Server.UrlEncode(post_login_url) + "&scope=publish_stream";
            Response.Redirect(dialog_url);
        }
        else
        {
            string token_url = "https://graph.facebook.com/oauth/access_token?client_id=" + app_id + "&redirect_uri=" + Server.UrlEncode(post_login_url) + "&client_secret=" + app_secret + "&code=" + code;
            string response = InstaSharp.HttpClient.GET(token_url);
            access_token = HttpUtility.ParseQueryString(response).Get("access_token");
            form_url = "https://graph.facebook.com/me/photos?access_token=" + access_token;
        }
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (fileUpload.HasFile)
        {
            FacebookClient facebookClient = new FacebookClient(access_token);
            FacebookMediaObject mediaObject = new FacebookMediaObject
            {
                FileName = "file.jpg",
                ContentType = "image/jpeg"
            };

            mediaObject.SetValue(fileUpload.FileBytes);

            IDictionary<string, object> upload = new Dictionary<string, object>();
            upload.Add("name", caption.Text);
            upload.Add("@file.jpg", mediaObject);

            dynamic res = facebookClient.Post("/me/photos", upload) as JsonObject;
            form1.Visible = false;

            msg.Text = "<p>Photo uploaded successfully. " +
                "<a href=\"https://www.facebook.com/photo.php?fbid=" + res.id + "\">View on facebook</a><p>" +
                "<p><a href=\"upload.aspx\">Back</a>";
        }

    }
}

This appears to work but I still don't have details on what FacebookMediaObject and facebookClient() parameters are supposed to be. Does anyone know where I can get the full documentation for the Facebook C# SDK? Thanks!