Last active
September 9, 2017 13:30
Star
You must be signed in to star a gist
S3 Files Upload with Symphony - form-submit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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