Currently, I am facing an issue while attempting to fetch an image from a different website and then uploading it to IPFS using Next.js. Despite configuring CORS in next.config.js to enable the application to retrieve the image, everything seems to be functioning correctly. I am utilizing Axios to save the retrieved file in a File object; however, my IPFS upload is failing.
/* pages/test.js */
import Axios from 'axios';
import { create } from 'ipfs-http-client';
const client = create('https://ipfs.infura.io:5001/api/v0');
export default function Test () {
async function uploadImageToIPFS (url) {
const file = await Axios
.get(url, { responseType: 'blob' })
.then(response => {
console.log(response.data);
new File([response.data], "dummy");
})
.catch(ex => {
console.error(ex);
});
try {
const added = await client.add(
file,
{
progress: (prog) => console.log(`received: ${prog}`)
}
)
const url = `https://ipfs.infura.io/ipfs/${added.path}`;
console.log(url);
} catch (error) {
console.log('Error uploading file: ', error);
}
}
return (
<div onClick={() => uploadImageToIPFS('https://media-exp1.licdn.com/dms/image/C4E03AQFDEyGQpYnEwA/profile-displayphoto-shrink_100_100/0/1572360635415?e=1635379200&v=beta&t=W3cLmvalBVyArWAwTnbyeEWrJNbc9eKT7IJgoPhO22w')}>
Click to upload
</div>
);
}
The current error message being displayed is:
test.js?142b:31 Error uploading file: Error: Unexpected input: undefined
at normaliseInput (normalise-input.js?ce8a:31)
at normaliseInput.next (<anonymous>)
at multipartRequest (multipart-request.browser.js?542b:25)
at addAll (add-all.js?74f2:28)
at addAll.next (<anonymous>)
at last (index.js?9975:13)
at Object.add (add.js?59bb:23)
at _callee$ (test.js?142b:22)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:294)
at Generator.eval [as next] (runtime.js?96cf:119)
at asyncGeneratorStep (asyncToGenerator.js?2297:3)
at _next (asyncToGenerator.js?2297:25)
I'm unsure what mistake I might have made. Any guidance would be appreciated.