locked
Ajax File Upload.. RRS feed

  • Question

  • User-848409960 posted

    This is my Model

    public class Letter
    {

    public int Id { get; set; }

    public DateTime Date { get; set; }
    public string RefNo { get; set; }
    public string Author { get; set; }
    public string DespatchOffice { get; set; }
    public string Subject { get; set; }
    public string File_Url { get; set; }
    public int ThreadId { get; set; }

    }

    This is what i am trying to implement.

    1.Ajax Form to create new records and Saveing the file at the same time.. File_Url Is Supposed to be the location file is save.. files bas to be saved in Upload Folder... 

    2.Ajax form to edit record and replaceing the file if user uploaded new one.. The form must confirm the are you sure you want to replace the file...

    File would be A ms Word File..

     

    Saturday, May 18, 2013 1:52 AM

Answers

  • User-1657171777 posted

    If you need ajax, we can work through it, but here's how I would handle the file submission

    Create View:

    @using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
      // add your Letter model's form elements here
    
      <input type="file" id="myFile" name="myFile" />
    
      <input type="submit" value="Submit" />
    }

    Create Action:

    [HttpPost]
    public ActionResult MyAction(Letter model)
    {
      // Handle file upload first
      // give variable name to our file
      HttpPostedFileBase file = Request.Files[0];
    
      // specify the upload location we want to save to, and append the file to the path
      // Note: 'Path' requires "using System.IO" library at top of controller
      string mySysPath = Path.Combine("C:/myImages/", Path.GetFileName(file.FileName));
    
      // save the file to our upload directory
      file.SaveAs(mySysPath);
    
      // handle the rest of your model data here (save to db)
    
      return RedirectToAction("SomeOtherAction");
    }


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 19, 2013 11:58 AM

All replies

  • User-848409960 posted

    Up ^^^

    Saturday, May 18, 2013 3:10 AM
  • User-848409960 posted

    Up^^^ Very Urgent.. 

    Deadlines are near.. 

    Saturday, May 18, 2013 7:09 AM
  • User-848409960 posted

    ^^

    Sunday, May 19, 2013 1:42 AM
  • User-380788751 posted

    This is my Model

    public class Letter
    {

    public int Id { get; set; }

    public DateTime Date { get; set; }
    public string RefNo { get; set; }
    public string Author { get; set; }
    public string DespatchOffice { get; set; }
    public string Subject { get; set; }
    public string File_Url { get; set; }
    public int ThreadId { get; set; }

    }

    This is what i am trying to implement.

    1.Ajax Form to create new records and Saveing the file at the same time.. File_Url Is Supposed to be the location file is save.. files bas to be saved in Upload Folder... 

    2.Ajax form to edit record and replaceing the file if user uploaded new one.. The form must confirm the are you sure you want to replace the file...

    File would be A ms Word File..

     

    Looks like you'll have to combine your persistence logic with something similar to this:

    http://www.malsup.com/jquery/form/#file-upload

    http://64sqft.danapellerin.com/2010/06/25/uploading-files-via-jquery-form-plugin-asp-net-mvc/

    or this:

    http://www.html5rocks.com/en/tutorials/file/xhr2/

    or this:

    http://www.strathweb.com/2012/04/html5-drag-and-drop-asynchronous-multi-file-upload-with-asp-net-webapi/

    Sunday, May 19, 2013 7:31 AM
  • User-1657171777 posted

    If you need ajax, we can work through it, but here's how I would handle the file submission

    Create View:

    @using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
      // add your Letter model's form elements here
    
      <input type="file" id="myFile" name="myFile" />
    
      <input type="submit" value="Submit" />
    }

    Create Action:

    [HttpPost]
    public ActionResult MyAction(Letter model)
    {
      // Handle file upload first
      // give variable name to our file
      HttpPostedFileBase file = Request.Files[0];
    
      // specify the upload location we want to save to, and append the file to the path
      // Note: 'Path' requires "using System.IO" library at top of controller
      string mySysPath = Path.Combine("C:/myImages/", Path.GetFileName(file.FileName));
    
      // save the file to our upload directory
      file.SaveAs(mySysPath);
    
      // handle the rest of your model data here (save to db)
    
      return RedirectToAction("SomeOtherAction");
    }


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 19, 2013 11:58 AM
  • User-848409960 posted

    JohnLocke

    What about Doing it with ajax.

    Thanks for your reply.

    Monday, May 20, 2013 6:18 AM
  • User-1657171777 posted

    First, you should have a clearly defined reason for using AJAX.  Ajax is mostly used to avoid page refresh while presenting new/updated data.  If this is critical to your file upload View, then we can look at solutions.  Seems strange to use for a create View though...

    You'll need to determine which AJAX options you want performed after form submission.  For basic functionality, you should probably have an OnSuccess parameter that allows your action to return data back to your View.  You'll need to use script tags for the function.

    <script>
      function formSuccess(data)
      {
        if (data) {
          alert("Form submitted successfully");
        } else {
          alert("Form failed to submit");
        }
      }
    </script>
    
    @using (Ajax.BeginForm("MyAction", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "formSuccess" }, new { enctype = "multipart/form-data" }))
    {
      // form elements here
    }

    Action:

    [HttpPost]
    public bool MyAction(Letter model)
    {
      // set up success Boolean value
      bool isSuccess = false;
    
      if (ModelState.IsValid)
      {
        // process form data
        isSuccess = true;
      }
    
      return isSuccess;
    }

    Something like that...  it would really help if you gave a reason for why you need Ajax, as the example could be more specific to your needs.

    Monday, May 20, 2013 8:38 AM
  • User-848409960 posted

    I dunt know much about the mechanism and uploads...

    My Purpose was to learn Async Upload as i complete the project.

    This is the last module and the only one with uploads i think learning ajax upload will be an addition to my knowledge.

    It is not a recruitment as the app has to be deploy on intranet and the file will be uploaded in seconds.

    Monday, May 20, 2013 8:44 AM
  • User-1657171777 posted

    I highly suggest you check out the plural-sight video on ajax submission.  It's invaluable to see how it's done.  Please let me know if you have additional questions and I will help you through it.

    Here's the video -- VERY USEFUL.  Go through the entire thing, as it really helps with jquery and ajax

    http://pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building

    Monday, May 20, 2013 9:04 AM
  • User-848409960 posted

    Thanks alot..

    I have a question.

    var path = Path.Combine(Server.MapPath("~/App_Data/uploads/"+ letter.RefNo), file.ContentType.ToString());

    what i am trying to achive is..

    I wan to save the file on the directory such as

    its file name i letter.RegNo

    in /App_Data/uploads/ directory with its actual extention.. 

    Monday, May 20, 2013 9:12 AM
  • User-1657171777 posted

    I highly discourage you from using the App_Data folder as a storage unit.  If you want to store your images in your project folder, just create a folder from the root of your project (~/MyUploads/)

    2) the file should be saved with its actual extension using my example from the previous page.  I tested it myself.  You may not see the extension in Visual Studio.

    Monday, May 20, 2013 9:28 AM
  • User-848409960 posted

    My Problem was to find the extention of the file,

    Path.GetExtension(file.FileName);

    i am done with it.. thanks for your answers. 

    Monday, May 20, 2013 9:35 AM
  • User-848409960 posted

    I have seen this tutorial.. Without it.. i would have not used MVC ... I tried to learn it when MVC 3 was launched but i am too dumb to understand..

    Ater Viewing this Series i came to know a bit about MVC Thanks Scott :)

    And thanks you too...

    You are a Wizard :)

    Tuesday, May 21, 2013 11:45 AM