1 pièce(s) jointe(s)
Django Probleme multi POST
Bonjour
J'essaye de réalisé un Drag And Drop de photo dans une page. Si j'arrive bien à créer un nombre de form dynamique sur ma page en fonction du nombre de photos.
Si je fais un POST d'un formulaire cela marche très bien. En revanche quand je clic sur send le multi post ne marche pas (voir message d'erreur)
avez-vous une idée
par avance merci
Fred
Views.py
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| def photo_element_Formset(request):
Ref = None
Description =None
Main = None
CreatedBy =None
CreationDate =None
UID = None
Photos = None
new_PhotoElement = None
if request.method == 'POST' and 'FILES':
Ref = request.POST.get('PhotosElements_Ref')
Description = request.POST.get('PhotosElements_Description')
Main = request.POST.get('PhotosElements_Main')
CreatedBy = request.POST.get('PhotosElements_CreatedBy')
CreationDate = request.POST.get(' PhotosElements_CreationDate')
UID = request.POST.get('PhotosElements_UID')
Photos = request.FILES['PhotosElements_Photos']
new_PhotoElement = PhotosElements(PhotosElements_Ref = Ref,PhotosElements_Description= Description,PhotosElements_Main=Main,PhotosElements_CreatedBy= CreatedBy , PhotosElements_CreationDate = CreationDate, PhotosElements_UID =UID,PhotosElements_Photos= Photos)
new_PhotoElement.save()
return redirect('toolsmanagment:toolsmanagment_photo')
return render(request, 'toolsmanagment/PE_Add.html',{}) |
Java scrip
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
| <script>
function addFileData(photoElement, image) {
var form = document.createElement("form");
form.classList.add('froms');
let divInput = cr('div');
divInput.classList.add('inputBlock');
form.setAttribute("method", "post");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("action", "{% url 'toolsmanagment:toolsmanagment_photo_element_Formset' %}");
let textNameLabel = cr("label");
textNameLabel.innerHTML = 'REF';
divInput.appendChild(textNameLabel);
let textName = cr("input");
textName.type = 'text';
textName.name = 'PhotosElements_Ref';
textName.id ='PhotosElements_Ref';
let country = localStorage.getItem('Country')
let cntry = country.substr(0,3)
textName.value = cntry+'-'+ localStorage.getItem('Article')+'-'+localStorage.getItem('Company')
console.log(image);
textName.classList.add('form-control');
divInput.appendChild(textName);
let textUidLabel = cr("label");
textUidLabel.innerHTML = 'Uid';
divInput.appendChild(textUidLabel);
let textUid = cr("input");
textUid.type = 'text';
textUid.name = 'PhotosElements_UID';
textUid.value = localStorage.getItem('Article');
textUid.disabled = true
textUid.classList.add('form-control');
divInput.appendChild(textUid);
let textAreaLabel = cr("label");
textAreaLabel.innerHTML = 'Description';
divInput.appendChild(textAreaLabel);
let textArea = cr("textArea");
textArea.name = 'PhotosElements_Description';
textArea.classList.add('form-control');
divInput.appendChild(textArea);
let dateInputLabel = cr("label");
dateInputLabel.innerHTML = 'CreatedDate';
divInput.appendChild(dateInputLabel);
let dateInput = cr("input");
dateInput.type = 'date';
dateInput.name = 'PhotosElements_CreationDate';
dateInput.classList.add('form-control');
divInput.appendChild(dateInput);
let creatydByInputLabel = cr("label");
creatydByInputLabel.innerHTML = 'CreatedBy';
divInput.appendChild(creatydByInputLabel);
let creatydByInput = cr("input");
creatydByInput.type='text';
creatydByInput.value = "{{user.username}}";
creatydByInput.name = 'creatydByInput';
creatydByInput.disabled = true;
creatydByInput.classList.add('form-control');
creatydByInput.classList.add('mb-3');
divInput.appendChild(creatydByInput);
let mainInput = cr("input");
mainInput.type = 'checkbox';
mainInput.name = 'PhotosElements_Main';
divInput.appendChild(mainInput);
let divInputMain = cr('div');
divInput.classList.add('test');
let btnInput = cr('input');
btnInput.value="send";
btnInput.type="submit";
btnInput.classList.add('forms_btn');
btnInput.id = 'thebtn';
let btnn = document.getElementById("thebtn")
var z = document.createElement('p'); // is a node
z.innerHTML = '{% csrf_token %}';
form.appendChild(divInput);
divInput.appendChild(photoElement);
divInput.appendChild(btnInput);
divInput.appendChild(z);
console.log('la ' + form.length)
let readerDemo = new FileReader();
readerDemo.onload = function (image) {
let imagex = cr('img');
imagex.name = 'img';
imagex.classList.add('imgx')
imagex.src = readerDemo.result;
form.appendChild(imagex);
const result = document.querySelector('.result');
result.appendChild(form);
form.addEventListener('submit',function(){
localStorage.setItem("PhotosElements_Ref",PhotosElements_Ref.text);
});
}
readerDemo.readAsDataURL(image);
}
function cr(e) {
return document.createElement(e);
}
function dropHandler(e) {
e.stopPropagation();
e.preventDefault();
const images = e.dataTransfer.files;
console.log(e);
let count = 0
for (image of images) {
let fileInput = cr("input");
fileInput.classList.add('inputFile');
fileInput.classList.add('form-control');
fileInput.type = "file";
fileInput.name ='PhotosElements_Photos';
fileInput.id ='id_PhotosElements_Photos';
fileInput.accept = 'image/*';
const dataTransfer = new DataTransfer();
dataTransfer.items.add(image);
fileInput.files = dataTransfer.files;
addFileData(
fileInput, images[count]
);
count ++
}
}
function dragOverHandler(e) {
e.stopPropagation();
e.preventDefault();
}
</scrip |
Pièce jointe 629338
