Discussions
I am trying to save a file to Pinata, following the standard documentation but i am getting an error of axios: Badrequest.
I am trying to upload an image to IPFS, which was selected by user in the front-end. I am storing the image in state hook and passing it on to the Form-data.
Following the pinata documentation I have also added the name of the file and pinata options in the form-data.
I am using axios to perform a get request to the Pinata server. The "handleFileUpload" function is used to deal with uploading the files to Pinata.
But I am getting a Bad-Request error (detailed error below) when I make the post request to the server.
Below I am providing my full code, this code is from one of my react components named create. My Full Code is provided below:
My full code is give below. (For the sake of this post I have removed my actual JWT)
import { useState } from 'react';
import { Row, Form, Button } from 'react-bootstrap';
import { create as ipfsHttpClient } from 'ipfs-http-client';
import axios from 'axios';
import FormData from 'form-data';
const Create = ({ marketplace, nft }) => {
const [image, setImage] = useState();
const [price, setPrice] = useState(null);
const [name, setName] = useState('');
const [description, setDescription] = useState('');
let ImgHash;
const JWT = 'JWT_here'
const handleFileUpload = async(e) =>
{
e.preventDefault();
if(image)
{
const formData = new FormData();
formData.append("file", image[0]);
const pinataMetadata = JSON.stringify({
name: name,
});
formData.append('pinataMetadata', pinataMetadata);
const pinataOptions = JSON.stringify({
cidVersion: 0,
})
formData.append('pinataOptions', pinataOptions);
try
{
const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", formData,
{
maxBodyLength: "Infinity",
headers: {
'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
'Authorization': JWT,
'path': 'somename'
}
});
console.log(res.data);
ImgHash = `ipfs://${res.data.IpfsHash}`;
}
catch (error)
{
console.error('Error uploading file:', error);
}
}
}
return (
<div className="container-fluid mt-5">
<div className="row">
<main role="main" className="col-lg-12 mx-auto" style={{ maxWidth: '1000px' }}>
<div className="content mx-auto">
<Row className="g-4">
<Form.Control
type="file"
required
name="file"
onChange={(e) => setImage(e.target.files[0])}
/>
<Form.Control onChange={(e) => setName(e.target.value)} size="lg" required type="text" placeholder="Name" />
<Form.Control onChange={(e) => setDescription(e.target.value)} size="lg" required as="textarea" placeholder="Description" />
<Form.Control onChange={(e) => setPrice(e.target.value)} size="lg" required type="number" placeholder="Price in ETH" />
<div className="d-grid px-0">
<Button onClick={handleFileUpload} variant="primary" size="lg">
Create & List NFT!
</Button>
</div>
</Row>
</div>
</main>
</div>
</div>
);
}
export default Create
I tried going through the documentation to figure out the error, but could not figure out the exact cause.
Below are the Error Message I received when trying to make a post request:
AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_REQUEST" config : {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} message : "Request failed with status code 400" name : "AxiosError" request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response : {data: {…}, status: 400, statusText: '', headers: AxiosHeaders, config: {…}, …} stack : "AxiosError: Request failed with status code 400\n at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=8be9dcc7:3371:12)\n at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=8be9dcc7:3611:7)" [[Prototype]] : Error