Network Error AxiosError: Network Error

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

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

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

sei-ec-remote / project-4-issues

Network Error AxiosError: Network Error #276