Cannot upload audio mp3 and mp4.

First, I wanna thank you for writing a plugin that extend blueimp/jQuery-File-Upload

I tried to play with the library using the following server-side:

<?php
    require_once "server-side-helpers/fancy_file_uploader_helper.php";

    // Depending on your server, you might have to use $_POST instead of $_REQUEST.
    if (isset($_POST["action"]) && $_POST["action"] === "fileuploader")
    {
        header("Content-Type: application/json");

        $allowedexts = array(
            "jpg" => true,
            "png" => true,
            "mp3" => true,
            "mp4" => true,
        );

        $files = FancyFileUploaderHelper::NormalizeFiles("files");
        if (!isset($files[0]))  $result = array("success" => false, "error" => "File data was submitted but is missing.", "errorcode" => "bad_input");
        else if (!$files[0]["success"])  $result = $files[0];
        else if (!isset($allowedexts[strtolower($files[0]["ext"])])){
            $result = array(
                "success" => false,
                "error" => "Invalid file extension.  Must be '.jpg', '.png', '.mp3', or '.mp4'.",
                "errorcode" => "invalid_file_ext"
            );
        } else {
            // For chunked file uploads, get the current filename and starting position from the incoming headers.
            $name = FancyFileUploaderHelper::GetChunkFilename();
            if ($name !== false) {
                $startpos = FancyFileUploaderHelper::GetFileStartPosition();

                // [Do stuff with the file chunk.]
            } else {
                // [Do stuff with the file here.]
                copy($files[0]["file"], __DIR__ . "/images/" . rand() . "." . strtolower($files[0]["ext"]));
            }

            $result = array(
                "success" => true,
                "files" => $files

            );
        }

        echo json_encode($result, JSON_UNESCAPED_SLASHES);
        exit();
    }
?>

I have no problem with images, but when doing it with mp3 or mp4, it doesn't through an error, but there is no file being saved. I tried to check the returned json, but there are no files in the tmp file:

{"success":true,"files":[{"success":true,"file":"C:\\xampp\\tmp\\php1235.tmp","name":"2020-10-17-19-PM.mp3","ext":"mp3","type":"audio/mp3","size":23683}]}

The returned json looks ok, but why am I not getting any file on the server?

My javascript looks like this:

$(function() {
    $('#thefiles').FancyFileUpload({
        params : {
            action : 'fileuploader'
        },
        edit : false,
        maxfilesize : 1000000 * 10,
        added : function(e, data) {
            // It is okay to simulate clicking the start upload button.
            //this.find('.ff_fileupload_actions button.ff_fileupload_start_upload').click();
        },
        recordaudio:true,
        recordvideo:true,
    });
});

My html form looks like this:



I tried it with both the local and the remote server but the same result. No file is saved under /images/ directory. Only jpg, png and gif extensions are being saved.

Do you have any implementation of Sebastian Tschan's PHP validation? The only think that I don't like about his original example are the Javascript Template. I wan't something that is plain jQuery and PHP on the server.

So, I was happy when I found your plugin from his wiki page, but I am facing another issue.

I hope to hear from you soon. 

Thank you very much,

Oliver

Temp files are created by PHP for multipart/form-data requests. PHP deletes them when the request is finished. That's normal behavior.

Is it possible that chunked uploading is being used? That particular path in your code doesn't write anything to disk. Also, are there any errors/warnings in your log files?

What browser are you using?

By the way, there is a simpler way to interface with the incoming data in PHP:

https://github.com/cubiclesoft/jquery-fancyfileuploader#server-side-processing

I got tired of writing the same lengthy code repeatedly, so I added FancyFileUploaderHelper::HandleUpload() to process all of the boilerplate logic on behalf of the application using far fewer lines of code.

I am using the latest google Chrome and the latest firefox and they have the same issue. Got SSL connection on both localhost and online remote server.

As an update, I notice that I am indeed able to upload mp3 and mp4, but "NOT" from the provided recorded audio and video from your canvas. However, I'm confused with why PHP responds with success:

{"success":true,"files":[{"success":true,"file":"C:\xampp\tmp\php1235.tmp","name":"2020-10-17-19-PM.mp3","ext":"mp3","type":"audio/mp3","size":23683}]}

I get the additional message with the success from the provided php code above with the line (9th line from the bottom):

                      $result = array(
                "success" => true,
                "files" => $files // THIS LINE

            );

But I will try to play with your handler and I will come back here to give you an update on my use case. Does the handler implement an upload from your main feature record video and record audio?

