expressjs / expressjs/multer

I am also having the same error here, the error is saying "Cannot read properties of undefined (reading 'path')

Open
#1,215 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.1k
Forks
1.1k
Avg merge
8d 2h
Merged PRs (30d)
21

Description

I am also having the same error here, the error is saying "Cannot read properties of undefined (reading 'path')
There was an error creating project (status code: 500", but in my case the when I click and submit a new project the file is being uploaded and saved into the "uploads" folder, however it would throw that error. I have also tested it using postman and it works with no errors, I think the problem is in the frontend part but I am not really sure. I hope there is a fix to this. I am using windows by the way.

Here is the my Front end(Form.tsx):
```import React, { useEffect, useRef, useState } from "react";
import {
Box,
Typography,
FormControl,
FormHelperText,
TextField,
TextareaAutosize,
Stack,
Select,
MenuItem,
} from "@mui/material";
import { FormProps } from "interfaces/common";
import CustomButton from "./customButton";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import {
DateRangePicker,
LocalizationProvider,
DateRange,
} from "@mui/x-date-pickers-pro";
import axios from "axios";
const Form = ({
type,
register,
handleSubmit,
formLoading,
onFinishHandler,
onFinish,
}: FormProps) => {
const [value, setValue] = useState>([null, null]);
const [outputDuration, setOutputDuration] = useState>([
null,
null,
]);
const [selectedFile, setSelectedFile] = useState(undefined);
const handleFileChange = (e: React.ChangeEvent) => {
if (e.target.files && e.target.files.length > 0) {
setSelectedFile(e.target.files[0]);
}
};
const onFinishWrapper = async (data: any) => {
const projectData = {
...data,
file: selectedFile, // Add the selectedFile as the 'file' property
duration: {
startDate: value[0],
endDate: value[1],
},
expectOutputDuration: {
startDate: outputDuration[0],
endDate: outputDuration[1],
},
};

if (selectedFile) {
// Upload the file
const formData = new FormData();
formData.append("file", selectedFile);
formData.append("title", data.title);
formData.append("description", data.description);
formData.append("fund", data.fund);
formData.append("source", data.source);
formData.append("sectorType", data.sectorType);
formData.append("proponent", data.proponent);
formData.append("status", data.status);
formData.append("objective", data.objective);
formData.append("activity", data.activity);
formData.append("expectOutput", data.expectOutput);
formData.append("college", data.college);
formData.append("intext", data.intext);

try {
await axios.post("http://localhost:8080/api/v1/projects", formData);
} catch (error) {
console.error("Error uploading file:", error);
}
}

await onFinish(projectData);
};

return (


{type} a Project





Enter Project Title *



{/* Other form fields */}


Upload File *







);
};

export default Form;
```

Then here is my upload.js for the multer middleware:

```import multer from "multer";
import path from "path";

// Set storage engine
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.resolve, "./uploads");
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname));
},
});

// Initialize upload
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 10, // 10MB file size limit
},
});

export default upload;
```

Additionally here is my project.controller.js for creating a new project:

```import Project from "../mongodb/models/project.js";
import dotenv from "dotenv";
import path from "path";
dotenv.config();
const createProject = async (req, res) => {
try {
// Destructure the required fields from the request body
const {
title,
description,
sectorType,
fund,
source,
duration,
proponent,
status,
objective,
activity,
expectOutput,
expectOutputDuration,
college,
intext,
} = req.body;

const file = req.file.path; // Retrieve the file from req.files

// Create a new Project instance
const project = await Project.create({
title,
description,
sectorType,
fund,
source,
duration,
proponent,
status,
objective,
activity,
expectOutput,
expectOutputDuration,
college,
file,
intext,
});

// Save the project to the database
await project.save();

res.status(200).json({ message: "Project/Research added successfully" });
} catch (error) {
res.status(500).json({ message: error.message });
console.log(req.file);
}
};
export{createProject}
```

Then hear is the project.routes.js for the routing:
```import express from "express";
import {
createProject,

} from "../controllers/project.controller.js";
import upload from "../middleware/upload.js";

const router = express.Router();

router.route("/").post(upload.single("file"), createProject);

export default router;
```

_Originally posted by @smolkawaii1 in https://github.com/expressjs/multer/issues/559#issuecomment-1586481551_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.