How to upload multiple files to server with form post MVC? - c#

I am working on a project of Asp.Net MVC-4. In my project user post requirements. Post contains title, tags, files etc.File may be multiple and it may be of any type like Video, doc ( ppt, excel, pdf, etc), images etc.
My problem is the handling of multiple file upload. Now first of all i tell you
currently how i am handling this :
I am using Jquery FIle Uplaod plugin. Through this plugin i am uploading file to server sequentially and on server i am saving those file with SessionId.Now when user post there requirement form than i just rename those file with userId.
drawback of my approach
First i have to save those files with session id and than i have to rename it with userId. So if i save my file in Window Azure Blobs than in that case for uploading single file i have to do 2 transaction. First save the blob with SessionId and than Renaming the blob with userid. Which i think result extra processing and extra cost.
Now i want to know if there is any approach by which i can upload all file (with progress bar for individual file [required]) with form post. So that user's requirement form (tags, titile etc) with all files go to server together than in that case i will save the user first in the database and than i will save the files with the userId ??
Note: I cannot save File with guid or other. UserId is required in the file name to uniquely identify user's files.

You can upload using following code in controller
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) {
foreach (var file in files) {
if (file.ContentLength > 0) {
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
}
return RedirectToAction("Index");
}
more details here

Not sure if i completely understand the question, but you could post the model for your user details in the same POST as the file upload (same form?), then on the server:
[HttpPost]
public JsonResult AddNewImage(UserModel user)
{
ReturnArgs r = new ReturnArgs();
repo.AddUser(user) // add your user to DB here
SaveImages(user.Id);
r.Status = 200;
r.Message = "OK!";
return Json(r);
}
private void SaveImages(string userid)
{
for (var i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i] as HttpPostedFileBase;
string fileName = userid + "_" + i;
// saving file to DB here, but you can do what you want with
// the inputstream
repo.SaveImage(fileName, file.InputStream, file.ContentType);
}
}

Related

PDF Files type saved as octet-stream in database and it wont save in the database table

I have created a web application using ASP.NET MVC
Here I have added User to upload Image type or PDF file to upload to the system in one module.
So the user uploaded files I'm saving as bytes in the database table. Also, I'm saving the file type in another column in the table because when retrieving the file I'm checking if the file is image or pdf.
Thing is Image files are saved and retrieved without any error.
But Some PDF files when the user selected is uploaded without any error, But sometimes again retrieving the file in the details view, some pdf files are not opening. Most of the time used for this Google Chrome browser and, When I checked again it with Firefox, it opens normally.
So I asked users to use Firefox when accessing the system. But even further the error is still showed up. Then I'm checking the file in the database table, I got that some files are not saved in the table, but the file type is showing as octet-stream.
I want to know why these pdf files are showing as octet-stream and why it's not saving the attachment and is there any way to avoid this error?
This is my Converting attachment into byte code
public byte[] ConvertToBytes(HttpPostedFileBase image) {
byte[] imageBytes = null;
using(BinaryReader br = new BinaryReader(image.InputStream)) {
imageBytes = br.ReadBytes(image.ContentLength);
}
return imageBytes;
}
When Saving it It goes as
foreach(PurchasingItems item in appRequest.PurchasingItemsList) {
HttpPostedFileBase file = Request.Files["ImageData" + item.TempID];
item.Attachment = ConvertToBytes(file);
item.FileType = Path.GetFileName(file.ContentType);
}
This is how I retrieve the file to show.
public ActionResult RetrieveImage(int id) {
var q = from temp in db.GeneralItms where temp.Id == id select temp.Attachment;
var type = from t in db.GeneralItms where t.Id == id select t.FileType;
string fileType = type.First().ToString();
byte[] cover = q.First();
if (cover != null) {
if (fileType == "pdf") {
return File(cover, "pdf");
} else {
return File(cover, "image/jpg");
}
} else {
return null;
}
}

Copying a file from one location into a folder in Solutions Explorer using asp.net

