Discussion :

[Fred78300]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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