score:0

hi you cannot directly store the image in firestore.what you have to do is first store the document in firebase storage and get the url as reponse.once the response is received add the url in documents.

first create an storage action in reduce:

import { storage } from '../../../firebase/firebase';
import {
  add_document_started,
  add_document_completed,
  add_document_error
} from '../../actiontypes/storageactiontypes';
import { toast } from 'react-toastify';
import constants from '../../../config/constants';

export const adddocumentstart = () => ({
  type: add_document_started
});
export const adddocumentsuccess = () => ({
  type: add_document_completed
});
export const adddocumentfailure = () => ({
  type: add_document_error
});

export const adddocument = (values, pathname) => {
  const toastid = toast('uploading attachment, please wait..', {
    autoclose: false
  });
  return (dispatch) =>
    new promise(function(resolve, reject) {
      dispatch(adddocumentstart());
      const timestamp = new date().gettime();
      const image = values.document[0];
      var name;
      if (values && values.documentname) {
        name = timestamp.tostring().concat(values.documentname);
      } else {
        name = timestamp.tostring().concat(image.name);
      }
      const imageupload = storage.ref(`${pathname}/${name}`).put(image);
      imageupload.on(
        'state_changed',
        (snapshot) => {
          switch (snapshot.state) {
            case 'paused':
              reject('upload is paused');
              dispatch(adddocumentfailure('upload is paused'));
              break;
          }
        },
        (error) => {
          switch (error.code) {
            case 'storage/unauthorized':
              reject('permission denied');
              dispatch(adddocumentfailure('permission denied'));
              break;
            case 'storage/canceled':
              reject('upload cancelled');
              dispatch(adddocumentfailure('upload cancelled'));
              break;
            case 'storage/unknown':
              reject('server response error');
              dispatch(adddocumentfailure('server response error'));
              break;
          }
        },
        () => {
          toast.update(toastid, {
            render: 'attachment uploaded successfully',
            type: toast.type.success,
            autoclose: constants.toasttimer
          });
          storage
            .ref(pathname)
            .child(name)
            .getdownloadurl()
            .then((url) => {
              dispatch(adddocumentsuccess());
              resolve(url);
            });
        }
      );
    });
};

then in your onsubmit:

 this.props.dispatch(adddocument(values, 'jobs')).then((resp) => {
  let documenturl = resp;
  firestore.collection('jobs').add({
          ...project,
          postedby:'employer1',
          documents:documenturl
      }).then(()=>{
});

score:1

technically you can upload an image to firestore. you need to convert it to base64 text first. just spent some time figuring it out. i take the selected file from an upload file from browser then i upload it in the callback of the file reader. hopefully this helps someone out.

function getbase64(file){
     var n = document.getelementbyid('nameu').value;
    //name of uploaded file from textbox
     var d = document.getelementbyid('dateu').value;
    //date of uploaded file from textbox
    var reader = new filereader();
    reader.onerror = function (error) {
       console.log('error: ', error);
    };
    reader.readasdataurl(file);
    reader.onload = function () {
        let encoded = reader.result.split(',');
        //you split this to get mimetype out of your base64
        addforsale(date.now().tostring(10), {udesc: n, date: d, ufile: encoded[1]});
        // i just used a timestamp as the id
    }
};

function addforsale(id, data) {
    var collection = firebase.firestore().collection('forsale');
    return collection.doc(id).set(data);}

Related Query

More Query from same tag