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);}
Source: stackoverflow.com
Related Query
- how to upload file like pdf or doc in firestore
- how to upload image or pdf file with form-data in react-native?
- How to upload only PDF file and preview in react Js
- How to upload image file with additional information like label or alt value in express-fileupload?
- How to enable file upload on React's Material UI simple input?
- ReactJS: How to handle Image / File upload with Formik?
- React - How to open PDF file as a href target blank
- How to read and upload a file in reactjs using custom button
- How to serve static assets like json file in webpack dev server?
- How do I download a pdf file onClick with react-pdf?
- How to upload an Excel sheet file using react.js and display data to a table
- How do I upload a file from Axios to Django?
- NodeJS/Restify: How can I recieve file upload in API?
- How do you encode a file to base64 then upload as multipart file to backend api using JS?
- How to show pdf file in react.js
- How do I link to local pdf file in a create-react-app project?
- How to upload a file to S3 using presigned Url with React.js
- How to return PDF file in an Graphql mutation?
- How to create file object of pdf from blob url (URL.createObjectURL())
- How to use the upload control from ant design, to get a reference of the file
- How to simulate uploading file via Ant Design's Upload using React Testing Library?
- How can I upload file from React to Express server?
- How can i render a pdf, doc or docx file in reactjs web app
- How to Upload Image to Firebase Storage and Upload URL to Firestore simultaneously in React.js?
- How to upload file to amazon s3 bucket using axios?
- How do convert a datauri element into a file I can upload via react?
- How to delete a file in antd Upload component
- How do I get the page count from a PDF file with react-pdf?
- How to fix an upload icon to a file upload input (material UI)
- How to import PDF file with react-file-viewer in Next.js?
More Query from same tag
- Hybrid rendering (Server + Client Side)
- Passing data back to prop from Axios with ReactJS Rails 6
- render with different child components from props
- How can I add update and delete button on Autocomplete menu using Material-ui with React.js
- PostCSS Loader has been initialized using an options object that does not match the API schema
- How to make GET request with MERN Stack
- RxJS cancel overlapping events and delay
- Why do these buttons not de-select after clicking on mobiles but work correctly on desktop?
- How to keep div size when showing submenu on top Tailwind and React
- Split react component return
- How to render a list in react when list data part of larger data set
- issues in downloading the pdf files using axios in reactjs (context api)
- Material UI select multiple component using an object in the value property, adds duplicate entry
- Semantic ui react dropdown component always stay open
- How to use javascript external library files in reactjs?
- React google login silently failing
- localStorage.getItem() : Could not fetch any data in form the local storage by the key
- React - Get Div Element from another Component
- Finding and updating an object, returning the whole object, recursively
- How to Get: Component Width After Render in React
- Mongoose: Find() return document with the the object that contains the value
- Is there a clean way to conditionally load and render different components for the same React Router route?
- How do I control style of material-ui SelectField
- Avoid Concat URL in React-Redux-Router
- React v16: Uncaught TypeError: Cannot read property 'object' of undefined
- Tailwind component library - customize colors in implementing project
- How to set img in label using React?
- calling react component function inside another react component function?
- Change svg color : React.createElement: type is invalid -- expected a string
- How to traverse a shallow component nested in ThemeProvider HOC?