S3 Files Upload with Symphony - form-submit.js

form-submit.js

// form-submit.js

$(document).on('click','form .submit-button',function(){
	$('#upload_form').submit();
});

$(document).ready(function(){
	
	var bar = $('.bar'); 
	var percent = $('.percent');
	var status = $('#status');
	
	var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);

	var s3URL = 'https://your-bucket-name.s3.amazonaws.com';

	$(".attachments").dropzone({ 
		url: s3URL,
		maxFilesize: "10",
		method: "post",
		autoProcessQueue: true,
		maxFiles: 50,
		thumbnailWidth: 150,
		thumbnailHeight: 100,
		addRemoveLinks: true,
		acceptedFiles: 'image/*, .mp4, .mkv, .avi',
		parallelUploads: 2,
		clickable: 'h3',
		dictDefaultMessage: "Drop files here to upload - Maximum Size : 10MB",
		previewsContainer: '.dropzone-previews',
		previewTemplate: '<div class="dz-preview dz-file-preview">'+
							'<div class="dz-details">'+
								'<img data-dz-thumbnail />'+
								'<div class="dz-text-details" >'+
									'<div class="dz-filename"><span data-dz-name></span></div>'+
									'<div style="display:none;"  class="dz-size" data-dz-size></div>'+
								'</div>'+
							'</div>'+
							'<div class="progress">'+
							'<div class="dz-progress">'+
							'<div class="dz-upload bar" style="text-align:center" data-dz-uploadprogress></div>'+
							'<div class="percent">Uploading</div>'+
							'</div>'+
							'</div>'+
						'</div>',
		accept: function(file, done){
			file.postData = [];			
			$.ajax({
				url: '/ajax/',
				data: {"action[generate-s3-signature]": 'submit', "fields[name]": file.name,   "fields[type]": file.type, "fields[size]": file.size, "fields[id]": 5},
				type: 'POST',
				dataType: 'json',
				success: function(response)
				{
					file.custom_status = 'ready';
					file.postData = response;
					$(file.previewTemplate).addClass('uploading');
					done();

					$('.current-files').text(parseInt($('.current-files').text())+1);
				},
				error: function(response)
				{
					file.custom_status = 'rejected';

					if (response.responseText) {
						response = parseJsonMsg(response.responseText);
					}
					if (response.message) {
						done(response.message);
					} else {
						done('error preparing the upload');
					}
				}
			});
		},
		sending: function(file, xhr, formData){
			// xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
			$(".submit-button").prop("disabled",true); //Disable the submit button
			$(".select_filte_btn").prop("disabled",true); 
			$.each(file.postData, function(k, v){
				if (k.substr(0,1) == 'X'){
					xhr.setRequestHeader(k,v);
				} else {
					formData.append(k, v);
				}
			});		
		},
		success: function(file, response){		
			$('.percent').text('Upload success');
			$(".submit-button").prop("disabled",false);
			$(".select_filte_btn").prop("disabled",false); 
			var file_path = $(response).find('key').text();
			
			$("#file_mimetype").val('file_mimetype');
			$("#file_name").val(file.name);
			$("#file_path").val(file_path);
		}			
	});
});

Uploads.xsl

<xsl:template match="data">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="{$workspace}/js/form-submit.js"> </script>
<script src="{$workspace}/js/dropzone.js"> </script>
<style> 
#upload_form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:100%; border: 1px solid #ddd; padding:  1px; height: 23px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
.dz-remove{ display:none;}
</style>
	<form id="upload_form" method="post" enctype="multipart/form-data">
	<h4>File Upload</h4>
	<div class='attachments align-left'>
		<input type="text" name="fields[label]" placeholder="Enter file name" required="true" />
		<h3> <input type="button" class="select_filte_btn" value="Select the file"/> </h3>
		<div class='dropzone-previews'></div>
	</div>
		<input name="fields[file][mimetype]" type="hidden" id="file_mimetype" placeholder="mimetype" />
		<input name="fields[file][filename]" type="hidden" id="file_name" placeholder="file" />
		<input name="fields[file][filepath]" type="hidden" id="file_path" placeholder="path" />
		<input name="action[create-content]" type="hidden" />
		<p> <input type="button" value="Save" class="submit-button"/></p>
	</form>
</xsl:template>