Skip to content

Instantly share code, notes, and snippets.

@SagaraZD SagaraZD/Uploads.xsl
Last active Sep 9, 2017

What would you like to do?
S3 Files Upload with Symphony - form-submit.js
// form-submit.js
$(document).on('click','form .submit-button',function(){
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var percentVal = '0%';
var s3URL = '';
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 class="progress">'+
'<div class="dz-progress">'+
'<div class="dz-upload bar" style="text-align:center" data-dz-uploadprogress></div>'+
'<div class="percent">Uploading</div>'+
accept: function(file, done){
file.postData = [];
url: '/ajax/',
data: {"action[generate-s3-signature]": 'submit', "fields[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;
error: function(response)
file.custom_status = 'rejected';
if (response.responseText) {
response = parseJsonMsg(response.responseText);
if (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
$.each(file.postData, function(k, v){
if (k.substr(0,1) == 'X'){
} else {
formData.append(k, v);
success: function(file, response){
$('.percent').text('Upload success');
var file_path = $(response).find('key').text();
<xsl:template match="data">
<script src=""> </script>
<script src="{$workspace}/js/form-submit.js"> </script>
<script src="{$workspace}/js/dropzone.js"> </script>
#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;}
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.