Antoine Duquenoy / PFE_IMA5_2018_2019_P06

Commit 865d182a1798d96df347c91d26edcec6ddea74c5

Authored by Antoine Duquenoy
1 parent 6029d52b

Upload d'un fichier 

L'utilisateur peut déposer un fichier ou cliquer sur une zone pour choisir un fichier. S'il a choisi des noeuds dans la liste du tableau, une requête POST est envoyé contenant le binaire du fichier, son nom ainsi que les IDs des noeuds.
Showing 2 changed files with 142 additions and 18 deletions   Show diff stats
Inline Side-by-side
Front/index.html
  Show/Hide comments   View file @865d182
... ... @@ -151,19 +151,42 @@
151 151  
152 152 <h4>Choix du fichier</h4>
153 153  
  154 + <input id="filesExplorer" type="file" style="display:none"></input>
154 155 <div class="upload-drop-zone" id="drop-zone">
155 156 Clic ou dépose un fichier ici
156 157 </div>
157 158  
158 159 <div class="progress">
159   - <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  160 + <div id="file-progress" class="progress-bar" role="progressbar" style="width: 75%; display:none">25%</div>
160 161 </div>
161 162  
162 163 </div>
  164 +
  165 + <button id="sendButton" type="button" class="btn btn-secondary btn-lg btn-block"style="margin-top:50px;">Envoyer</button>
  166 +
163 167 </div>
164 168  
165 169 </div>
166 170  
  171 + <div class="modal fade" id="warningFilesNumber" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  172 + <div class="modal-dialog modal-dialog-centered" role="document">
  173 + <div class="modal-content">
  174 + <div class="modal-header">
  175 + <h5 class="modal-title" id="modal-title">Attention</h5>
  176 + <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  177 + <span aria-hidden="true">&times;</span>
  178 + </button>
  179 + </div>
  180 + <div id="modal-content" class="modal-body">
  181 + Un seul fichier peut être envoyé !
  182 + </div>
  183 + <div class="modal-footer">
  184 + <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  185 + </div>
  186 + </div>
  187 + </div>
  188 + </div>
  189 +
167 190 </div>
168 191  
169 192 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
... ...
Front/js/home.js
  Show/Hide comments   View file @865d182
1   -var tableNodes;
2   -
3 1 $(document).ready(function() {
4 2  
5   - tableNodes = $('#nodes-table').DataTable( {
6   - select: {
7   - style: 'multi'
8   - }
9   - } );
10   -
11   - tableNodes.on( 'select', function (e, dt, type, indexes) {
12   - var rowData = tableNodes.rows( indexes ).data().toArray();
13   - console.log(JSON.stringify(rowData));
14   - } );
15   -
16   - tableNodes.on( 'deselect', function (e, dt, type, indexes) {
17   - var rowData = tableNodes.rows(indexes).data().toArray();
18   - console.log(JSON.stringify(rowData));
19   - } );
  3 +/********** Tableau **********/
  4 +
  5 + var tableNodes = $('#nodes-table').DataTable( {
  6 + select: {
  7 + style: 'multi'
  8 + }
  9 + } );
  10 +
  11 + var nodeSet = new Set();
  12 +
  13 + tableNodes.on('select', function (e, dt, type, indexes) {
  14 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  15 + nodeSet.add(rowData[0]);
  16 + } );
  17 +
  18 + tableNodes.on('deselect', function (e, dt, type, indexes) {
  19 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  20 + nodeSet.delete(rowData[0]);
  21 + } );
  22 +
  23 +/********** Drop Zone **********/
  24 +
  25 + var formData = new FormData();
  26 + var dropZone = document.querySelector("#drop-zone");
  27 + dropZone.style.cursor = "pointer";
  28 + var file = document.getElementById("filesExplorer");
  29 + var fileProgress = document.getElementById("file-progress");
  30 + var readyToSend = false;
  31 +
  32 + dropZone.addEventListener('click', function() {
  33 + delete formData;
  34 + formData = new FormData();
  35 + file.click();
  36 + })
  37 +
  38 + file.addEventListener('change', function() {
  39 + dropZone.innerHTML = this.files[0].name;
  40 + formData.append("file", this.files[0]);
  41 + formData.append("filename", this.files[0].name);
  42 + readyToSend = true;
  43 + }, false)
  44 +
  45 + dropZone.addEventListener('drop', function(e) {
  46 + e.preventDefault();
  47 + delete formData;
  48 + formData = new FormData();
  49 + dropZone.style.borderWidth = '2px';
  50 + var files = e.dataTransfer.files;
  51 +
  52 + if(files.length > 1) {
  53 + $("#warningFilesNumber").modal()
  54 + return;
  55 + }
  56 + dropZone.innerHTML = files[0].name;
  57 + formData.append("file", files[0]);
  58 + formData.append("filename", files[0].name);
  59 + readyToSend = true;
  60 + }, false)
  61 +
  62 + dropZone.addEventListener('dragenter', function(e) {
  63 + console.log("Enter");
  64 + dropZone.style.borderWidth = '5px';
  65 + }, false);
  66 +
  67 + dropZone.addEventListener('dragleave', function(e) {
  68 + console.log("Leave");
  69 + dropZone.style.borderWidth = '2px';
  70 + }, false);
  71 +
  72 + dropZone.addEventListener('dragover', function(e) {
  73 + e.preventDefault();
  74 + }, false);
  75 +
  76 + document.getElementById("sendButton").addEventListener('click', function() {
  77 + var modalContent = document.getElementById("modal-content");
  78 + var modalTitle = document.getElementById("modal-title");
  79 + if(readyToSend && nodeSet.size > 0) {
  80 + formData.append("nodes", Array.from(nodeSet).join(';'));
  81 + var request = new XMLHttpRequest();
  82 + request.open("POST", "file.php");
  83 +
  84 + request.upload.onloadstart = function(e) {
  85 + fileProgress.style.display = 'block';
  86 + fileProgress.style.width = 0 + "px"
  87 + fileProgress.innerHTML = "0%";
  88 + }
  89 +
  90 + request.upload.onprogress = function(e) {
  91 + var p = 100 - ((e.total - e.loaded) / e.total * 100);
  92 + fileProgress.style.width = Math.ceil(p) + "%"
  93 + fileProgress.innerHTML = Math.ceil(p) + "%";
  94 + }
  95 +
  96 + request.upload.onloadend = function(e) {
  97 + fileProgress.style.width = 100 + "%"
  98 + fileProgress.innerHTML = "100%";
  99 + var modalButton = document.getElementById("modal-button");
  100 +
  101 + modalButton.addEventListener('click', function(e) {
  102 + location.reload();
  103 + })
  104 +
  105 + modalContent.innerHTML = "Upload terminé !";
  106 + modalTitle.innerHTML = "Félicitations";
  107 + $("#warningFilesNumber").modal()
  108 + }
  109 +
  110 + request.send(formData);
  111 +
  112 + delete formData;
  113 + formData = new FormData();
  114 + }
  115 + else {
  116 + modalContent.innerHTML = "Veuillez choisir un fichier !";
  117 + modalTitle.innerHTML = "Attention";
  118 + $("#warningFilesNumber").modal()
  119 + }
  120 + })
20 121  
21 122 } );
... ...