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

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);
        }


    });



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

[cloudinary preset name][1] [1]: https://i.stack.imgur.com/qAW6o.png



Read more here: https://stackoverflow.com/questions/66455245/cant-able-to-upload-mp3-file-to-cloudinary

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: