title: blueimp jQuery file upload plugin hide uploaded files
body: <p>I am using this:
  <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">https://github.com/blueimp/jQuery-File-Upload</a></p>
  
  <p>Everything works great and all but I want to know how to make it so whenever I have done uploading stuff in it, and when I go to that uploading page again, I want to hide the uploaded files list. Because currently whenever ANYONE goes to the upload page, it displays ALL the uploaded files and ANYONE can delete the files. I want it to NOT display the uploaded files. THANKS A LOT FOR HELPING IN ADVANCE!</p>
  
  <p>EDIT:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;!--
  /*
   * jQuery File Upload Plugin Demo 9.1.0
   * https://github.com/blueimp/jQuery-File-Upload
   *
   * Copyright 2010, Sebastian Tschan
   * https://blueimp.net
   *
   * Licensed under the MIT license:
   * http://www.opensource.org/licenses/MIT
   */
  --&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!-- Force latest IE rendering engine or ChromeFrame if installed --&gt;
  &lt;!--[if IE]&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;![endif]--&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery File Upload Demo&lt;/title&gt;
  &lt;meta name="description" content="File Upload widget with multiple file selection, drag&amp;amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads."&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;!-- Bootstrap styles --&gt;
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  &lt;!-- Generic page styles --&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;!-- blueimp Gallery styles --&gt;
  &lt;link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"&gt;
  &lt;!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --&gt;
  &lt;link rel="stylesheet" href="css/jquery.fileupload.css"&gt;
  &lt;link rel="stylesheet" href="css/jquery.fileupload-ui.css"&gt;
  &lt;!-- CSS adjustments for browsers with JavaScript disabled --&gt;
  &lt;noscript&gt;&lt;link rel="stylesheet" href="css/jquery.fileupload-noscript.css"&gt;&lt;/noscript&gt;
  &lt;noscript&gt;&lt;link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"&gt;&lt;/noscript&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload"&gt;jQuery File Upload&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="https://github.com/blueimp/jQuery-File-Upload/tags"&gt;Download&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://github.com/blueimp/jQuery-File-Upload"&gt;Source Code&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://github.com/blueimp/jQuery-File-Upload/wiki"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://blueimp.net"&gt;&amp;copy; Sebastian Tschan&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;h1&gt;jQuery File Upload Demo&lt;/h1&gt;
      &lt;h2 class="lead"&gt;Basic Plus UI version&lt;/h2&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li&gt;&lt;a href="basic.html"&gt;Basic&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="basic-plus.html"&gt;Basic Plus&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Basic Plus UI&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="angularjs.html"&gt;AngularJS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="jquery-ui.html"&gt;jQuery UI&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;
      &lt;blockquote&gt;
          &lt;p&gt;File Upload widget with multiple file selection, drag&amp;amp;drop support, progress bars, validation and preview images, audio and video for jQuery.&lt;br&gt;
          Supports cross-domain, chunked and resumable file uploads and client-side image resizing.&lt;br&gt;
          Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.&lt;/p&gt;
      &lt;/blockquote&gt;
      &lt;br&gt;
      &lt;!-- The file upload form used as target for the file upload widget --&gt;
      &lt;form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"&gt;
          &lt;!-- Redirect browsers with JavaScript disabled to the origin page --&gt;
          &lt;noscript&gt;&lt;input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"&gt;&lt;/noscript&gt;
          &lt;!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --&gt;
          &lt;div class="row fileupload-buttonbar"&gt;
              &lt;div class="col-lg-7"&gt;
                  &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
                  &lt;span class="btn btn-success fileinput-button"&gt;
                      &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                      &lt;span&gt;Add files...&lt;/span&gt;
                      &lt;input type="file" name="files[]" multiple&gt;
                  &lt;/span&gt;
                  &lt;button type="submit" class="btn btn-primary start"&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="reset" class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger delete"&gt;
                      &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                      &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;input type="checkbox" class="toggle"&gt;
                  &lt;!-- The global file processing state --&gt;
                  &lt;span class="fileupload-process"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- The global progress state --&gt;
              &lt;div class="col-lg-5 fileupload-progress fade"&gt;
                  &lt;!-- The global progress bar --&gt;
                  &lt;div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"&gt;
                      &lt;div class="progress-bar progress-bar-success" style="width:0%;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- The extended global progress state --&gt;
                  &lt;div class="progress-extended"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- The table listing the files available for upload/download --&gt;
          &lt;table role="presentation" class="table table-striped"&gt;&lt;tbody class="files"&gt;&lt;/tbody&gt;&lt;/table&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Demo Notes&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;ul&gt;
                  &lt;li&gt;The maximum file size for uploads in this demo is &lt;strong&gt;5 MB&lt;/strong&gt; (default file size is unlimited).&lt;/li&gt;
                  &lt;li&gt;Only image files (&lt;strong&gt;JPG, GIF, PNG&lt;/strong&gt;) are allowed in this demo (by default there is no file type restriction).&lt;/li&gt;
                  &lt;li&gt;Uploaded files will be deleted automatically after &lt;strong&gt;5 minutes&lt;/strong&gt; (demo setting).&lt;/li&gt;
                  &lt;li&gt;You can &lt;strong&gt;drag &amp;amp; drop&lt;/strong&gt; files from your desktop on this webpage (see &lt;a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support"&gt;Browser support&lt;/a&gt;).&lt;/li&gt;
                  &lt;li&gt;Please refer to the &lt;a href="https://github.com/blueimp/jQuery-File-Upload"&gt;project website&lt;/a&gt; and &lt;a href="https://github.com/blueimp/jQuery-File-Upload/wiki"&gt;documentation&lt;/a&gt; for more information.&lt;/li&gt;
                  &lt;li&gt;Built with the &lt;a href="http://getbootstrap.com/"&gt;Bootstrap&lt;/a&gt; CSS framework and Icons from &lt;a href="http://glyphicons.com/"&gt;Glyphicons&lt;/a&gt;.&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- The blueimp Gallery widget --&gt;
  &lt;div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"&gt;
      &lt;div class="slides"&gt;&lt;/div&gt;
      &lt;h3 class="title"&gt;&lt;/h3&gt;
      &lt;a class="prev"&gt;â€¹&lt;/a&gt;
      &lt;a class="next"&gt;â€º&lt;/a&gt;
      &lt;a class="close"&gt;Ã—&lt;/a&gt;
      &lt;a class="play-pause"&gt;&lt;/a&gt;
      &lt;ol class="indicator"&gt;&lt;/ol&gt;
  &lt;/div&gt;
  &lt;!-- The template to display files available for upload --&gt;
  &lt;script id="template-upload" type="text/x-tmpl"&gt;
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      &lt;tr class="template-upload fade"&gt;
          &lt;td&gt;
              &lt;span class="preview"&gt;&lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="name"&gt;{%=file.name%}&lt;/p&gt;
              &lt;strong class="error text-danger"&gt;&lt;/strong&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="size"&gt;Processing...&lt;/p&gt;
              &lt;div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;&lt;div class="progress-bar progress-bar-success" style="width:0%;"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              {% if (!i &amp;&amp; !o.options.autoUpload) { %}
                  &lt;button class="btn btn-primary start" disabled&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
              {% if (!i) { %}
                  &lt;button class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
          &lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  &lt;!-- The template to display files available for download --&gt;
  &lt;script id="template-download" type="text/x-tmpl"&gt;
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      &lt;tr class="template-download fade"&gt;
          &lt;td&gt;
              &lt;span class="preview"&gt;
                  {% if (file.thumbnailUrl) { %}
                      &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery&gt;&lt;img src="{%=file.thumbnailUrl%}"&gt;&lt;/a&gt;
                  {% } %}
              &lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;p class="name"&gt;
                  {% if (file.url) { %}
                      &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}&gt;{%=file.name%}&lt;/a&gt;
                  {% } else { %}
                      &lt;span&gt;{%=file.name%}&lt;/span&gt;
                  {% } %}
              &lt;/p&gt;
              {% if (file.error) { %}
                  &lt;div&gt;&lt;span class="label label-danger"&gt;Error&lt;/span&gt; {%=file.error%}&lt;/div&gt;
              {% } %}
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              {% if (file.deleteUrl) { %}
                  &lt;button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}&gt;
                      &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                      &lt;span&gt;Delete&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;input type="checkbox" name="delete" value="1" class="toggle"&gt;
              {% } else { %}
                  &lt;button class="btn btn-warning cancel"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel&lt;/span&gt;
                  &lt;/button&gt;
              {% } %}
          &lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
  &lt;script src="js/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;!-- The Templates plugin is included to render the upload/download listings --&gt;
  &lt;script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;
  &lt;script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;
  &lt;script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap JS is not required, but included for the responsive demo navigation --&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- blueimp Gallery script --&gt;
  &lt;script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
  &lt;script src="js/jquery.iframe-transport.js"&gt;&lt;/script&gt;
  &lt;!-- The basic File Upload plugin --&gt;
  &lt;script src="js/jquery.fileupload.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload processing plugin --&gt;
  &lt;script src="js/jquery.fileupload-process.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload image preview &amp; resize plugin --&gt;
  &lt;script src="js/jquery.fileupload-image.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload audio preview plugin --&gt;
  &lt;script src="js/jquery.fileupload-audio.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload video preview plugin --&gt;
  &lt;script src="js/jquery.fileupload-video.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload validation plugin --&gt;
  &lt;script src="js/jquery.fileupload-validate.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload user interface plugin --&gt;
  &lt;script src="js/jquery.fileupload-ui.js"&gt;&lt;/script&gt;
  &lt;!-- The main application script --&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --&gt;
  &lt;!--[if (gte IE 8)&amp;(lt IE 10)]&gt;
  &lt;script src="js/cors/jquery.xdr-transport.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;/body&gt; 
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>