I am working on an asp.net project using c# and I need to copy a file from an arbitrary location which is determined by the file upload dialog box.
I need to make an exact copy of the file in a folder that is located in the Solutions Explorer. Below is the code I am using.
string filename = txt_lesson_title.text;
string sourcepath = _Uploadedfile.PostedFile.FileName.ToString();
string targetPath = HttpContext.Current.Server.MapPath("/destFolder/");
File.Copy(sourcePath, targetPath + fileName);
The above code runs without reporting any errors but I cannot see the copied files in the destination folder. Any help will be deeply appreciated.
Thanks
You don't need to copy the file, you need to save a copy of it.
You can do this
if the file is coming to your controller, you controller should have arguments like HttpPostedFileBase or HttpPostedFileBase[] depending on if you are saving one or more
if you are saving one,
public ActionResult Step(FormCollection collection, HttpPostedFileBase file) {
//HttpPostedFileBase file; //this comes from you controller argument
var directory = "~/Uploads/";
//this if statement can be optional
if(!Directory.Exists(System.Web.HttpContext.Current.Server.MapPath(directory)))
{
Directory.CreateDirectory(System.Web.HttpContext.Current.Server.MapPath(directory));
var virtualPath = directory + "/" + <your file name here>;
var filePath = System.Web.HttpContext.Current.Server.MapPath(virtualPath);
//if the file exists already, delete and replace it with the new one
if (System.IO.File.Exists(filePath))
{
System.IO.File.Delete(filePath);
}
file.SaveAs(filePath);
}
else {
//do as above without the create directory
}
}

How to manually store image in (database) table in Visual Studio 2012 and retrieve using jQuery Ajax in ASP.NET MVC

