For my project, I am working on creating a Pinterest-like platform where users can upload images. However, I am facing an issue with fetching files from the frontend to the backend using axios. Below is the code for the server:
After testing various solutions, I am unable to pinpoint the exact flaw in the system. The application successfully stores the photo, but the problem arises when trying to transfer data (specifically files) to the backend, as string data can be retrieved without any issues.
const express = require('express');
const app = express()
const mongoose = require('mongoose')
const cors = require('cors')
const Photo = require('./models/Photo')
const multer = require('multer')
//MiddleWare
app.use(cors())
app.use(express.json())
mongoose.connect('', () =>{
console.log('Connected to DB..')
})
// storage
const Storage = multer.diskStorage({
destination: 'uploads',
filename: (req, file,cb) =>{
cb(null, file.originalname)
}
})
const upload = multer({
storage: Storage,
}).single('testImage')
app.post('/add', async(req, res) =>{
console.log(req.files)
})
app.listen(3001, () =>{
console.log('Listening..')
})
On the client-side, the following code is implemented:
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable react/jsx-no-comment-textnodes */
import React, { useState, useRef } from "react";
import NotificationsIcon from "@mui/icons-material/Notifications";
import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
import "./Header.css";
import axios from "axios"
...
When uploading an image, the server's console logs "undefined" which raises questions about why this behavior occurs. The output of `console.log(req)` shows detailed information about the incoming request and socket setup.