Blame view

html/ajax/dropzone.html 2.32 KB
5a739853   patrick.he   commit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
  
  <title>Dropzone.js - Ace Admin</title>
  
  <link rel="stylesheet" href="../../assets/css/dropzone.css" />
  
  <!-- ajax layout which only needs content area -->
  <div class="page-header">
  	<h1>
  		Dropzone.js
  		<small>
  			<i class="ace-icon fa fa-angle-double-right"></i>
  			Drag &amp; drop file upload with image preview
  		</small>
  	</h1>
  </div><!-- /.page-header -->
  
  <div class="row">
  	<div class="col-xs-12">
  		<!-- PAGE CONTENT BEGINS -->
  		<div>
  			<form action="../../dummy.html" class="dropzone" id="dropzone">
  				<div class="fallback">
  					<input name="file" type="file" multiple="" />
  				</div>
  			</form>
  		</div>
  
  		<!-- PAGE CONTENT ENDS -->
  	</div><!-- /.col -->
  </div><!-- /.row -->
  
  <!-- page specific plugin scripts -->
  <script type="text/javascript">
  	var scripts = [null,"../../assets/js/dropzone.js", null]
  	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
  	  //inline scripts related to this page
  		 jQuery(function($){
  	
  	try {
  	  Dropzone.autoDiscover = false;
  	  var myDropzone = new Dropzone("#dropzone" , {
  	    paramName: "file", // The name that will be used to transfer the file
  	    maxFilesize: 0.5, // MB
  	
  		addRemoveLinks : true,
  		dictDefaultMessage :
  		'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
  		<span class="smaller-80 grey">(or click)</span> <br /> \
  		<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
  	,
  		dictResponseError: 'Error while uploading file!',
  		
  		//change the previewTemplate to use Bootstrap progress bars
  		previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
  	  });
  	  
  	   $(document).one('ajaxloadstart.page', function(e) {
  			try {
  				myDropzone.destroy();
  			} catch(e) {}
  	   });
  	
  	} catch(e) {
  	  alert('Dropzone.js does not support older browsers!');
  	}
  	
  	});
  	});
  </script>