My database table
First I tried storing images with datatype image/varbinary but I get an error:
Invalid Value The changed value in this cell was not recognized as being valid. .Net Framework Data Type: Byte[] Error Message: You cannot use the result pane to set this Field data to values other than NULL Type a value appropriate for the data type or press ESC to cancel the change
How can I store image in my database table manually and retrieve them through jQuery Ajax method?
use in C# Button Submit with data source
if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != null)
{
byte[] img = new byte[Request.Files[0].ContentLength];
Request.Files[0].InputStream.Read(img, 0, Request.Files[0].ContentLength);
datasource.Photo = img; --here you can save file to Database
}
for retrieving image from dbserver use belowed
img.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(Upprofile.Photo);
Have you ever tried other ways to store images ?
I have never used such a way to store image in database if you want my two cents it would be better to save your image on host and save its url in the database.
You only need url to show picture in browser...!
I'm not sure if this works in VS2012, but you can try this approach that I'm using in my MVC projects:
public action UploadFile(HttpPostedFileBase file) //this is how you get the file that was submited from your form
{
//so now that I have the file, i need to save it somewhere
//let's see if we have a folder for that, if not let's create it
if(!Directory.Exists(Server.MapPath("~/The path from the root of the app to the uploaded files folder/")))
{
Directory.CreateDirectory(Server.MapPath("~/The path from the root of the app to the uploaded files folder/"));
} //the ~ symbol is part of the code, it returns the physical path to the root of the application
var storage = Server.MapPath("~/The path from the root of the app to the uploaded files folder/");
//now we need a name, we can generate one as a GUID for example, or we can get it's own.
var fileName = file.FileName.Substring(file.FileName.LastIndexOf("\"), file.Name.Length + 1);
//Now you might have to play a bit with the substring arguments, I'm not sure i wrote that right,
//it might not need the +1 part, or it might need it on the LastIndexOf as well,
//anyway, now we have the name and the folder where to save our file, let's do that:
path = String.Format("{0}\{1}", storage, filename);
try
{
file.SaveAs(path); //Now the file is on the server,
//just save this path and whatever else you need in the database so you can
//grab it later.
}
catch
{
//do your exception handling here
}
Saving to database here...
}
In order to grab it you just get that object from the database like any other objects like so:
Let's presume you're doing everything in your controller, which you shouldn't,
public Action GetFile(int id)
{
using(context = new YourDbContext())
{
var file = context.Files.FirstOrDefault(p => p.Id == id);
}
return View(file);
}
And put it's path for the src in html to show the image like so:
<img src="#Model.path" /> //Considering that in your controller you will `return View(file);`
//So your file object is the model.
One more thing, I'm not sure if in paths you'll need \ or /, I always get it wrong the first time so debug it on the first run and if your path looks likeFolder1Folder2Folder3File it means you need to change it :).
I hope this helped, good luck.
P.S., there might be better ways to do it, but this is how I'm doing it and it seams to work fine for me.
On server, you convert image to a base64 string and save to database.
using (Image image = Image.FromFile(Path))
{
using (MemoryStream m = new MemoryStream())
{
image.Save(m, image.RawFormat);
byte[] imageBytes = m.ToArray();
// Convert byte[] to Base64 String
string base64String = Convert.ToBase64String(imageBytes);
return base64String;
}
}
Beside Client, you put base64 string in Image object
var image = new Image();
image.src = 'data:image/png;base64,your base64 string';
document.body.appendChild(image);
I think store image on the disk better.

How to use ImageResizer in C# .NET/MVC4

I'm working on a site where I need to crop and resize images that people upload.
I got the code for the upload function but in my httpPost action result I want to resize the image to start off with. I also got the code for that but I can't find a way to show the image.
Here is my code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FileUpload(HttpPostedFileBase uploadFile)
{
if (uploadFile.ContentLength > 0)
{
foreach (string fileKey in System.Web.HttpContext.Current.Request.Files.Keys)
{
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files[fileKey];
if (file.ContentLength <= 0) continue; //Skip unused file controls.
ImageResizer.ImageJob i = new ImageResizer.ImageJob(file, "~/img/", new ImageResizer.ResizeSettings("width=50;height=50;format=jpg;mode=max"));
i.CreateParentDirectory = true; //Auto-create the uploads directory.
i.Build();
string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName);
string physicalPath = Server.MapPath(relativePath);
uploadFile.SaveAs(physicalPath);
return View((object)relativePath);
}
}
I want go write out the Image information from ImageResizer.ImageJob i..
Any ideas?
Thank you!
First, the code you're using allows anybody to upload an executable page and run it.
Never, under any circumstances, should you use uploadFile.FileName as part of the final path name, unless you deeply understand path and length sanitization.
Second, ImageJob needs a destination path, not a folder path. You can use variables, like "~/img/<guid>.<ext>" and access the resulting physical path from i.FinalPath. You can use ImageResizer.Util.PathUtils.GuessVirtualPath(i.FinalPath) to get the app-relative path.
As this is almost a precise duplicate of mvc3 ImageResizer, please consider using the search feature before posting.

Manipulating freshly uploaded file causes IOException

My Asp.net MVC app requires a file upload. In the course of the upload I'd like to manipulate the freshly uploaded file.
public ActionResult Edit(int id, FormCollection collection) {
Block block = userrep.GetBlock(id);
foreach (string tag in Request.Files) {
var file = Request.Files[tag] as HttpPostedFileBase;
if (file.ContentLength == 0)
continue;
string tempfile = Path.GetTempFileName()
file.SaveAs(tempfile);
// This doesn't seem to make any difference!!
// file.InputStream.Close();
if (FileIsSmallEnough(file)) {
// Will throw an exception!!
File.Move(tempfile, permanentfile);
} else {
GenerateResizedFile(tempfile, permanentfile);
// Will throw an exception!!
File.Delete(tempfile);
}
block.Image = permanentfile;
}
userrep.Save();
The problem with this snippet is that any attempt to manipulate the initially uploaded file generates an IOException("The process cannot access the file because it is being used by another process.") Of course I can bypass the problem by copying rather than moving uploaded file but I still can't delete it once I have a better alternative.
Any advice?
Duffy
As you have mentioned in your comments, you load an Image from file. The MSDN documentation states that the file remains locked until the image is disposed.
http://msdn.microsoft.com/en-us/library/stf701f5.aspx
To dispose your image, you can either call the Dispose method on the instance, or use the preferred mechanism of the using statement:
private bool FileIsSmallEnough()
{
using (Image i = Image.FromFile())
{
}
}
This should solve the problem.

Categories