grishkovelli / vue-audio-recorder

A simple audio recorder for VueJS applications

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

remove the recorded file after uploading is successful

nacer-prosysdz opened this issue · comments

hi !

i'm uploading the recorded file manually with :after-recording event, but I want to delete it after the uploading is successfull.

how can i do that ?

i resolved this by adding ref to <audio-recorder ref="recorder" ...

and after uploading, i call the removeRecord function : this.$refs.recorder.removeRecord();

hi i want to know how you did it and upload it the files please help

<audio-recorder
ref="recorder"
:after-recording="afterRecording"
...
...
// define your recordedAudio var
data: () => ({
  recordedAudio: undefined,
  ...
}),
// define your callback function to save data in recordedAudio variable
afterRecording(data) {
  this.recordedAudio = data;
}
// send request to your server side after clicking on upload button
let formData = new FormData();
if (this.recordedAudio && this.recordedAudio.hasOwnProperty('blob') && this.recordedAudio.hasOwnProperty('url') && this.recordedAudio.blob instanceof Blob && !_.isNull(this.recordedAudio.url)) {
  formData.append('record', this.recordedAudio.blob, 'recordedAudio.mp3');
}
// send your http request here
<audio-recorder
ref="recorder"
:after-recording="afterRecording"
...
...
// define your recordedAudio var
data: () => ({
  recordedAudio: undefined,
  ...
}),
// define your callback function to save data in recordedAudio variable
afterRecording(data) {
  this.recordedAudio = data;
}
// send request to your server side after clicking on upload button
let formData = new FormData();
if (this.recordedAudio && this.recordedAudio.hasOwnProperty('blob') && this.recordedAudio.hasOwnProperty('url') && this.recordedAudio.blob instanceof Blob && !_.isNull(this.recordedAudio.url)) {
  formData.append('record', this.recordedAudio.blob, 'recordedAudio.mp3');
}
// send your http request here

well i'm using laravel as backend so i want want to move blob files to a directory so if have any idea or some function handle this and move files to a directory and store it there help me please

hello, very good question Mr @karaOdin :
i think you should use File Storage Laravel libraries.
so this is my solution.
`use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class RecordController extends Controller
{
public function store(Request $request)
{

    $file = $request->record;
    //save the mp3 file to 'storage/app/audio' path with fileanme test.wav
    Storage::put('audio/test.mp3', file_get_contents($file));
}

}`