1

I have the following in my View

<div name="image-upload-section" class="control-label">
  @using (Ajax.BeginForm("UploadAdditionalImage", "Image", "UploadAdditionalImage", ajaxOptions, new { enctype = "multipart/form-data" })) {
  <label>Upload Image:</label>
  <input name="files" type="file" id="uploadAdditionalImage" onchange="PreviewAdditional();" />
  <input type="submit" value="Upload Image" class="btn btn-default" />}
  <img id="uploadAdditionalImagePreview" style="max-height:200px;" />
</div>
<div name="imageGallery" id="imageGallery"></div>

<script>
  function PreviewAdditional() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadAdditionalImage").files[0]);

    oFReader.onload = function(oFREvent) {
      document.getElementById("uploadAdditionalImagePreview").src = oFREvent.target.result;
    };
  }
</script>

When I include:

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>

My controller receives files as null, but without unobtrusive-ajax it works fine, as you would have guessed it returns an obtrusive partial view.

I've tried OnSuccess and Update in AjaxOptions, but they do not seem to work.

Are there any workarounds for this? I probably missed something due to lack of experience with jQuery and JavaScript.

I have two forms on a single view and the one above should upload files and return a list objects(URL, Id, etc.).

halfer
  • 19,824
  • 17
  • 99
  • 186
Wayfind3r
  • 23
  • 4
  • The best approach to start with would be to find out the error it is causing when you include the script - have a look at the dev tools. – Zaki Mar 30 '16 at 13:46
  • My controller receives a HttpPostedFileBase file, when I include the ajax library file is null. If I don't include it it works, but it eventually returns only a partial view and I have to insert that partial view without refreshing the page as it is a very lengthy form. – Wayfind3r Mar 30 '16 at 13:54
  • 1
    this might help you http://stackoverflow.com/questions/20643512/upload-is-null-after-adding-jquery-unobtrusive-ajax-js-reference – Zaki Mar 30 '16 at 13:58
  • You cannot upload files using `Ajax.BeginForm()`. You need to use `$.ajax()`and `FormData` - refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) for an example –  Mar 30 '16 at 22:26

0 Answers0