How to Retain HttpPostedFileBase on View Return - c#

I have the following model:
public string Content { get; set; }
public HttpPostedFileBase LogoImageFile { get; set; }
View:
#Html.EditorFor(model => model.Content, new { htmlAttributes = new { #class = "form-control" } })
<div class="uploaded-img-wrapper hidden">
<img class="img-thumbnail-md" title="logo image" alt="logo image" />
</div>
#Html.TextBoxFor(model => model.LogoImageFile, new { type = "file", #class = "image-upload" })
When user select a photo from the local drive using the 'choose file' button from the file input element, the image will be displayed on the screen by javascript (Image will be saved to the server if form is valid and get submitted):
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var $wrapper = $(input).prev();
$wrapper.removeClass('hidden');
$wrapper.find('img').attr('src', e.target.result).removeAttr('title');
$(input).addClass('hidden');
}
reader.readAsDataURL(input.files[0]);
}
I have a server side validation for the "Content" textbox. If it fails server side validation and the return View(Model); got called, the image from the file input will disappear. Anyone knows how to keep the file on the page when View is returned?

I have two solution for your problem:
Remote Validation:
according to following sentence "I have a server side validation for the Content textbox", in my view you can use remote validation for validate your form instead send your form to server.This link can help you to using Remote Validation(I would recommend this).
Temporary Store
In this solution you must use ajax-enabled file-upload component (such as this) to send file or files to server. Then you must prepare a action in order to receive file and save it in temporary storage such as (cache or file system) and generate a file-reference to restore the saved file and finally return the file-reference to client.The client insert received file-reference to form as a hidden input thus from then each time form sent, send file-reference instead file content.Of course two points should be noted:
1) Prepare a action to cancel a selected file with user request
2) Prepare a api for restore temporary file by file reference
3) Manage the temporary files to make sure that those don't fill your storage(if using asp.net cache as temporary storage the IIS itself handle it).
public ActionResult UploadTemporary(HttpPostedFileBase file)
{
Guid reference = Guid.NewGuid();
string extension = Path.GetExtension(file.FileName);
string fullName= reference.ToString()+extension;
var path = Path.Combine(Server.MapPath("~/Content/TempFiles/"), fullName);
var data = new byte[file.ContentLength];
file.InputStream.Read(data, 0, file.ContentLength);
using (var sw = new FileStream(path, FileMode.Create))
{
sw.Write(data, 0, data.Length);
}
return Content(reference);
}
summary
The first solution is quick and easy if you encounter with a few of this requirement case in your project, but if you encounter with a lot number of this case I recommend you to use second solution.The second solution is so time-consuming but very useful for applications that lots deal with file.

Related

Returning file from ASP.NET Controller [duplicate]

