Image upload with Knockout and webapi c#

I am trying to upload an image using Knokout JS and web api. This my code

<div class="row">
<div class="col-sm-4">
    <h3>Send Feedback</h3>
    <form data-bind="submit: sendFeedback">
        <div class="form-group">
            <label>Feedback</label>
            <textarea class="form-control" data-bind="value: feedbackText"></textarea>
        </div>
        <div class="form-group">
            <label>Version Id</label>
            <input class="form-control" type="text" data-bind="value: versionId" />
        </div>
        <div class="form-group">
            <label>Image</label>

            <input class="form-control" type="file"
                   data-bind="file: {data: fileInput, name: fileName, reader: someReader}" />
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

I am using this custom binding

https://github.com/TooManyBees/knockoutjs-file-binding

Then in my script code I am doing this

    self.sendFeedback = function () {
    self.result('');

    var feedBackData = {
        versionId: self.versionId(),
        text: self.feedbackText(),
        screenShot: self.fileInput
    };

    $.ajax({
        type: 'POST',
        url: apiUrl + '/Feedback/Add',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(feedBackData)
    }).done(function (data) {
        self.result("Done!");
    }).fail(showError);

}

I am uncertain about the server part of the code. I have written this so far

    public void Add(HttpPostedFileBase screenShot, String versionId, String text)
    {
        String imgId = null;

        int count = HttpContext.Current.Request.Files.Count;

        if (screenShot != null && screenShot.ContentLength > 0)
        {
            Images img = Images.Create().Save();
            imgId = img.Id;
            BlobHelper.PutFile(imgId, screenShot.InputStream);
        }

        Feedback.Create(versionId, text, imgId).Save(); 

    }

Any thoughts on how to do this?

Answers


The fileInput contains the base64-encoded file data. It's a string, so HttpPostedFileBase would not work.

Change the form HTML:

  <input class="form-control" type="file"
               data-bind="file: {data: fileInput}" />

Change the viewmodel code as follows:

// store file data here
self.fileInput = ko.observable(); // is this present already?

var feedBackData = {
        versionId: self.versionId(),
        text: self.feedbackText(),
        screenShot: self.fileInput()
    };

$.ajax({
        type: 'POST',
        url: apiUrl + '/Feedback/Add',
        contentType: 'application/json; charset=utf-8',
        data: ko.toJSON(feedBackData)
    }).done(function (data) {
        self.result("Done!");
    }).fail(showError);

If the controller method is in an API controller it should accept JSON and the model binder will extract the values:

public void Add(String screenShot, String versionId, String text)
    {
        String imgId = null;

        if(!String.IsNullOrEmpty(screenShot))
        {
            Byte[] data = Convert.FromBase64String(screenShot);

        // rest of code omitted

Sorry have not been able to test this for syntax etc. but should put you on the right track.

A good tip for debugging Knockout pages is to use this line while developing so you can see what is happening in your viewModel:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

See http://www.knockmeout.net/2013/06/knockout-debugging-strategies-plugin.html for more help.


Need Your Help

opentok-android-sdk-ui sample app not working

android android-studio opentok

I downloaded opentok/opentok-android-sdk-ui application for text-chat from github.

Log4cplus: DailyRollingFileAppender rolls the file whenever we close and open the appender again

log4j rollingfileappender log4cplus

As per the documentation, DailyRollingFileAppender will do the file rolling at midnight of each day. But, if we close the appender and open the new appender for same log file, then it roll over the