Bonjour,

Je n'ai aucune connaissance dans JS mais je dois réaliser un petit projet donc pour le moment je recherche plutôt réussir à réaliser le projet plutôt qu'apprendre.

J'ai trouvé un script qui gère tous ce que je veux sur internet mais je suis bloqué à un endroit.

Voici le script

// ************************ Drag and drop screenshot ***************** //

let dropArea = document.getElementById("drop-area")

// Empecher les drags par défaut
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)   
  document.body.addEventListener(eventName, preventDefaults, false)
})

// Surbrillance quand la souris est sur l'élément
;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})

;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})

// Gérer les fichiers déposés
dropArea.addEventListener('drop', handleDrop, false)

function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}

function highlight(e) {
  dropArea.classList.add('highlight')
}

function unhighlight(e) {
  dropArea.classList.remove('active')
}

function handleDrop(e) {
  var dt = e.dataTransfer
  var files = dt.files

  handleFiles(files)
}

let uploadProgress = []
let progressBar = document.getElementById('progress-bar')

//barre de progression du téléchargement
function initializeProgress(numFiles) {
  progressBar.value = 0
  uploadProgress = []

  for(let i = numFiles; i > 0; i--) {
    uploadProgress.push(0)
  }
}

function updateProgress(fileNumber, percent) {
  uploadProgress[fileNumber] = percent
  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
  console.debug('update', fileNumber, percent, total)
  progressBar.value = total
}

function handleFiles(files) {
  files = [...files]
  initializeProgress(files.length)
  files.forEach(uploadFile)
  files.forEach(previewFile)
}

//preview des screens 
function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let img = document.createElement('img')
    img.src = reader.result
    document.getElementById('gallery').appendChild(img)
  }
}

function uploadFile(file) {
  let url = 'temp/'
  let formData = new FormData()

  formData.append('file', file)

  fetch(url, {
    method: 'POST',
    body: formData
  })
  .then(() => { /* Done. Inform the user */ })
  .catch(() => { /* Error. Inform the user */ })
}

Dans la fonction upload j'aimerai enregistrer les fichiers dans un dossier de mon projet.

Le dossier racine est catalog 

Et j'aimerai l'enregistrer dans admin / temp

J'ai modifié la variable URL mais lorsque j'importe un fichier via le drag and drop j'ai une erreur pourtant le chemin est bon...

Je suis allé voir l'api fetch et je comprends pas d'ou vient l'erreur.

Merci d'avance pour vos réponses.

bonjour , une requête réseaux elle peut pas balancè un fichier dans un dossier ......

elle peut juste communiqué avec le serveur je doute que dans ton dossier temp , il existe un fichier index.php à exécuté d'où le 404 not found ...

ta requête doit pointé vers une url qui et traité par le serveur ces lui qui enregistrera les fichiers dans tel ou tel dossier après les avoir traité ( car  ces des données clients ) , un truc du genre:  http://localdev.wizzim.fr:81/catalog/traitement.php

qui est un fichier qui va traité les données envoyé en POST ,

<?php

$datas = $_POST ;

print_r( $datas ) ;

puis traité les données et enfin enregistré le/les fichier.s si les données son correct

il y a un chapitre d'un tuto sur openclassrooms sur le traitement de données avec PHP qui parle du traitement de fichier .

et la doc php manual contient plus de fonction de manipulation de fichier qui te seront utile j'imagine

entre just file dans la barre de recherche tu trouvera plein de fonction de manipulation de fichier .

doc php manual .

Ok merci pour ces réponses.

Si mon dossier temp existe.

Par contre si le traitement de celui ci est placé dans une fonction, je dois indiquer le nom de la fonction dans l'url ?

ps: c'est pour un autre projet.

function enregistrementScreenAuto(){
$image = $_POST['image'];

$location = "temp/";

$image_parts = explode(";base64,", $image);

$image_base64 = base64_decode($image_parts[1]);

$filename = "screenshot_".uniqid().'.png';

$file = $location . $filename;

file_put_contents($file, $image_base64);
}

-
Edité par HCP29 2 décembre 2019 à 11:51:46