I'm encountering a problem sending files stored in a database back to the user in ASP.NET MVC. What I want is a view listing two links, one to view the file and let the mimetype sent to the browser determine how it should be handled, and the other to force a download.
If I choose to view a file called SomeRandomFile.bak and the browser doesn't have an associated program to open files of this type, then I have no problem with it defaulting to the download behavior. However, if I choose to view a file called SomeRandomFile.pdf or SomeRandomFile.jpg I want the file to simply open. But I also want to keep a download link off to the side so that I can force a download prompt regardless of the file type. Does this make sense?
I have tried FileStreamResult and it works for most files, its constructor doesn't accept a filename by default, so unknown files are assigned a file name based on the URL (which does not know the extension to give based on content type). If I force the file name by specifying it, I lose the ability for the browser to open the file directly and I get a download prompt. Has anyone else encountered this?
These are the examples of what I've tried so far.
//Gives me a download prompt.
return File(document.Data, document.ContentType, document.Name);
//Opens if it is a known extension type, downloads otherwise (download has bogus name and missing extension)
return new FileStreamResult(new MemoryStream(document.Data), document.ContentType);
//Gives me a download prompt (lose the ability to open by default if known type)
return new FileStreamResult(new MemoryStream(document.Data), document.ContentType) {FileDownloadName = document.Name};
Any suggestions?
UPDATE:
This questions seems to strike a chord with a lot of people, so I thought I'd post an update. The warning on the accepted answer below that was added by Oskar regarding international characters is completely valid, and I've hit it a few times due to using the ContentDisposition class. I've since updated my implementation to fix this. While the code below is from my most recent incarnation of this problem in an ASP.NET Core (Full Framework) app, it should work with minimal changes in an older MVC application as well since I'm using the System.Net.Http.Headers.ContentDispositionHeaderValue class.
using System.Net.Http.Headers;
public IActionResult Download()
{
Document document = ... //Obtain document from database context
//"attachment" means always prompt the user to download
//"inline" means let the browser try and handle it
var cd = new ContentDispositionHeaderValue("attachment")
{
FileNameStar = document.FileName
};
Response.Headers.Add(HeaderNames.ContentDisposition, cd.ToString());
return File(document.Data, document.ContentType);
}
// an entity class for the document in my database
public class Document
{
public string FileName { get; set; }
public string ContentType { get; set; }
public byte[] Data { get; set; }
//Other properties left out for brevity
}
public ActionResult Download()
{
var document = ...
var cd = new System.Net.Mime.ContentDisposition
{
// for example foo.bak
FileName = document.FileName,
// always prompt the user for downloading, set to true if you want
// the browser to try to show the file inline
Inline = false,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
return File(document.Data, document.ContentType);
}
NOTE: This example code above fails to properly account for international characters in the filename. See RFC6266 for the relevant standardization. I believe recent versions of ASP.Net MVC's File() method and the ContentDispositionHeaderValue class properly accounts for this. - Oskar 2016-02-25
I had trouble with the accepted answer due to no type hinting on the "document" variable: var document = ... So I'm posting what worked for me as an alternative in case anybody else is having trouble.
public ActionResult DownloadFile()
{
string filename = "File.pdf";
string filepath = AppDomain.CurrentDomain.BaseDirectory + "/Path/To/File/" + filename;
byte[] filedata = System.IO.File.ReadAllBytes(filepath);
string contentType = MimeMapping.GetMimeMapping(filepath);
var cd = new System.Net.Mime.ContentDisposition
{
FileName = filename,
Inline = true,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
return File(filedata, contentType);
}
To view file (txt for example):
return File("~/TextFileInRootDir.txt", MediaTypeNames.Text.Plain);
To download file (txt for example):
return File("~/TextFileInRootDir.txt", MediaTypeNames.Text.Plain, "TextFile.txt");
note: to download file we should pass fileDownloadName argument
Darin Dimitrov's answer is correct. Just an addition:
Response.AppendHeader("Content-Disposition", cd.ToString()); may cause the browser to fail rendering the file if your response already contains a "Content-Disposition" header. In that case, you may want to use:
Response.Headers.Add("Content-Disposition", cd.ToString());
I believe this answer is cleaner, (based on
https://stackoverflow.com/a/3007668/550975)
public ActionResult GetAttachment(long id)
{
FileAttachment attachment;
using (var db = new TheContext())
{
attachment = db.FileAttachments.FirstOrDefault(x => x.Id == id);
}
return File(attachment.FileData, "application/force-download", Path.GetFileName(attachment.FileName));
}
Below code worked for me for getting a pdf file from an API service and response it out to the browser - hope it helps;
public async Task<FileResult> PrintPdfStatements(string fileName)
{
var fileContent = await GetFileStreamAsync(fileName);
var fileContentBytes = ((MemoryStream)fileContent).ToArray();
return File(fileContentBytes, System.Net.Mime.MediaTypeNames.Application.Pdf);
}
FileVirtualPath --> Research\Global Office Review.pdf
public virtual ActionResult GetFile()
{
return File(FileVirtualPath, "application/force-download", Path.GetFileName(FileVirtualPath));
}
Action method needs to return FileResult with either a stream, byte[], or virtual path of the file. You will also need to know the content-type of the file being downloaded. Here is a sample (quick/dirty) utility method. Sample video link
How to download files using asp.net core
[Route("api/[controller]")]
public class DownloadController : Controller
{
[HttpGet]
public async Task<IActionResult> Download()
{
var path = #"C:\Vetrivel\winforms.png";
var memory = new MemoryStream();
using (var stream = new FileStream(path, FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
var ext = Path.GetExtension(path).ToLowerInvariant();
return File(memory, GetMimeTypes()[ext], Path.GetFileName(path));
}
private Dictionary<string, string> GetMimeTypes()
{
return new Dictionary<string, string>
{
{".txt", "text/plain"},
{".pdf", "application/pdf"},
{".doc", "application/vnd.ms-word"},
{".docx", "application/vnd.ms-word"},
{".png", "image/png"},
{".jpg", "image/jpeg"},
...
};
}
}
If, like me, you've come to this topic via Razor components as you're learning Blazor, then you'll find you need to think a little more outside of the box to solve this problem. It's a bit of a minefield if (also like me) Blazor is your first forray into the MVC-type world, as the documentation isn't as helpful for such 'menial' tasks.
So, at the time of writing, you cannot achieve this using vanilla Blazor/Razor without embedding an MVC controller to handle the file download part an example of which is as below:
using Microsoft.AspNetCore.Mvc;
using Microsoft.Net.Http.Headers;
[Route("api/[controller]")]
[ApiController]
public class FileHandlingController : ControllerBase
{
[HttpGet]
public FileContentResult Download(int attachmentId)
{
TaskAttachment taskFile = null;
if (attachmentId > 0)
{
// taskFile = <your code to get the file>
// which assumes it's an object with relevant properties as required below
if (taskFile != null)
{
var cd = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
{
FileNameStar = taskFile.Filename
};
Response.Headers.Add(HeaderNames.ContentDisposition, cd.ToString());
}
}
return new FileContentResult(taskFile?.FileData, taskFile?.FileContentType);
}
}
Next, make sure your application startup (Startup.cs) is configured to correctly use MVC and has the following line present (add it if not):
services.AddMvc();
.. and then finally modify your component to link to the controller, for example (iterative based example using a custom class):
<tbody>
#foreach (var attachment in yourAttachments)
{
<tr>
<td>#attachment.Filename </td>
<td>#attachment.CreatedUser</td>
<td>#attachment.Created?.ToString("dd MMM yyyy")</td>
<td><ul><li class="oi oi-circle-x delete-attachment"></li></ul></td>
</tr>
}
</tbody>
Hopefully this helps anyone who struggled (like me!) to get an appropriate answer to this seemingly simple question in the realms of Blazor…!

Download Image stored as Binary File in SQL Server using ASP.net MVC

I'm developing an app which stores various records on people. These records require an Image. I am storing the image as a binary file.
At the moment I can choose the image, store it and view it but my application requires to be able to download the image from SQL Server to be able to print.
Here is what I have so far for a method to download an image:
public FileContentResult ViewRecord(int? id)
{
if (id == 0) { return null; }
Record record = new Record();
ChurchDBContext db = new ChurchDBContext();
record = db.Records.Where(a => a.RecordId == id).SingleOrDefault();
Response.AppendHeader("content-disposition", "inline; filename=file.pdf"); //this will open in a new tab.. remove if you want to open in the same tab.
return File(record.Document, "application/pdf");
}
The expected result of this should be a new tab with the image as the pdf but when I click the ActionLink:
#Html.ActionLink("Download Record", "ViewRecord", "RecordsContoller", new { id = Model.RecordId }, new { #target = "_blank" })
It gives me "Resource not found".
I've tried tinkering with it and looking for more information but I can't find anything useful.

Onclick storing same value multiple times

Consider the following code snippet
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(MyViewModel viewModel)
{
if (ModelState.IsValid)
{
//map properties here
using (var context = new MyEntities())
{
context.Users.Add(user);
context.SaveChanges();
}
if (Request.Files.Count > 0)
{
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
if (file != null && file.ContentLength > 0)
{
//do checks and upload file here
}
}
}
}
return RedirectToAction("Index", "Home");
}
The form can be submitted as a standalone or with files which then get uploaded to a server. Now my issue is If I submit the form without any files or just one file then everything works as expected. However users can upload more than one file at a time and that's where the problem comes in. The files get uploaded but I get more than one entry in the database for that particular form. For example if the user uploads three files I'll get three entries in the database exactly that same.
So my question is how do I get around this?
On the client side I'm using DropZoneJs and calling the method as
<script>
Dropzone.autoDiscover = false;
var myDropZone = new Dropzone("#dzUpload", {
url: "/Home/Create",
autoProcessQueue: false,
previewsContainer: ".preview",
});
$("#submit-all").attr("type", "button").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (myDropZone.getQueuedFiles().length > 0) {
myDropZone.options.autoProcessQueue = true;
myDropZone.processQueue();
}
else {
$("#dzUpload").submit();
}
});
</script>
I've also come across this question but I still have the same issue
It looks like the uploadMultiple option will change the behavior so only one request is sent to the server.
var myDropZone = new Dropzone("#dzUpload", {
url: "/Home/Create",
autoProcessQueue: false,
previewsContainer: ".preview",
uploadMultiple: true,
});
So if I am right the plugin will post the form for every file you drop into your plugin right?? One way is to generate a a GUID and maintain it in your form hidden input. So every time your plugin posts it will post this GUID as well. So change your insert statement into a upsert ( update or insert) based on the Guid.. You must save this GUID also along with your other data..
So every time you intend to insert check if the GUID already exist If so update it else insert new record.

How to get byte[] to display as a background image for a div on a view (C#, ASP.NET, MVC)

I am building a web app in C# and ASP.Net with an MVC framework. I have the app running on my local desktop (for now). The app has a SQL backend that stores all my data. I am able to pull the data from the SQL db successfully through a number of stored procedures. The data is able to successfully be transferred from the stored procedures all the way up to my view from the controller.
Part of the data being transferred to the view is a byte[] from an image stored in the db (datatype is VARBINARY(MAX)). In short, I am trying to get the data from this byte[] to display as a background image in a div. This div acts as a single image in a Bootstrap carousel.
Initially, I had the following as my controller:
public ActionResult Dashboard()
{
DashboardViewModelHolder holder = new DashboardViewModelHolder();
DiscoveryService discoveryService = new DiscoveryService();
holder.national_Elected_Officials = new List<National_Elected_Officials_Model>();
National_Elected_Officials_Model n = new National_Elected_Officials_Model();
foreach (List<object> official in discoveryService.retrieve_National_Elected_Officials())
{
for(int i = 0; i <= official.Count; i++)
{
int id = int.Parse(official.ElementAt(0).ToString());
string fname = official.ElementAt(1).ToString();
string lname = official.ElementAt(2).ToString();
byte[] pictureByteArray = (byte[])official.ElementAt(3);
string position = official.ElementAt(4).ToString();
string party = official.ElementAt(5).ToString();
string bio = official.ElementAt(6).ToString();
int yearsOfService = int.Parse(official.ElementAt(7).ToString());
int terms = int.Parse(official.ElementAt(8).ToString());
string branch = official.ElementAt(9).ToString();
Image picture = image_Adapter.byteArrayToImage(pictureByteArray);
n.ElectedOfficialID = id;
n.FirstName = fname;
n.LastName = lname;
n.Picture = picture;
n.Position = position;
n.Party = party;
n.Bio = bio;
n.YearsOfService = yearsOfService;
n.Terms = terms;
n.Branch = branch;
}
holder.national_Elected_Officials.Add(n);
}
return View(holder);
}
My thought process was that I would just call n.Picture in my view and it would render the picture. After several tries and tutorials later, I left n.Picture as a byte[] and processed it in its own ActionResult method as seen below:
public FileContentResult Image(byte[] pictureByteArray)
{
return new FileContentResult(pictureByteArray, "image/jpeg");
}
I call this in my view as the following:
<div class="fill" style="background-image:src(#Url.Action("Image", electedOfficial.Picture))"></div>
electedOfficial is a reference to the model being set in the controller (n.Picture).
Is there something that I am missing?
EDIT 1
I forgot to add that the div returns null when I debug and step through the code. This is because the line with the div never gets called on when debugging. If I have it set as Url.Action, the program will actually go to the controller before hitting the line. If I do Html.Action, the program will skip the line and go to the controller after. Both will return null as a result which returns an error on the controller side since nulls arent allowed.
Edit 2
I tried changing the div tag to the following:
<div class="fill" style="background-image:src(#{Html.Action("Image", electedOfficial.Picture);})"></div>
By putting the {} in the debugger actually parses the line as I step through. Now, the problem is that the controller is not receiving the value being passed to it from electedOfficial.Picture. Just to confirm, this variable does hold the correct value in the view.
If you have the full byte[] in your model, then you can put the data directly into the view:
<div style="background:url( data:image/jpeg;base64,#Convert.ToBase64String(electedOfficial.Picture) )"></div>
This will work without the need for a separate controller that returns a FileContentResult, but will be a longer initial page load since the user will download all of the images along with the page HTML.
If you want to use a Controller endpoint so the images can be referenced as a URL in the src attribute and downloaded after the HTML has rendered then you are not too far off. It would work better to have the controller accept ElectedOfficialID and return the FileContentResult from that.
public FileContentResult Image(int electedOfficialId)
{
byte[] picture = GetPicture(electedOfficialId);
return new FileContentResult(picture, "image/jpeg");
}
Simples way of doing that would be encoding image as base64 string and add new string property eg PictureAsString to model instead having Picture
controller
n.PictureAsString = Convert.ToBase64String(pictureByteArray)
view
<div style="background:url(data:image/jpeg;base64,#electedOfficial.PictureAsString )" ></div>
use handler(ASHX). and call handler url in src.
public class MyHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//Get Id from somewhere
//Get binary data
context.Response.ContentType = "application/octet-stream";
context.Response.BinaryWrite(bytes);
}
}
You can convert your byte array into a picture using this way:
Convert your byte array into a base64 string.
Display it in <img> tag.
Here is the code:
#{
var base64 = Convert.ToBase64String(Model.ByteArray);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}
<img src="#imgSrc" />

