Upload data with file

Question

I have to send the files along with some description about those to the server.

So as per above image, I want to upload a file and provide the description of file in a text box on right side of it. After clicking select files link, the user can select another file to upload and it will also have description text box. After clicking upload files, along with the file, description of it neet to upload to the server. I am using plupload to do it. But it is just uploading file and not description. Also, I am using MVC. So please suggest any solution to it or suggest any other javascript library which can fulfill my requirements.

Below is the MVC code,

           public string Upload(List<HttpPostedFileBase> fileUploads,List<string> fileDescription) 
    {
        int count = 0;
        foreach (HttpPostedFileBase file in fileUploads)
        {
            byte[] fileData = new byte[file.ContentLength];
            file.InputStream.Read(fileData, 0, file.ContentLength);
            db.UploadedFiles.AddObject(new UploadedFile
            {
                FileDescription = fileDescription[count],
                FileBinary = fileData,
                FileName = file.FileName
            });
            count++;
        }
        db.SaveChanges();
        return "Success";
    }

Below is javascript code

      var uploadFiles = [];
        var descs = [];
        var count = 0;
        plupload.each(uploader.files, function (file) {
        var id = file.id;
        var fileUpload = file;
        uploadFiles[count] = file;
        descs[count] = $("#" + id + "_desc").val();
        count++;
    });
    var da = { fileDescription: descs,fileUploads: uploader.files };
            $.ajax({
            url: '/LumosQC/Upload',
               data: da,
               method: 'POST',
            }).done(function (data1) {
                alert("Success");
            }).error(function (a, b, c) {
               console.log(a);
           });

Can you please share, what you have done for this? `C# & MVC CODE` — csharpbd, May 02 '17 at 06:29

Daniil Grankin · Answer 1 · 2017-05-02T06:58:25.860

0

You can modify the route you use for uploading and use something like

...
        [Route("upload/{description}")]
        public HttpResponseMessage Upload(string description)
...

Or you can put description into cookie (but I would recomend to use the first approach it's cleaner)

function createCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

createCookie('desciption', 'your description', 1)

and then

Request.Cookies["description"]

UPDATE

Now I see you need to upload multiple files, for that you can use the same approach with modified route

[Route("upload")]
public string Upload(List<HttpPostedFileBase> fileUploads, [FromUri] string[] fileDescription)

edited May 02 '17 at 06:58

answered May 02 '17 at 06:43

Daniil Grankin

3,841
2
29
39

But I am getting everything as null, fileUploads and filedescription also – dnyaneshwar May 02 '17 at 06:54
With my approach? – Daniil Grankin May 02 '17 at 06:56
You asked how to provide description and it's not clert that you have not found a way to apload anything, please update your question – Daniil Grankin May 02 '17 at 06:57

score 0 · Answer 2 · answered May 02 '17 at 11:07

Create view model and use as parameter in action method,

ViewModel :

public class UploadViewModel
{
    public List<string> FileDescriptions;
    public List<HttpPostedFileBase> Files;
}

Action method :

public string Upload(UploadViewModel model) 
{
    // ....
}

that will bind the data correctly.

Upload data with file

2 Answers2