Skip to content

Instantly share code, notes, and snippets.

@SagaraZD
Last active September 9, 2017 13:30
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save SagaraZD/76e15b1f05d92a6fab7e4623bdcbd855 to your computer and use it in GitHub Desktop.
S3 Files Upload with Symphony - 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);
}
});
});
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment