Tracking the Successfully uploaded File Names by 'Uploadify' Jquery plugin

Question

I am using 'Uploadify' Jquery plugin in my MVC 3.0 application to upload multiple files. Its working fine, but showing the list of files which got failed while uploading.

How to track the Successfully uploaded File Names?

My script looks like :

<link href="@Href("~/Content/uploadify.css")" rel="stylesheet" />
    <script src="@Href("~/Scripts/jquery-1.4.1.js")" type="text/javascript"></script>
    <script src="@Href("~/Scripts/jquery.uploadify.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(window).load(
    function () {
        $("#fileuploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': 'Home/Upload',
            'folder': '/uploads',
            'fileDesc': 'Image & XML Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.xml',
            'multi': true,
            'auto': true
        });
    }
);
    </script>

My HTML code :

<div id="fileuploader"></div>
<div>Upload Status</div>
Successful Files : <div> @TempData["SuccessfulFileList"]</div>
Failed Files :<div> @TempData["FailedFileList"]</div>

The Controller code goes like this:

        private static List<string> _successfulFileList = new List<string>();
        private static List<string> _failedFileList = new List<string>();

        public string Upload(HttpPostedFileBase fileData)
        {
            try
            {
                var fileName = this.Server.MapPath("~/uploads/" + System.IO.Path.GetFileName(fileData.FileName));
                fileData.SaveAs(fileName);
                _successfulFileList.Add(fileName);
            }
            catch
            {
                var failedFileName = fileData.FileName;
                _failedFileList.Add(failedFileName);
            }

            TempData["SuccessfulFileList"] = _successfulFileList;
            TempData["FailedFileList"] = _failedFileList;
            return "Some Files Get uploaded";
        }

Have you debugged it to see what `_successfulFileList` and `_failedFileList` actually contain? — Jack, Sep 23 '11 at 14:03
As they are static, I could find only _successfulFileList getting populated, but even though they are stored in tempdata, they are not visible in my cshtml. — Biki, Sep 23 '11 at 17:32

score 0 · Answer 1 · edited May 23 '17 at 11:55

0

You are using a Flash component to upload your files (Uploadify). Flash components don't send cookies. Sessions are tracked by cookies. TempData uses Session. Conclusion => you cannot use TempData with a Flash client. There are some ugly workarounds.

This being said using a static list in your controller to store uploaded files is very dangerous because the List<T> object is not thread safe and if you have 2 users uploading their files in parallel your application could crash.

As an alternative you could store the list of the uploaded files to your datastore (database or something) and fetch it from there instead of relying on session.

edited May 23 '17 at 11:55

Community

1
1

answered Sep 23 '11 at 14:04

Darin Dimitrov

1,023,142
271
3,287
2,928

doesnt uploadify use html5 by default and then degrade to flash? – Adam Tuliper Sep 23 '11 at 15:08
But I see the execution flow also not consistent. Is it also due to flash component or due to its Async nature? The lists are holding only the last successful file or unsuccessful file, if they are not made STATIC. How to tackle this? – Biki Sep 23 '11 at 17:40

score 0 · Accepted Answer · answered Sep 26 '11 at 16:14

0

I found a quite descriptive explanation here : Link

Ref : http://blog.bobcravens.com/2010/02/upload-files-with-progress-using-uploadify/

answered Sep 26 '11 at 16:14

Biki

2,518
8
39
53

Tracking the Successfully uploaded File Names by 'Uploadify' Jquery plugin

2 Answers2