Can’t able to upload mp3 file to cloudinary

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


<%- include('./partial/header.ejs'); %>


<div class="container">

    <div class="row">
        <div class="col-sm-3">

        <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 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 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>

                <span class="material-icons">
                    </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>

        <div class="col-sm-3">


    var Cloudinary_Url = "";
    var cloud_name = "dny6ur1vn";
    var Cloudinary_PRESET_Name = 'hemantsong';
    var filename = '';
    var formData = '';

    var img = document.getElementById("finput");
    img.addEventListener('change', async function(event) {
        var file =[0];
        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) => {

        var resUrl = await fetch(Cloudinary_Url, {
            method: "POST",
            body: formData
        resUrl = await resUrl.text();
        resUrl = JSON.parse(resUrl);
        filename = resUrl.url;

        var name = document.getElementById("name").value.trim();
        var genre = document.getElementById("genre").value.trim();
        var album = document.getElementById("album").value.trim();

        var data = {
            "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();
        } catch (ex) {


<%- include('./partial/footer.ejs'); %>

[cloudinary preset name][1] [1]:

Read more here:

Content Attribution

This content was originally published by Hemant at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: