upload gros zip AJAX

3 files changed, 121 insertions, 86 deletions

diff --git a/public/css/accueil.css b/public/css/accueil.css
index 0bf838d..8425cfa 100644
--- a/public/css/accueil.css
+++ b/public/css/accueil.css
@@ -82,7 +82,6 @@ img
 

 .boutonAnnuler:hover

 {

-    /*text-decoration: none;*/

     border: none;

 }

 

@@ -126,10 +125,6 @@ form
     text-decoration: none;

 }

 

-#courriel a:hover

-{

-    /*padding: 5px;*/

-}

 #courriel>button /* bouton pour remonter */

 {

     float: right;

@@ -163,11 +158,6 @@ form
     margin: 0px;

     padding: 2px;

 }

-#modeAdmin>div p

-{

-    /*margin: 5px;*/

-    /*padding: 0px;*/

-}

 #modeAdmin>p a

 {

     text-decoration: none;

@@ -176,26 +166,18 @@ form
 

 #lienModeAdmin

 {

-    margin: 0px 20px;

-}

-

-#lienModeAdmin p

-{

+    font-size: 90%;

+    margin-top: 10px;

+    margin-right: 30px;

     text-align: right;

     /* enlever la bande bleue en dessous du bloc_page */

-    margin-bottom: 0;

-    padding-bottom: 5px;

-}

-

-#lienModeAdmin p a

-{

-    color: #666;

-    font-weight: bold;

-    padding: 2px;

+    /*margin-bottom: 0;*/

+    padding-bottom: 8px;

 }

 

-#lienModeAdmin p a:hover

+#lienModeAdmin a

 {

+    text-decoration: none;

     color: black;

 }

 

@@ -239,16 +221,17 @@ form
     color: initial;

 }

 

+button

+{

+    padding: 1px;

+}

+

 /* options au survol */

 #options

 {

     /*display: none;*/

     display: flex;

 }

-/*#modeAdmin:hover #options

-{

-    display: flex;

-}*/

 

 

 /* PC, y compris vieux écrans 800x600 */

@@ -494,6 +477,11 @@ form
         max-width: 180px;

     }

 

+    #lienModeAdmin

+    {

+        margin-right: 20px;

+    }

+

     .zoneVideAdmin, #modeAdmin

     {

         height: 61px;

@@ -503,18 +491,6 @@ form
     {

         max-width: 380px;

     }

-

-    .boutonBackup

-    {

-        /*margin: 5px;*/

-        /*padding: 1px;*/

-        

-    }

-    #modeAdmin button

-    {

-        font-size: 95%;

-        padding: 1px;

-    }

 }

 

 /* spécialement pour les petits smartphones*/