Controller returning file header to view not file

My form looks like this
{
using (Ajax.BeginForm("Log",
new AjaxOptions {
UpdateTargetId = "lessonTable"
}))
//removed dropdown list ect... for readability
input type="submit" name = "submitButton" value = "Filter"
input type="submit" name = "submitButton" value = "Print Report"
and my controller does this
[HttpPost]
public ActionResult Log(lesson lesson,string submitButton)
{
/*Retreive all lessons*/
List<lesson> lessonList = (from l in storeDB.lessons
where l.statusID != DELETED
select l).ToList();
/*Filter retreived Lesson*/
lessonList = filterLesson(lesson,lessonList);
switch (submitButton)
{
case "Filter":
return PartialView(lessonList);
default:
{
return DetailsReport();
}
}
}
the DetailsReport() method returns a File
return File(renderedBytes, mimeType);
when click the Print Report button it is updating the div with the file header not requesting that the user opens the file. I have tried removing updatetarget ID but it doesn't prompt for a file download. Also when I make an ajax.actionlink call to the details report method it is working fine.
Thanks
If I understand what you are doing, it is working as intended; because you are making the request from an Ajax.BeginForm(), it is trying to display what ever is returned in the page. Removing the target would not be expected to change that.
You should simply make the "Print Report" button be part of a separate form or not a form at all, and have it pull the info it needs from the existing form before submitting (since it wouldn't do it automatically once it is removed from that form)

Categories