How to load an Ajax / jQuery image in ASP.NET MVC?

Question

I have a site written in ASP.NET MVC. I have a page where the user can create a small article. In this article, they can select an image. I have a page where they can upload their images and on the article creation page just list them. But many people complain that they wrote an entire article before they realized that they did not upload the image they needed. I want the user to be able to download the image from the article creation page, and then reload my pop-up image of the possible images to select.

Im thinking about creating a separate separate page on the page and letting the user select the file there (basically use my existing upload functions). But how do I get around sending it asynchronously? What about re-rendering my list of async images?

How to download this image using jquery / ajax and then re-populate my dropdown menu?

/ amuses

Answer 1

I have used this jQuery pluging several times.
I put my download button in the jQuery UI modal dialog , which uses the PopupImageUploader element.

<div id="PopupImageUploader" title="Upload Image"> <div id="uploaderFile"></div> </div> 

and my javascript builds the loader on the upladerFile element

 function CreateImageUploader() { var uploader = new qq.FileUploader({ element: $('#uploaderFile')[0], template: '<div class="qq-uploader">' + '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' + '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' + '<ul class="qq-upload-list"></ul>' + '</div>', hoverClass: 'ui-state-hover', focusClass: 'ui-state-focus', action: 'Home/UploadImage', allowedExtensions: ['jpg', 'gif'], params: { }, onSubmit: function(file, ext) { }, onComplete: function(id, fileName, responseJSON) { $("#PopupImageUploader").dialog('close'); } } }); } 

You can use the onComplete event, check the download result and, ultimately, update the drop-down menu. The UploadImage action can take additional parameters specified in the params: { } property params: { } . This is my controller:

  [HttpPost()] public System.String UploadImage(string id) { bool IsIE = false; string sFileName = ""; var TempFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "_TEMP"); if ((Request.Files == null) || (Request.Files.Count == 0)) { if (string.IsNullOrEmpty(Request.Params["qqfile"])) { return ("{success:false, error:'request file is empty'}"); } else { sFileName = Request.Params["qqfile"].ToString(); } } else { sFileName = Request.Files[0].FileName; IsIE = true; } if (string.IsNullOrEmpty(sFileName)) { return ("{success:false, error:'request file is empty'}"); } string DocumentName = id + Path.GetExtension(sFileName); if (IsIE) { try { Request.Files[0].SaveAs(Path.Combine(TempFolder, DocumentName)); } catch (Exception ex) { return ("{success:false, error:'" + ex.Message + "'}"); } } else { try { if ((Request.InputStream != null) && (Request.InputStream.CanRead) && (Request.InputStream.Length > 0)) { using (FileStream fileStream = new FileStream(Path.Combine(TempFolder, DocumentName), FileMode.Create)) { byte[] FileBytes = new byte[Convert.ToInt32(Request.InputStream.Length) + 1]; Int32 bytesRead = 0; bytesRead = Request.InputStream.Read(FileBytes, 0, FileBytes.Length); fileStream.Write(FileBytes, 0, bytesRead); fileStream.Flush(); fileStream.Close(); } } } catch (Exception ex) { return ("{success:false, error:'" + ex.Message + "'}"); } } var newFileName = "new assigned filename"; return ("{success:true, newfilename: '" + newFileName + "'}"); } 

IE has a different behavior, so I have two different procedures for reading a file.

Answer 2

You can use the jQuery Form plugin. Here you can find the code and examples:

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

Hope this helps.

Answer 3

  <input type="file" id="picfile" name="picf" /> <input type="text" id="txtName" style="width: 144px;" /> $("#btncatsave").click(function () { var Name = $("#txtName").val(); var formData = new FormData(); var totalFiles = document.getElementById("picfile").files.length; var file = document.getElementById("picfile").files[0]; formData.append("FileUpload", file); formData.append("Name", Name); $.ajax({ type: "POST", url: '/Category_Subcategory/Save_Category', data: formData, dataType: 'json', contentType: false, processData: false, success: function (msg) { alert(msg); }, error: function (error) { alert("errror"); } }); }); [HttpPost] public ActionResult Save_Category() { string Name=Request.Form[1]; if (Request.Files.Count > 0) { HttpPostedFileBase file = Request.Files[0]; } }