0

I have a form action like below:

<form action="@Url.Action("Upload", "files")" id="uploadThem" method="post" enctype="multipart/form-data">
                <label for="file1">Attach files:</label>
                <div>
                    <input type="file" name="file" id="file1" />
                </div>
     </form>

and my jquery keeps uploading them when triggered... what trigger this is a button it does few other things and then submits the attachments.

   $('form#uploadTheminput[name="file"]').each(function() {
    if ($(this).val()) {
        $('form#uploadThem').submit();
   }});

what I want to be able to add a knockout observable string at the end of the URL before posting.

Just like below

   @Url.Action("Upload", "files")" + aKnockoutObservableString

I tried the attribute binding but I was not successful.

Carrie Kendall
  • 11,124
  • 5
  • 61
  • 81
NoviceDeveloper
  • 1,270
  • 3
  • 15
  • 41
  • 3
    You're mixing server-side and client-side. Using the `attr` binding is the right way to go. If you have an `Id` property in your view model you could bind it to a link like: ``. Here is [a brief example](http://jsfiddle.net/u7Lo6k7d/) – Carrie Kendall Feb 18 '15 at 23:06

1 Answers1

-3

Edit: Well @NoviceDeveloper (excuse me, pun intended), (apparently this is perceived as potentially offensive, while it was just tongue-in-cheek speak).

Usually if you want to provide a value based on another observable, use a computed observable. For example, suppose the other observable string you wanted to append was a query string containing the file type, like so: 'filename.extension&type=filetype'. You could have the following basic KO VM:

var app = { input: ko.observable('') }; // this is your viewmodel
app.fileType = ko.computed(function() { 
    var val = this.input(), 
        extension = val.slice(val.lastIndexOf('.')+1).toLowerCase();
    switch(extension) { // didn't include all, just an example
        case 'png':
        case 'jpeg':
        case 'gif':
            return 'image';
            break;
        case 'xml':
        case 'json':
            return 'data';
            break;
        default: 
            return 'unknown';
    };
    // you could also prefix the path with a known path, eg.
    // return 'my/custom/path' + app.realInput();
}, app);
// the following function gets called on button click
app.submitFile = function() { $('#myForm').submit(); }

However, the file input type is notorious for providing unreliable values in different browsers; eg Google Chrome will give you a value of C:/fakepath/yourfile.extension while IE will include the entire, real path for example. So if you really want to use the file input, you should strip this off, and have a hidden realInput updated with the real value you need, like so:

<input type="hidden" name="file" id="file1hidden" data-bind="value: realInput" />

Where realInput is a computed observable in which you add your appended string:

app.realInput = ko.computed(function() { 
    //replace dummmy string like Chrome's 'C:/fakepath'
    var finalInput = app.input().replace(/.*[\/\\]/g,''); 
    finalInput = finalInput + '&type=' + app.fileType();
    return finalInput;
}, app);

Test it here

webketje
  • 10,376
  • 3
  • 25
  • 54
  • don't be a dick. As @CarrieKendall commented above, the issue is mixing client- and server-side markup. To use knockout, it all needs to be client-side. – dfperry Feb 19 '15 at 12:42
  • I think we are not on the same page. – NoviceDeveloper Feb 19 '15 at 13:40
  • @dperry really? This post is not meant as offensive at all, and if you read it as such, I can't be held accountable for your lack of appreciation for tongue-in-cheek humor. Now if I misunderstood the question and provided an invalid answer, I totally agree with getting downvoted. – webketje Feb 19 '15 at 15:21
  • Whether intended as offensive or not, that comment wasn't constructive, nor was it something that someone needing help would want or need to hear. – dfperry Feb 19 '15 at 15:35
  • @dperry The answer is constructive. If you complain about one small part of the answer you might as well go and downvote [this very famous SO answer](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454) as the only 'constructive part' is the suggestion at the end. Please read the moderator's note as well. – webketje Feb 19 '15 at 16:02
  • I wasn't complaining about the answer, just that little quip at the beginning. And comparing your answer to that one is meaningless. – dfperry Feb 19 '15 at 16:04