Skip to content

Instantly share code, notes, and snippets.

@nerdburn
Created June 25, 2013 16:40
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save nerdburn/5860049 to your computer and use it in GitHub Desktop.
Save nerdburn/5860049 to your computer and use it in GitHub Desktop.
jQuery File Upload in Flask
<!-- javascript -->
<script type="text/javascript">
$(document).ready(function(){
// do photo uploads
$('.fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
var picker = $(this).data('link');
$(picker).children('span').html('check');
data.submit();
/*
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
*/
},
done: function (e, data) {
//data.context.text('Upload finished.');
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
});
</script>
<!-- html -->
<div class="photo-picker">
<ul class="photo-picker">
<li><a><span class="ss-icon">plus</span></a></li>
<li><a><span class="ss-icon">plus</span></a></li>
<li><a><span class="ss-icon">plus</span></a></li>
</ul>
<input class="fileupload" type="file" name="files[]" data-url="api/items/upload/">
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
<!-- python -->
@bp.route('/api/items/upload/', methods=['GET', 'POST'])
def api_upload_item_photo():
if request.method == 'POST':
files = []
file = request.files['files[]']
#if file and allowed_file(file.filename):
if file:
print 'its allowed'
filename = secure_filename(file.filename)
file.save(os.path.join(exching.config['UPLOAD_PATH'], filename))
f = {
'name': filename
}
files.append(f)
return jsonify(files=files)
pass
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment