CODEWITHSUNDEEP
laravelvue.js
3rdsty4bl00d
3rdsty4bl00d

Reputation: 134

How to upload audio file from Vue.js to Laravel?

I tried uploading an audio file like an image, but it didn't work. How do I extract data from an audio file and send it to Laravel?

<input
type="file"
class="user-edit-form browse-file"
accept=".mp3,audio/*"
@change="uploadSong"
>

uploadSong (e) {
      console.log(e)
      this.songUpload = e.target.files[0]
      if (!this.songUpload.length) {
        return
      }
      this.createSong(this.songUpload[0])
    },
createSong (file) {
      let reader = new FileReader()
      let vm = this
      reader.onload = (e) => {
        vm.song = e.target.result
        console.log(e.target.result)
      }
      reader.readAsDataURL(file)
    }

Upvotes: 0

Views: 2657

Answers (2)

Manzurul Hoque Rumi
Manzurul Hoque Rumi

Reputation: 3094

You can try below code:

Input:

<input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>

on file change:

handleFileUpload(){
    this.file = this.$refs.file.files[0];
}

Finally on form submit:

    submitAudioFile(){

            let formData = new FormData();

            // add file

            formData.append('file', this.file);

            axios.post( '/upload',
                formData,
                {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'multipart/form-data'
                }
              }
            )
        .then(function(){
           console.log('success');
        })
        .catch(function(){
           console.log('failed');
        });

Upvotes: 0

Waleed Raza
Waleed Raza

Reputation: 73

Input:

<input type="file" id="inputName" name="inputName"  v-on:change="fileData(this)" />

On Chnage:

fileData(element){
   var filedata = $(element).prop("files")[0];
   var fileName = file_data.name;
   var fileExtension = fileName.split('.').pop().toLowerCase();
}

Upvotes: 2

Related Questions