CODEWITHSUNDEEP
c#jqueryhtmlasp.net-mvc-4
Xander Kage
Xander Kage

Reputation: 199

Show Thumbnail of uploaded pic - MVC4

I am working on an application in MVC4 C#

I have a Details page where a button "Upload Photo" is present. On click of the button , a pop up page opens (via Jquery) where I can upload&crop pics. Once cropped , I need to click "Confirm Pic" button present in the pop-up page. On click of "Confirm Pic", this pop up should get closed and the thumbnail of the cropped pic needs to be displayed on the parent page i.e. Details screen.

Issue: When I click "Confirm Pic" button, form post occurs on the parent page, due to which parent page is also getting refreshed , as a result I am losing all th unsaved data on the parent page

Currently I am out of ideas :( :( Any ideas are appreciated..

Upvotes: 0

Views: 440

Answers (1)

Bertrand KHE
Bertrand KHE

Reputation: 136

On click of the button, instead of opening a popup page, you should display the form in a modal. Then when you upload your cropped image, you should do it using ajax.

EDIT

$("#form").on("submit", function(e) {
  e.preventDefault();
  $.ajax({
    url: 'urlHere',
    type: 'POST',
    data: new FormData(this),
    processData: false,
    contentType: false
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="file" name="myFile">
  <input type="submit">
</form>

You should know that it will not work in IE before version 10.

Upvotes: 1

Related Questions