I am trying to upload mp3 file to cloudinary but cloidinary server throw me error message: "Unsupported file type json" . I dont know where is wrong in my code. I tried image upload fine but got error when upload mp3 file and showing above error
addNewSong.ejs
<%- include('./partial/header.ejs'); %>
<br/><br/>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<form id="uploadSong">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label" class="fw-bold"><span class="material-icons">drive_file_rename_outline</span> Song Name</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" required>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><span class="material-icons"> category</span> Genre</label>
<input type="text" class="form-control" id="genre" aria-describedby="emailHelp" required>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"> <span class="material-icons">album</span> Album Name</label>
<input type="text" class="form-control" id="album" aria-describedby="emailHelp" required>
</div>
<span class="material-icons">
audiotrack
</span>Select .mp3 file<br/>
<input type="file" multiple="false" accept=".mp3,audio/*" id="finput">
<button class="btn btn-primary"> <span class="material-icons">upload</span> Upload </button>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<br/><br/><br/><br/>
<script>
var Cloudinary_Url = "https://api.cloudinary.com/v1_1/dny6ur1vn/upload";
var cloud_name = "dny6ur1vn";
var Cloudinary_PRESET_Name = 'hemantsong';
var filename = '';
var formData = '';
var img = document.getElementById("finput");
img.addEventListener('change', async function(event) {
event.preventDefault();
var file = event.target.files[0];
console.log(file);
formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", Cloudinary_PRESET_Name);
formData.append("cloud_name", cloud_name);
});
const form = document.getElementById('uploadSong');
form.addEventListener("submit", async(event) => {
event.preventDefault();
var resUrl = await fetch(Cloudinary_Url, {
method: "POST",
body: formData
});
resUrl = await resUrl.text();
resUrl = JSON.parse(resUrl);
filename = resUrl.url;
console.log(filename);
var name = document.getElementById("name").value.trim();
var genre = document.getElementById("genre").value.trim();
var album = document.getElementById("album").value.trim();
var data = {
name,
genre,
album,
"url": filename
};
options = {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */ *',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}
let res = '';
try {
res = await fetch('/song/upload', options);
res = await res.json();
console.log(res);
} catch (ex) {
console.log(ex);
}
});
</script>
<%- include('./partial/footer.ejs'); %>
[cloudinary preset name][1]
[1]: https://i.stack.imgur.com/qAW6o.png