joplin-notes/joplin notion extension/Web Development/API/uploadcare.md

uploadcare

javascript(vanilla)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<input type="file" name="" id=""><br>
	<button>Upload</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
		const url='https://upload.uploadcare.com/base/'
		const pub_key='b182e75f948ada5a015f'


		const fileEle=document.querySelector("input")
		const button=document.querySelector("button")

		const formdata= new FormData()
		button.addEventListener("click",()=>{
			const file=fileEle.files[0];
			console.log('file: ',file)
			formdata.append("UPLOADCARE_PUB_KEY",pub_key)
			// formdata.append("my_file.jpg",file)
			formdata.append("my_file.jpg",file)

			axios.post(url, formdata, {
  
			})
			  .then(response => {
				console.log(response.data);
			  })
			  .catch(error => {
				console.error(error);
			  });

			// fetch(url,{
			// 	method: 'POST',
			// 	headers: {
			// 		"Content-Type": "multipart/form-data"
			// 	},
			// 	body: formdata,
			// })
			// .then(res=>res.json())
			// .then(data=>{
			// 	console.log('data: ',data)

			// })
			// .catch(err=>{
			// 	console.log('err: ',err)
			// 	console.log('err message: ',err.message)
			// })

		})
	</script>
</body>
</html>

or with fetch

fetch(url,{
	method: 'POST',

	body: formdata,
})
.then(res=>res.json())
.then(data=>{
	console.log('data: ',data)

})
.catch(err=>{
	console.log('err: ',err)
	console.log('err message: ',err.message)
})