Closed jpineda48 closed 10 months ago
Trying to console.log the data uploaded in the route.
CLOUDINARY ROUTE
const express = require('express') const passport = require('passport') const customErrors = require('../../lib/custom_errors') const handle404 = customErrors.handle404 const requireOwnership = customErrors.requireOwnership const removeBlanks = require('../../lib/remove_blank_fields') const requireToken = passport.authenticate('bearer', { session: false }) const router = express.Router() router.post('/upload', (req, res) => { try{ const fileStr = req.body.data; console.log(fileStr) } catch (error){ console.log(error) } }) module.exports = router
IMAGE UPLOAD COMPONANT
import React from 'react' import { useState } from 'react' import apiUrl from '../../apiConfig' import axios from 'axios' const ImageUpload = () => { const [fileInputState, setFileInputState] = useState('') const [previewSource, setPreviewSource] = useState('') const [selectedFile, setSelectedFile] = useState() const handleFileInputChange = (e) => { const file = e.target.files[0] previewFile(file) } const previewFile = (file) => { const reader = new FileReader(); console.log('this is reader',reader) if (file) { console.log('this is file',file) reader.readAsDataURL(file); // reader.readAsDataURL(file); reader.onloadend = () => { setPreviewSource(reader.result); } }; }; const handleSubmitFile = (e) => { console.log('submitting') e.preventDefault() if(!previewSource) return; uploadImage(previewSource) } const uploadImage = async (base64EncodedImage) => { console.log(base64EncodedImage) return axios({ url:`${apiUrl}/upload`, method: 'POST', body: JSON.stringify({data: base64EncodedImage}), headers: {'Content-type': 'application/json'} }) // try { // await fetch ('/api/upload', { // method: 'POST', // body: JSON.stringify({data: base64EncodedImage}), // headers: {'Content-type': 'application/json'} // }) // } catch (error) { // console.log(error) // } } return ( <div> <h1>Upload</h1> <form onSubmit={handleSubmitFile}> <input type="file" name="image" onChange={handleFileInputChange} value={fileInputState} className='form-input' /> <button className='btn' type='submit'>Submit</button> </form> {previewSource && ( <img src={previewSource} alt="chosen" style={{height: '300px'}} /> )} </div> ) } export default ImageUpload
Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:65192:14)
definitely a routing issue
changed from try/catch to Axios
Paste a link to your repository here
You still have async in your as part of your function, you should remove that if you are not going to use await
What stack are you using?
(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)
What's the problem you're trying to solve?
Trying to console.log the data uploaded in the route.
Post any code you think might be relevant (one fenced block per file)
CLOUDINARY ROUTE
IMAGE UPLOAD COMPONANT
If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?
Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:65192:14)
What is your best guess as to the source of the problem?
definitely a routing issue
What things have you already tried to solve the problem?
changed from try/catch to Axios
Paste a link to your repository here