Plupload upload blob data-CodePudding

I have plupload and I have microphone, I want to add and send audio I have recorded from plupload to server. How can I do it with close to zero needless actions ? I tried to use addFile, but it do not work

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',

    browse_button : 'pickfiles', // you can pass in id...
    container: document.getElementById('container'), // ... or DOM Element itself

    url : "upload.php",
    chunk_size : '1mb',

    init: {
        PostInit: function() {
            document.getElementById('filelist').innerHTML = '';

            document.getElementById('uploadfiles').onclick = function() {
                {
                    uploader.start();
                    $("#uploadfiles").hide();
                    return false;
                }
            };
        },

        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById('filelist').innerHTML  = '<div id="'   file.id   '">'   file.name   ' ('   plupload.formatSize(file.size)   ') <b></b></div>';
                $("#uploadfiles").show();
            });
        },


        Error: function(up, err) {
            document.getElementById('console').innerHTML  = "\nError #"   err.code   ": "   err.message;
        }
    }
});

below is audio example I want to save from microphone

(437) [Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, Blob, …]
[0 … 99]
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 436]

CodePudding user response：

To upload the audio file you recorded from the microphone, you can use the addFile method provided by the Plupload library to add the file to the uploader's queue. Then, you can call the start method on the uploader to begin uploading the file to the server.

Here is an example of how you can do this:

// Add the audio file to the uploader's queue
uploader.addFile(audioFile);

// Start uploading the file
uploader.start();

You can also add a callback function to the FileUploaded event to be notified when the file has been successfully uploaded to the server.

// Add a callback function to the FileUploaded event
uploader.bind('FileUploaded', function(up, file, response) {
  // Handle the response from the server
});

Note that you may need to modify the server-side code (the upload.php file in your example) to handle the uploaded audio file and save it to the server.

CodePudding user response：

To add an audio file recorded from a microphone to a plupload instance and then upload it to a server, you can use the addFile method of the plupload instance. This method allows you to add a file to the list of files that will be uploaded by the plupload instance.

Here is an example of how you can use the addFile method to add an audio file recorded from a microphone to a plupload instance:

// Create a plupload instance
var uploader = new plupload.Uploader({
  // Your plupload configuration options
});

// Initialize the plupload instance
uploader.init();

// Record the audio from the microphone
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function(stream) {
    // Create a new audio Blob from the stream
    var audioBlob = new Blob(stream);

    // Add the audio Blob to the plupload instance using the addFile method
    uploader.addFile(audioBlob);
  });

In this code, the getUserMedia method is used to record audio from the microphone. When the audio recording is complete, the audio data is converted into a Blob object and then added to the plupload instance using the addFile method.

Once the audio file has been added to the plupload instance, you can upload it to the server by calling the start method of the plupload instance. This will cause the plupload instance to begin uploading the audio file to the server, using the URL specified in the plupload configuration.

You can find more information about the addFile method and other plupload methods in the plupload documentation: https://www.plupload.com/docs/API/Plupload.

I hope this helps! Let me know if you have any other questions.