Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

plupload queue checking files on form submit has an issue

Tags:

plupload

I'm having an issue in firing the uploader.start() in case if start button is not clicked for file upload, I am using latest version Plupload. here is the complete code, and I want to find the temp names given for each file uploaded on submit click, so that I can go to the server and rename the files with the reference ID which makes easy to identify the file that belongs.

     <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <link href="Styles/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Script/FileUpload/plupload.full.js" type="text/javascript"></script>
    <script src="Script/FileUpload/jquery.plupload.queue.js" type="text/javascript"></script>
    <title>Test Page</title>
    <script type="text/javascript">
        $(document).ready(function () { 
          $("#Testloader").pluploadQueue({
              runtimes: 'flash',
              url: 'FileUpload.ashx',
              max_file_size: '100mb',
              urlstream_upload: true,
              chunk_size: '5MB',
              //unique_names: false,
              multiple_queues: true,

              filters: [
            { title: "Document files", extensions: "pdf,doc,docx,tiff" },
            { title: "Image files", extensions: "jpg,png" }
        ],
              // Flash settings
              flash_swf_url: 'Images/plupload.flash.swf',

              //                    // Silverlight settings
              //                    silverlight_xap_url: 'assets/resources/plupload.silverlight.xap',

              init: {
                  FileUploaded: function (up, file, info) {
                  },                 
                  FilesRemoved: function (up, files) {
                      plupload.each(files, function (file) {

                      });
                  }
              }

          });
      });
      $('form').submit(function (e) {
          alert("clicked me");
          var uploader = $("#Testloader").pluploadQueue();
          // 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();
                      alert("Form submitted");
                  }
              });
              uploader.start();

          } else {

              alert('You must queue at least one file.');

          }
          return false;
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Testloader">      
    </div>
   <input type="submit" value="send" />
    </form>
</body>
</html>
like image 394
Jay Avatar asked Dec 17 '25 01:12

Jay


1 Answers

First, you should move the submit binding inside the $(document).ready to ensure the DOM is ready for submit binding.

I guess you should try relying on a closure to ensure "uploader" is correctly bound during StateChanged (you could also begin your StateChanged Handler with var uploader = $("#Testloader").pluploadQueue();) :

  $('form').submit(function (e) {
      alert("clicked me");
      var uploader = $("#Testloader").pluploadQueue();
      // Files in queue upload them first
      if (uploader.files.length > 0) {
          // When all files are uploaded submit form
          uploader.bind('StateChanged', (function(closedUploader){return function () {
              if (closedUploader.files.length === (closedUploader.total.uploaded + closedUploader.total.failed)) {
                  // $('form')[0].submit();
                  alert("Form submitted");
              }
          };})(uploader)
          );
          uploader.start();

      } else {

          alert('You must queue at least one file.');

      }
      return false;
  });

Hope this will help

like image 170
jbl Avatar answered Dec 21 '25 10:12

jbl



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!