1

I am trying to use plupload JqueryUI Widget uploader and trying to upload images using session ID's and it's saving under respective session ID's but when On completeAll (i.e when I bind them) event I am trying to display their filenames using the same session ID's is not happening.

Can anyone say me what is the mistake I am doing?

Here is my code:

       <script type="text/javascript">
                 $(function () {
           $("#uploader").plupload({
               runtimes: 'gears,flash,silverlight,browserplus,html5',
               url: 'upload.aspx',
               max_file_size: '10mb',
               chunk_size: '1mb',
               unique_names: true,

               // Resize images on clientside if we can
               resize: { width: 320, height: 240, quality: 90 },

               // Specify what files to browse for
               filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],

               // Flash settings
               flash_swf_url: 'js/plupload.flash.swf',

               // Silverlight settings
               silverlight_xap_url: 'js/plupload.silverlight.xap'
           });


           // Client side form validation
           $('form').submit(function (e) {
               var uploader = $('#uploader').plupload('getUploader');

               // Files in queue upload them first
               if (uploader.files.length > 0) {
                   // When all files are uploaded submit form
                   uploader.bind('StateChanged', function () {
                       if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                           $('form')[0].submit();
                       }
                   });

                   uploader.start();
               } else
                   alert('You must at least upload one file.');

               return false;
           });

           var uploader = $('#uploader').plupload('getUploader');
           uploader.bind('FileUploaded', function (up, file, res) {
             $('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" & Session("ID") &  "/" + file.name + "'><br>" + file.name + "</div>");

           });
       });
</script>

Here is the Handler file:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsNothing(Request.Form("chunk")) = False Then
        If Session("ID") Is Nothing Then
            Session("ID") = Guid.NewGuid.ToString
            IO.Directory.CreateDirectory(Server.MapPath("uploads/" & Session("ID")))
        End If
        Dim chunk As Integer = Request.Form("chunk")
        Dim chunks As Integer = Request.Form("chunks")
        Dim filename As String = Request.Form("name")
        If chunk = 0 Then
            Request.Files(0).SaveAs(Server.MapPath("uploads/") & Session("ID") & "/" & Request.Files(0).FileName)
        Else
            Dim OutputStream As New IO.FileStream(Server.MapPath("uploads/") & Session("ID") & "/" & Request.Files(0).FileName, IO.FileMode.Append)
            Dim InputBytes(Request.Files(0).ContentLength) As Byte
            Request.Files(0).InputStream.Read(InputBytes, 0, Request.Files(0).ContentLength)
            OutputStream.Write(InputBytes, 0, InputBytes.Length - 1)
            OutputStream.Close()
        End If
    End If
End Sub

Displaying filenames here:

<div id="showfilelist">
    </div>
coder
  • 13,002
  • 31
  • 112
  • 214

2 Answers2

2

I must admit I'm not that familier with plupload. However with Uploadify, the reason that the session id is not passed back, is because flash doesn't pass back the session cookie.

SORRY EDIT (new link, the old one has a security flaw)

Here is something that will help you:

Uploadify ashx file Context.Session gets null

Community
  • 1
  • 1
Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • Yes I do agree that actually it's in MVC but I need it in normal Asp.net. – coder Oct 12 '11 at 09:57
  • Hi @user944919, don't be put of by the MVC title of the question. It's still applicable to asp.net web forms, I used the answer for asp.net webforms myself and it helped with uploadify. So it might point you in the right direction. – Alex KeySmith Oct 12 '11 at 12:17
  • Unfortunately I'm not too familer with plupload, so I'm not going to be much help. I'd reccomend researching into HttpModules opposed to page load, as it'll give you an understanding of how the code works. – Alex KeySmith Oct 12 '11 at 12:32
  • Or else if your familiar with uploadify I am well satisified even with that too. – coder Oct 12 '11 at 12:34
  • I can't remember exactly how I got started with asp.net / uploadify, but this looks like a good post to get you started. http://stackoverflow.com/questions/2501037/getting-uploadify-working-in-c – Alex KeySmith Oct 12 '11 at 12:48
1

I am not familiar with plupload but I see that there is certainly issue in your javascript. Check this particular fragment:

var uploader = $('#uploader').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
     $('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" & Session("ID") &  "/" + file.name + "'><br>" + file.name + "</div>");
});

The part of code i.e. + "><a href='uploads/" & Session("ID") & "/" + is not a valid java-script code. Apart from incorrect & operator, you cannot really access the server side session at the client side.

I believe that the correct solution will involve returning your server side id (Session("ID")) in the response from your handler. You can probably access the response via res parameter of FileUploaded event handler.

VinayC
  • 47,395
  • 5
  • 59
  • 72
  • So I removed it and replaced by this code: $('#showfilelist').append("
    "); but still not happening.
    – coder Oct 12 '11 at 12:09
  • @user944919, IMO, u didn't get it - replacing `a` by `img` is not going to help. Issue is that you can not access `Session` in js (besides `&` operator has different meaning in js - use `+` operator). – VinayC Oct 13 '11 at 04:21