mirror of
https://gitlab.science.ru.nl/technicie/MarietjeDjango.git
synced 2025-12-09 21:02:24 +01:00
Multiupload revisited. Select multiple files at once for uploading.
This commit is contained in:
Jim Driessen
@ -1,7 +0,0 @@
|
||||
from django import forms
|
||||
|
||||
|
||||
class UploadForm(forms.Form):
|
||||
artist = forms.CharField()
|
||||
title = forms.CharField()
|
||||
file = forms.FileField()
|
||||
@ -12,7 +12,6 @@ from marietje.utils import song_to_dict, playlist_song_to_dict, send_to_bertha
|
||||
|
||||
from songs.models import Song
|
||||
from queues.models import PlaylistSong, Queue, QueueCommand
|
||||
from .forms import UploadForm
|
||||
|
||||
|
||||
@login_required
|
||||
@ -169,22 +168,27 @@ def request(request):
|
||||
@require_http_methods(["POST"])
|
||||
@login_required
|
||||
def upload(request):
|
||||
form = UploadForm(request.POST, request.FILES)
|
||||
if not form.is_valid():
|
||||
return JsonResponse({
|
||||
'success': False, 'errorMessage': 'File not uploaded correctly.'
|
||||
})
|
||||
files = request.FILES.getlist('file[]')
|
||||
artists = request.POST.getlist('artist[]')
|
||||
titles = request.POST.getlist('title[]')
|
||||
|
||||
file = request.FILES['file']
|
||||
for artist in artists:
|
||||
if not artist:
|
||||
return JsonResponse({'success': False, 'errorMessage': 'Please enter artists which are not empty.'})
|
||||
|
||||
duration = File(file).info.length
|
||||
hash = send_to_bertha(file)
|
||||
song = Song(user=request.user, artist=request.POST.get('artist'), title=request.POST.get('title'), hash=hash, duration=duration)
|
||||
song.save()
|
||||
for title in titles:
|
||||
if not title:
|
||||
return JsonResponse({'success': False, 'errorMessage': 'Please enter titles which are not empty.'})
|
||||
|
||||
return JsonResponse({
|
||||
'success': True
|
||||
})
|
||||
for i, file in enumerate(files):
|
||||
duration = File(file).info.length
|
||||
hash = send_to_bertha(file)
|
||||
if not hash:
|
||||
return JsonResponse({'success': False, 'errorMessage': 'Files not uploaded correctly.'})
|
||||
song = Song(user=request.user, artist=artists[i], title=titles[i], hash=hash, duration=duration)
|
||||
song.save()
|
||||
|
||||
return JsonResponse({'success': True})
|
||||
|
||||
|
||||
@require_http_methods(["POST"])
|
||||
|
||||
@ -1,63 +1,60 @@
|
||||
!function(e){var t=function(t,n){this.$element=e(t),this.type=this.$element.data("uploadtype")||(this.$element.find(".thumbnail").length>0?"image":"file"),this.$input=this.$element.find(":file");if(this.$input.length===0)return;this.name=this.$input.attr("name")||n.name,this.$hidden=this.$element.find('input[type=hidden][name="'+this.name+'"]'),this.$hidden.length===0&&(this.$hidden=e('<input type="hidden" />'),this.$element.prepend(this.$hidden)),this.$preview=this.$element.find(".fileupload-preview");var r=this.$preview.css("height");this.$preview.css("display")!="inline"&&r!="0px"&&r!="none"&&this.$preview.css("line-height",r),this.original={exists:this.$element.hasClass("fileupload-exists"),preview:this.$preview.html(),hiddenVal:this.$hidden.val()},this.$remove=this.$element.find('[data-dismiss="fileupload"]'),this.$element.find('[data-trigger="fileupload"]').on("click.fileupload",e.proxy(this.trigger,this)),this.listen()};t.prototype={listen:function(){this.$input.on("change.fileupload",e.proxy(this.change,this)),e(this.$input[0].form).on("reset.fileupload",e.proxy(this.reset,this)),this.$remove&&this.$remove.on("click.fileupload",e.proxy(this.clear,this))},change:function(e,t){if(t==="clear")return;var n=e.target.files!==undefined?e.target.files[0]:e.target.value?{name:e.target.value.replace(/^.+\\/,"")}:null;if(!n){this.clear();return}this.$hidden.val(""),this.$hidden.attr("name",""),this.$input.attr("name",this.name);if(this.type==="image"&&this.$preview.length>0&&(typeof n.type!="undefined"?n.type.match("image.*"):n.name.match(/\.(gif|png|jpe?g)$/i))&&typeof FileReader!="undefined"){var r=new FileReader,i=this.$preview,s=this.$element;r.onload=function(e){i.html('<img src="'+e.target.result+'" '+(i.css("max-height")!="none"?'style="max-height: '+i.css("max-height")+';"':"")+" />"),s.addClass("fileupload-exists").removeClass("fileupload-new")},r.readAsDataURL(n)}else this.$preview.text(n.name),this.$element.addClass("fileupload-exists").removeClass("fileupload-new")},clear:function(e){this.$hidden.val(""),this.$hidden.attr("name",this.name),this.$input.attr("name","");if(navigator.userAgent.match(/msie/i)){var t=this.$input.clone(!0);this.$input.after(t),this.$input.remove(),this.$input=t}else this.$input.val("");this.$preview.html(""),this.$element.addClass("fileupload-new").removeClass("fileupload-exists"),e&&(this.$input.trigger("change",["clear"]),e.preventDefault())},reset:function(e){this.clear(),this.$hidden.val(this.original.hiddenVal),this.$preview.html(this.original.preview),this.original.exists?this.$element.addClass("fileupload-exists").removeClass("fileupload-new"):this.$element.addClass("fileupload-new").removeClass("fileupload-exists")},trigger:function(e){this.$input.trigger("click"),e.preventDefault()}},e.fn.fileupload=function(n){return this.each(function(){var r=e(this),i=r.data("fileupload");i||r.data("fileupload",i=new t(this,n)),typeof n=="string"&&i[n]()})},e.fn.fileupload.Constructor=t,e(document).on("click.fileupload.data-api",'[data-provides="fileupload"]',function(t){var n=e(this);if(n.data("fileupload"))return;n.fileupload(n.data());var r=e(t.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]');r.length>0&&(r.trigger("click.fileupload"),t.preventDefault())})}(window.jQuery)
|
||||
|
||||
|
||||
function parseSong(file, form) {
|
||||
var url = file.urn || file.name;
|
||||
form.find('.panel-title').text(file.name);
|
||||
ID3.loadTags(url, function () {
|
||||
var tags = ID3.getAllTags(url);
|
||||
form.find('.artist').val(tags.artist);
|
||||
form.find('.title').val(tags.title);
|
||||
}, {
|
||||
tags: ['title', 'artist'],
|
||||
dataReader: FileAPIReader(file)
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$(document).on('change', '.filefield', function () {
|
||||
var file = this.files[0];
|
||||
var url = file.urn || file.name;
|
||||
var filefield = $(this);
|
||||
|
||||
// Read ID3 tags to fill the form.
|
||||
ID3.loadTags(url, function () {
|
||||
var tags = ID3.getAllTags(url);
|
||||
filefield.parent().parent().parent().find('.artist').val(tags.artist);
|
||||
filefield.parent().parent().parent().find('.title').val(tags.title);
|
||||
}, {
|
||||
tags: ['title', 'artist'],
|
||||
dataReader: FileAPIReader(file)
|
||||
});
|
||||
});
|
||||
var uploadform = $('.uploadform').clone(true, true);
|
||||
|
||||
$('#add').click(function() {
|
||||
uploadform.clone().appendTo('.forms-container');
|
||||
});
|
||||
|
||||
$('#remove').click(function() {
|
||||
$('.uploadform').last().remove();
|
||||
for(var i = 0; i < this.files.length; i++) {
|
||||
var form = songContainer.clone().appendTo('.uploadform form');
|
||||
var file = this.files[i];
|
||||
parseSong(file, form);
|
||||
}
|
||||
});
|
||||
var songContainer = $('.song-container').clone(true, true);
|
||||
$('.song-container').remove();
|
||||
|
||||
$('#upload').click(function() {
|
||||
var forms = $('.uploadform form');
|
||||
forms.each(function() {
|
||||
var progressBar = $(this).find('.progress-bar');
|
||||
var resultMessage = $(this).find('.result-message');
|
||||
var form = $(this);
|
||||
$(this).ajaxSubmit({
|
||||
uploadProgress: function(event, position, total, percentComplete) {
|
||||
form.find('input').attr('disabled', true);
|
||||
progressBar.css('width', percentComplete + '%');
|
||||
},
|
||||
success: function(result) {
|
||||
progressBar.removeClass('progress-bar-info progress-bar-success progress-bar-danger');
|
||||
progressBar.css('width', '100%');
|
||||
|
||||
if(!result.success)
|
||||
{
|
||||
progressBar.addClass('progress-bar-danger');
|
||||
resultMessage.text(result.errorMessage);
|
||||
}
|
||||
else
|
||||
{
|
||||
progressBar.addClass('progress-bar-success');
|
||||
resultMessage.text('Uploaded sucessfully.');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
progressBar.removeClass('progress-bar-info');
|
||||
var progressBar = $('.progress-bar');
|
||||
var resultMessage = $('.result-message');
|
||||
var form = $('.uploadform form');
|
||||
progressBar.addClass('active')
|
||||
form.ajaxSubmit({
|
||||
uploadProgress: function(event, position, total, percentComplete) {
|
||||
form.find('input').attr('disabled', true);
|
||||
progressBar.css('width', percentComplete + '%');
|
||||
},
|
||||
success: function(result) {
|
||||
progressBar.removeClass('progress-bar-info progress-bar-success progress-bar-danger active');
|
||||
progressBar.css('width', '100%');
|
||||
|
||||
if(!result.success)
|
||||
{
|
||||
progressBar.addClass('progress-bar-danger');
|
||||
progressBar.css('width', '100%');
|
||||
resultMessage.text(result.errorMessage);
|
||||
}
|
||||
});
|
||||
else
|
||||
{
|
||||
progressBar.addClass('progress-bar-success');
|
||||
resultMessage.text('Uploaded sucessfully.');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
progressBar.removeClass('progress-bar-info active');
|
||||
progressBar.addClass('progress-bar-danger');
|
||||
progressBar.css('width', '100%');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -17,32 +17,34 @@
|
||||
<form action="/api/upload" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="fileupload fileupload-new" data-provides="fileupload">
|
||||
<span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span>
|
||||
<span class="btn btn-primary btn-file"><span class="fileupload-new">Select files</span>
|
||||
<span class="fileupload-exists">Change</span>
|
||||
<input class="filefield" type="file" name="file" accept="audio/*" />
|
||||
<input class="filefield" type="file" name="file[]" accept="audio/*" multiple />
|
||||
</span>
|
||||
<br>
|
||||
<span class="fileupload-preview"></span>
|
||||
<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" name="artist" class="form-control input-sm artist" placeholder="Artist">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" name="title" class="form-control input-sm title" placeholder="Title">
|
||||
</div>
|
||||
<span class="result-message"></span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 0%;">
|
||||
<div class="song-container panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Song</h3>
|
||||
</div>
|
||||
<div class="panel-body ">
|
||||
<div class="form-group">
|
||||
<input type="text" name="artist[]" class="form-control input-sm artist" placeholder="Artist">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" name="title[]" class="form-control input-sm title" placeholder="Title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="add" class="btn btn-primary">+</button>
|
||||
<button id="remove" class="btn btn-primary">-</button>
|
||||
<br><br>
|
||||
<span class="result-message"></span>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 0%;">
|
||||
</div>
|
||||
</div>
|
||||
<button id="upload" class="btn btn-primary btn-block">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user