Menu
I'm new to this community. Actually, I'm doing a small project using the React, and my server is running with the express and node js with mongodb database.
For the smaller files I'm able to communicate with the server as normal.But as I upload a larger file I'm unable to send the data to the server.An empty object is sent to the server.
And the client side its showing the error of
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 413."
I've searched for the solution in the internet for hours, but I havent got any solution.
can anyone help me out from this...?
902
const axios = require('axios'); const FormData = require('form-data'); const fs = require('fs/promises'); // Read image from disk as a Buffer const image = await fs. readFile('./stickers. jpg'); // Create a form and append image with additional fields const form = new FormData(); form. append('productName', 'Node.
First, you create a local React state selectedFile using useState() hook to store the currently selected file, Second, the handleFileSelect event handler updates the selectedFile value using the setter function setSelectedFile and, Third, the handleSubmit function handles the post request to upload file using Axios.
app.use(bodyParser.json({limit: '50mb'}));
You might need to use middleware to set the size limits of uploads.
108
Did you check your request being sent to the backend? Whether the image details are sent along with it.
Seems like you are doing a cross domain request. Make sure that you have the above headers set at the backend for the response.
Still if you are finding issues, you can refer to this working example. https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
