upload et download en react

Bonsoir.
Et elle est où ta fonction uploadfile ?
Car tout ce que l'on peut voir, c'est une portion de code, difficile donc de pouvoir t'aider.

bonsoir, voici ma fonction upload, je verifie si le fichier ne depasse pas 2Mo sinon il le prends pour le stocker dans un dossier que j'ai appeller files_react qui se trouve dans mon wamp

uploadFile = (event) => {
event.preventDefault();
this.setState({error: '', msg: ''});
if(!this.state.file) {
this.setState({error: 'Please upload a file.'})
return;
}
if(this.state.file.size >= 2000000) {
this.setState({error: 'File size exceeds limit of 2MB.'})
return;
}
let data = new FormData();
data.append('file', this.state.file);
data.append('name', this.state.file.name);
fetch('http://localhost/files_react/', {
method: 'POST',
body: data
}).then(response => {
this.setState({error: '', msg: 'Sucessfully uploaded file'});
}).catch(err => {
this.setState({error: err});
});
}

l'erreur que je recois est celle ci:

×
←→1 of 2 errors on the page
Objects are not valid as a React child (found: TypeError: Failed to fetch). If you meant to render a collection of children, use an array instead.
    in h4 (at App.js:51)
    in div (at App.js:49)
    in App (at src/index.js:7)
▶ 23 stack frames were collapsed.
(anonymous function)
C:/Users/hugue/Desktop/reactApp/upload/src/App.js:41
  38 |   }).then(response => {
  39 |     this.setState({error: '', msg: 'Sucessfully uploaded file'});
  40 |   }).catch(err => {
> 41 |     this.setState({error: err});
  42 |   });
  43 | }
  44 | 
View compiled

Toute la page est celle ci

import React,{Component} from 'react';

import './App.css';

class App extends Component{
  state = {
    file: '',
    error: '',
    msg: ''
}
//input
onFileChange = (event) => {
  this.setState({
    file: event.target.files[0]
  });
}

//bouton upload

uploadFile = (event) => {
  event.preventDefault();
  this.setState({error: '', msg: ''});
  if(!this.state.file) {
    this.setState({error: 'Please upload a file.'})
    return;
  }
  if(this.state.file.size >= 2000000) {
    this.setState({error: 'File size exceeds limit of 2MB.'})
    return;
  }
  let data = new FormData();
  data.append('file', this.state.file);
  data.append('name', this.state.file.name);
  fetch('http://localhost/files_react/', {
    method: 'POST',
    body: data
  }).then(response => {
    this.setState({error: '', msg: 'Sucessfully uploaded file'});
  }).catch(err => {
    this.setState({error: err});
  });
}

render() {
  return (
    //fonction principale pour chercher le fichier dans l'ordinateur afin d'uploader

  <div className="App">
    <h3>Upload a file</h3>
    <h4 style={{color: 'red'}}>{this.state.error}</h4>
    <h4 style={{color: 'green'}}>{this.state.msg}</h4>
    <input onChange={this.onFileChange} type="file"></input>
    <button onClick={this.uploadFile}>Upload</button>   
 </div>
  );
}
}

export default App;

Déjà à tu bien ton serveur côté back qui fonctionne sur l'Upload ? Attention j'ai vu que tu vérifie le fichier en front mais il faut surtout le faire en back. Car le front te protégera pas. Pour gagner en expérience user tu peux le mettre plutôt sur le onFileChange pour avoir un message à chaud et non au moment de valider. Il faut que tu rajoute en headers "content-type": "multipart/form-data". Tu essaye d'inséré directement l'erreur de ton catch mais cette erreur est sous forme objet et non string. Dans ton erreur tu as "Failed to fetch" fait un console.log de l'erreur de ton catch pour avoir des détailles mais l'appel à localhost/file_react ne marche pas. Tu confirmera mais j'ai l'impression que localhost/file_react c'est juste l'url du dossier mais que tu n'as pas de back-end ? Si oui le problème est là, il te faut une api qui ce chargera de faire le traitement en back pour mettre le fichier dans le dossier.

bonjour et merci Alban, ce que vous avez dit est vrai c'est l'objet de mon blocage, en faite j'ai pas un backend je suis entrain de devellopé just une partie du coup l'idée est d'envoyer ce fichier dans un autre dossier dans mon pc, ce qui va servir par après avec l'equipe qui devellopera le coté bac,
ce je demande si comment faire pour envoyer ce fichier dans un dossier specifique dans mon dossier, c'est pourquoi j'avais creer ce dossier dans mon wamp " localhost/file_react"

Bonjour Hugues, tu n'aura pas d'autre choix que t'avoir un back-end. Il n'est pas possible de poser des fichiers sur ton serveur via le front sans passer par une api. Sinon il faut envoyé ton fichier sur une platforme tierce comme Firebase (même si tu voulais pas l'utiliser). Tu as d'autre outils que firebase qui fais ça aussi :)