Or can you provide an example of successfully uploading the recorded audio/video to disk? I believe that since this is one of the main features of your plugin, it maybe good to dedicate a section in your wiki where future users can check, for further information.

Now checking your handler...

Thanks,

Oliver

Hi cubiclesoft,

Checking your other comment, I realized that when audio and video is uploaded as recorded from your audio/video buttons, (thus recording in mp3 or mp4 respectively), it goes to the first part of the condition (the if condition) of the above code and then if uploaded file is png, jpg, gif, mp3, mp4 it goes to the else condition.

Here is the current working code without using your Handler:


<?php
defined('PATHSPAGE') ?:
 die('Direct access not permitted');
    require_once "server-side-helpers/fancy_file_uploader_helper.php";

    // Depending on your server, you might have to use $_POST instead of $_REQUEST.
    if (isset($_POST["action"]) && $_POST["action"] === "fileuploader")
    {
        header("Content-Type: application/json");

        $allowedexts = array(
            "jpg" => true,
            "png" => true,
            "mp3" => true,
            "mp4" => true,
        );

        $files = FancyFileUploaderHelper::NormalizeFiles("files");
        if (!isset($files[0]))  $result = array("success" => false, "error" => "File data was submitted but is missing.", "errorcode" => "bad_input");
        else if (!$files[0]["success"])  $result = $files[0];
        else if (!isset($allowedexts[strtolower($files[0]["ext"])])){
            $result = array(
                "success" => false,
                "error" => "Invalid file extension.  Must be '.jpg', '.png', '.mp3', or '.mp4'.",
                "errorcode" => "invalid_file_ext"
            );
        } else {
            // For chunked file uploads, get the current filename and starting position from the incoming headers.
            $name = FancyFileUploaderHelper::GetChunkFilename();
            if ($name !== false) {
                $startpos = FancyFileUploaderHelper::GetFileStartPosition();
                $ext = strtolower($files[0]["ext"]);
                // [Do stuff with the file chunk.]
                if ($ext=='mp3'){
                    $path = "files/audio";
                } else {
                    $path = "files/video";
                }
                copy($files[0]["file"], realpath('../uploads') . "/$path/" . rand().time().newSalt() . "." . $ext);
            } else {
                // [Do stuff with the file here.]
                $ext = strtolower($files[0]["ext"]);
                $extra = "";
                if ($ext=='mp3'){
                    $path = "files/audio";
                    $extra='non_native_';
                } elseif($ext=='mp4') {
                    $path = "files/video";
                    $extra='non_native_';
                } else {
                    $path = "images";
                }
                copy($files[0]["file"], realpath('../uploads') . "/$path/" . "$extra" . rand().time().newSalt() . "." . $ext);
            }

            //FancyFileUploaderHelper::HandleUpload("files", $options);

            $result = array(
                "success" => true,
                "files" => $files
            );
        }

        echo json_encode($result, JSON_UNESCAPED_SLASHES);
        exit();
    }
?>

I notice that your handler code is large (though, I am interested to learn more about what that method does).

Do you have any information on when to use and not to use chuck uploading in your library?

Thanks,

Oliver

It's unfortunate that you are receiving a chunked file upload for those options. That's not supposed to happen automatically, which indicates a possible bug with handling added file blobs in the underlying blueimp jQuery File Upload library itself (i.e. not this plugin). However, code should be prepared to handle the unexpected.

Chunked uploads may result in multiple requests to the same script for the same file. You are simply copying each incoming chunk to a new file when you should probably append the new chunk to correct location in the previous file (usually the end of the file but not always).

Chunked uploads allow applications to bypass PHP file upload limits. So if the PHP INI has a file upload limit of 10MB, then the largest single file that can be uploaded is 10MB. Chunked uploads allows for sending 10MB chunks of a much larger file per request (first 10MB the first request, the next 10MB the next request, etc). Chunked uploads are trickier to deal with because they can result in partial file uploads on the server.

The handler code implements a simple callback structure and emits JSON and exits if a file upload is detected. The result is a lot less application code, it's significantly less error-prone, and it also correctly handles chunked file uploads as far as writing them to disk goes.

By the way, where did you find the code you are using? I'd like to make sure users have the best experience on the server-side end of things and I thought I got rid of those particular examples.

I'm going to close this issue as it's not really a bug report but I'll continue to reply to this issue.

cubiclesoft / jquery-fancyfileuploader

Cannot upload audio mp3 and mp4. #14