Я хочу включить перетаскивание для загрузки файлов с использованием Django и HTML. Я могу загрузить файл и сохранить его в модели «Документ». После этого я хочу, чтобы меня перенаправили на «user: datapreperation», который отобразит фрейм данных на новой странице. Однако я не перенаправлен и остаюсь на той же странице (" user: userform ").
Возможно, вы знаете, почему я не перенаправлен на подготовку данных '?
Настоящий код.
Спасибо за вашу помощь!
Вид:
class FileUploadView(View):
form_class = DocumentForm
template_name = 'user/model_form_upload.html'
def get(self, request):
form = self.form_class(None)
return render(request, self.template_name, {'form': form})
def post(self, request):
document_name = str(request.FILES['file'])
if request.FILES['file'].size < 31457280: # max 30 mbs allowed
form = self.form_class(request.POST, request.FILES)
document_type = str(document_name.rsplit(".", 1)[1])
valid_document_types = ["txt", "csv", "xlsx"]
if document_type in valid_document_types:
a = Document.objects.all()[0]
a.file = request.FILES['file']
a.description = document_name
a.save()
return redirect('user:datapreparation')
Модель:
class Document(models.Model):
description = models.CharField(max_length=255,blank=True)
file = models.FileField(upload_to='documents/')
URL:
from django.conf.urls import url
from . import views
app_name = 'user'
urlpatterns = [
# upload
url(r'^upload/$', views.FileUploadView.as_view(), name='userform'),
# data preparation - dataframe creation
url(r'^datapreparation/$', views.DataPreparation.as_view(), name='datapreparation'),
]
HTML:
<div id="upload"></div>
<form class="dropzone" action="{% url 'user:datapreparation' %}" method="post" enctype="multipart/form-data" id="dropzone">{% csrf_token %}
<div>
Drop files here
</div>
</form>
<script>
(function() {
var form = document.querySelector('form');
var dropzone = document.getElementById('dropzone');
dropzone.ondrop=function(ev){
ev.preventDefault();
this.className='dropzone';
var data = new FormData(form);
var xhr = new XMLHttpRequest();
var file = ev.dataTransfer.files[0]
console.log(file)
xhr.open('POST', "/user/upload/")
data.append('file', file)
xhr.send(data)
};
dropzone.ondragover = function () {
this.className = "dropzone dragover";
return false;
};
dropzone.ondragleave = function () {
this.className = 'dropzone';
return false;
};
}());