Je souhaite stocker l'image dans le stockage Firebase et transmettre sa référence URL dans Firestore. Je suis donc en mesure de télécharger une image dans le stockage, mais je ne parviens pas à transmettre la référence d'URL de l'image dans Cloud Firestore.
import React , {Component} from 'react';
import fire from './../fire'
import Uploadimg from './Uploadimg'
class Adproduct extends Component{
geturl = (imurl) =>{
this.setState({
img:imurl
});
}
submit = e =>{
e.preventDefault()
var db= fire.firestore();
db.settings({
timestampsInSnapshots: true
});
db.collection('newproducts').add(this.State)
.then(res =>{
console.log(res.id)
this.props.submit()
})
.catch(err =>{
console.log('something went wrong',err)
})
}
takedata = e =>{
this.setState({
[e.target.name]: e.target.value
});
}
constructor(props){
super(props);
this.state ={
name:'',
productdetails:'',
size:'',
}
}
render() {
return (
<div className="container w3-padding">
<div className="row w3-padding">
<div className="col-md-6 w3-padding">
<h3 className="w3-tag w3-padding w3-center">Add New</h3>
<form className="w3-container" onSubmit={this.submit}>
<label className="w3-text-blue"><b>Name</b></label>
<input className="w3-input w3-border" type="text" name="name" value={this.state.name} onChange={this.takedata} required/>
<label className="w3-text-blue"><b>productdetails</b></label>
<input className="w3-input w3-border" type="text" name="productdetails" value={this.state.productdetails} onChange={this.takedata} required/>
<label className="w3-text-blue"><b>size available</b></label>
<input className="w3-input w3-border" type="text" name="size" value={this.state.size} onChange={this.takedata} required/>
<br/>
<Uploadimg geturl={this.geturl} />
<br/>
<button className="w3-btn w3-blue">Add</button>
</form>
</div>
</div>
</div>
);
}
}
export default Adproduct;
7 Réponses :
cela peut arriver si vous avez oublié de créer une base de données dans le projet ... Cela m'est arrivé - je copie la clé secrète du projet - mais j'ai oublié de créer une base de données dans le projet .... après avoir créé la base de données - cela a été résolu ...
Une idée de pourquoi il me montre la même erreur? Bcz J'ai la base de données et je peux lire les fichiers avec succès. Le simple fait d'ajouter à la base de données donne cette erreur
Cela fonctionne simplement pour moi.
Aller dans la base de données -> Règles ->
Changer autoriser la lecture, écrire: si faux; à vrai;
Cela peut arriver parce que vous n'avez pas créé de base de données ou que vous n'avez pas l'autorisation de lire / écrire sur la base de données à partir de l'onglet Sous règles, c'est-à-dire
{
"rules": {
".read": true,
".write": true
}
}
Si la réponse acceptée ne vous aide pas, vous rencontrez peut-être le même problème que moi.
J'ai résolu le problème en utilisant l'opérateur de diffusion dactylographié:
add(wizard: Wizard): Promise<DocumentReference> {
return this.wizardCollection.add({...wizard});
}
J'espère que cela vous aidera.
Oui, j'ai créé un document en utilisant une instance de classe. L'opérateur Spread le convertit en objet ordinaire.
utilisez
db.collection('newproducts').add(this.State)
au lieu de
db.collection('newproducts').add({...this.State})
J'obtenais "La fonction CollectionReference.add () nécessite que son premier argument soit de type objet, mais le type d'objet personnalisé: le nom de la classe a été fourni" Et en plaçant l'opérateur de propagation, il a été corrigé. J'espère que c'est la bonne façon de le gérer.
mais pourquoi? Je suis sûr que add (this.State) peut fonctionner dans certains cas!
Vous devez créer la base de données Firestore, autoriser les règles de lecture et d'écriture et la configurer pour votre projet. Ensuite, vous pouvez utiliser l'opérateur de diffusion comme ci-dessous pour enregistrer.
saveStudent(student: Student) {
return new Promise<Student> ((resolve, reject) => {
this.fireStore.collection('students').add({...student}).then(res => {}, err => reject(err));
});
}
Depuis la documentation
Vers utiliser une classe personnalisée, vous devez définir une fonction FirestoreDataConverter pour ta classe. Par exemple:
// Set with cityConverter
db.collection("cities").doc("LA")
.withConverter(cityConverter)
.set(new City("Los Angeles", "CA", "USA"));
Appelez votre convertisseur de données avec votre opération d'écriture:
class City {
constructor (name, state, country ) {
this.name = name;
this.state = state;
this.country = country;
}
toString() {
return this.name + ', ' + this.state + ', ' + this.country;
}
}
// Firestore data converter
var cityConverter = {
toFirestore: function(city) {
return {
name: city.name,
state: city.state,
country: city.country
}
},
fromFirestore: function(snapshot, options){
const data = snapshot.data(options);
return new City(data.name, data.state, data.country)
}
}