diff --git a/public/file_upload.js b/public/file_upload.js
new file mode 100644
index 0000000..8106806
--- /dev/null
+++ b/public/file_upload.js
@@ -0,0 +1,103 @@
+// public/file_upload.js
+
+// envoie gros fichier ZIP
+// ce fichier est "caché", le serveur ne l'envoit
+// qu'un utilisateur connecté et sur la page "restauration"
+
+// -> input file onchange
+function sendFileSize()
+{
+        var tagId = 'archiveUpload';
+        var fileInfos = getFileInfo(tagId);
+        //var fileSize = document.getElementById(tagId).files[0].size;
+
+        const xhr = new XMLHttpRequest();
+        url = 'index.php?action=restauration&file_name='+fileInfos.name+'&file_size='+fileInfos.size;
+        xhr.open("GET", url);
+        xhr.send();
+}
+
+// -> input submit onclick
+function uploadDespiteServerMaxWeightLimit(maxPHPiniWeight, archiveFormat)
+{
+        // dans <input id="archiveUpload" type="file" >
+        var tagId = 'archiveUpload';
+        //var fileInfos = getFileInfo(tagId);
+        var file = document.getElementById(tagId).files[0];
+
+        // si le le fichier est assez léger, javascript s'arrête ici
+        if(file.size > maxPHPiniWeight)
+        {
+                // découpage
+                // envoyer et recevoir des pointeurs pour les perfs
+                // chunksArray est un tableau de "blob"
+                var nbChunks = Math.ceil(file.size / maxPHPiniWeight);
+                var chunksArray = sliceFile(file, nbChunks);
+
+                // requêtes AJAX
+                chunkIndex = 0; // une variable globale
+                uploadChunksAJAX(chunksArray, tagId);
+                
+                // annule l'envoi normal par POST
+                event.preventDefault();
+
+                // vider le formulaire et recharger
+                // reload() est un F5 et non un Ctrl + F5
+                //document.getElementById(tagId).value = '';
+                //location.reload();
+
+                location.href = "index.php?from=menu&action=restauration";
+        }
+}
+
+function getFileInfo(tagId)
+{
+        var infos =
+        {
+                name: document.getElementById(tagId).files[0].name,
+            size: document.getElementById(tagId).files[0].size,
+            type: document.getElementById(tagId).files[0].type,
+        }
+
+    return(infos);
+}
+
+function sliceFile(file, nbChunks)
+{
+        var byteIndex = 0; // octet du début
+        var chunks = []; // données
+
+        for (var i = 0; i < nbChunks; i += 1)
+        {
+                // octet de fin
+                var byteEnd = Math.ceil((file.size / nbChunks) * (i + 1));
+
+                // un morceau du fichier va dans une case du tableau
+                chunks.push(file.slice(byteIndex, byteEnd));
+
+                // nouvel octet du début
+                byteIndex += (byteEnd - byteIndex);
+        }
+
+        return chunks;
+}
+
+function uploadChunksAJAX(chunksArray, tagId)
+{
+        var fileName = document.getElementById(tagId).files[0].name;
+        var formData = new FormData();
+        const xhr = new XMLHttpRequest();
+
+        for(var i = 0; i < chunksArray.length; i++)
+        {
+                formData.append('blob', chunksArray[i]);
+
+                url = 'index.php?from=menu&action=restauration&chunk_name='+fileName+'_'+i;
+                // false => synchrone, déprécié parce que fige le navigateur
+                // mais ici on s'en fout
+                xhr.open("POST", url, false);
+                xhr.send(formData);
+
+                formData.delete('blob');
+        }
+}
diff --git a/public/main.js b/public/main.js
index 5ca23c7..ede1a30 100644
--- a/public/main.js
+++ b/public/main.js
@@ -29,16 +29,7 @@ function confirmerSuppression() // appel 'onCLick'
 

 // code exécuté à la validation du formulaire

 function envoiDonnees()

-{

-    // supprimer le positionnement absolu de l'iframe

-    /*let balisesIframe = document.getElementsByTagName("iframe");

-    for(var i = 0; i < balisesIframe.length; i++)

-    {

-        alert(balisesIframe[i].getAttribute("style")); // affiche le CSS

-        balisesIframe[i].removeAttribute("style");

-        alert(balisesIframe[i].getAttribute("style")); // affiche null

-    }*/

-}

+{}

 

 // bouton "mailto", le visiteur ne quitte pas la page

 function clientCourriel()

@@ -89,38 +80,3 @@ function nouveauMotdepasse(page)
         alert('Le mot de passe a été modifié.');

         window.setTimeout(location=('index.php?page=' + page + '&message=nouveau_mdp'), 0);

 }

-

-// envoie gros fichier ZIP

-// si le fichier ne passe pas la limite de l'hébergeur (php.ini)

-// l'ouvrir en javascript chaque envoyer progressivement

-function getFileInfo()

-{

-        // l'idi est dans le formulaire

-    var name = document.getElementById('myFile').files[0].name;

-    var size = document.getElementById('myFile').files[0].size;

-    var type = document.getElementById('myFile').files[0].type;

-    var date = document.getElementById('myFile').files[0].lastModifiedDate;

-    

-    var infos = name+" "+size+" "+type+" "+date;

-    alert(infos)

-    return(infos);

-}

-

-function extraireZIPetEnvoyerUnParUn(maxPHPiniWeight, archiveFormat)

-{

-        // taille du fichier?

-        var fileInfos = getFileInfo();

-        alert(fileInfos);

-

-        // taille limite autorisée?

-        // obtenue par php avec: ini_get('upload_max_filesize');

-

-        // si le fichier est plus gros que la limite:

-        // extraire l'archive

-        // envoyer les fichiers un par un par des requêtes AJAX

-        // le serveur peut aussi limiter le nombre de fichiers

-        // lors d'un envoie multiple

-        // en les envoyant un par un ça devrait être bon

-

-        // sinon ne rien faire et laisser l'envoi normal se faire

-}