Success Event Response Empty

[dainemedia]

Hey Folks,

When uploading chunks everything appears to work fine, both chunks and the final file is uploaded, but when hooking into the success event, the second parameter (i.e. the response) is always empty.

I've tested the route in Postman that does this and it always returns the correct response, just that the success event never receives it. Only the file.

Here's my JS code:

this.$refs.sectionDropzone[0].dropzone.on('success', (file, responseText) => {
    console.log(file, responseText);

    if (responseText) {
        this.getTicket()
            .then(ticket => {
                this.ticket = ticket;

                this.setProgressMeter();
                this.checkProgress(file);
                this.uploadVideo(file, responseText);
            });
    }
});

As you can see, I'm logging the file and responseText parameters, with the responseText parameter always being blank.

Here's the PHP that handles the chunked uploads.

namespace App\Http\Controllers\API;

use Storage;
use App\Models\Video;
use Illuminate\Http\Request;
use Illuminate\Http\UploadedFile;
use App\Http\Controllers\Controller;
use App\Models\CourseChapterSection as Section;
use Pion\Laravel\ChunkUpload\Exceptions\UploadMissingFileException;
use Pion\Laravel\ChunkUpload\Handler\AbstractHandler;
use Pion\Laravel\ChunkUpload\Handler\HandlerFactory;
use Pion\Laravel\ChunkUpload\Receiver\FileReceiver;

class SectionVideoController extends Controller
{
    protected $section;
    protected $video;

    public function __construct(Section $section, Video $video)
    {
        $this->section = $section;
        $this->video = $video;
    }

    public function index()
    {
        $section = $this->section->find(request()->section_id);

        return $section->videos;
    }

    /**
     * Handles the file upload
     *
     * @param Request $request
     *
     * @return \Illuminate\Http\JsonResponse
     *
     * @throws UploadMissingFileException
     * @throws \Pion\Laravel\ChunkUpload\Exceptions\UploadFailedException
     */
    public function store(Request $request) {
        // create the file receiver
        $receiver = new FileReceiver('video', $request, HandlerFactory::classFromRequest($request));

        // check if the upload is success, throw exception or return response you need
        if ($receiver->isUploaded() === false) {
            throw new UploadMissingFileException();
        }

        // receive the file
        $save = $receiver->receive();

        // check if the upload has finished (in chunk mode it will send smaller files)
        if ($save->isFinished()) {
            $file = $save->getFile();

            // save the file and return any response you need, current example uses `move` function. If you are
            // not using move, you need to manually delete the file by unlink($save->getFile()->getPathname())
            $filename = str_slug(basename(time(), '.'.$file->getClientOriginalExtension())).'.'.$file->getClientOriginalExtension();;
            $mime = str_replace('/', '-', $file->getMimeType());

            // move the file name
            $file->move(storage_path().'/app/media/video/', $filename);

            return response()->json([
                'path' => storage_path().'/app/media/video/'.$filename,
                'name' => $filename,
                'mime_type' => $mime,
            ]);
        }

        // we are in chunk mode, lets send the current progress
        /** @var AbstractHandler $handler */
        $handler = $save->handler();

        return response()->json([
            'done' => $handler->getPercentageDone()
        ]);
    }

    public function destroy($id)
    {
        $video = $this->video->find($id);
        $video->sections()->detach(request()->section_id);
        $video->delete();
    }
}

Hope someone is able to help here. Any ideas?

[pionl]

Hi @affinitycloud, this is strange. Could you send me Chrome .har file when - record the network activity when uploading (with finish) and export it. Also when I have time, I will update the example project with success callback.

I will check the communication for any possible issue.

[dainemedia]

Hi @pionl I'm not sure it's down to you, to be fair. It appears, when using chunked uploads, that the response you'd expect as part of the success event is actually contained within the xhr property of the file.

So, once success fires, you get an empty responseText but can access the response you need via file.xhr.response, which is a little counterintuitive, to say the least, but I believe this is Dropzone itself.

[pionl]

That definitely sucks! I When I have a time, I will update the demo + wiki for further usage. Thanks!

[shamshadzaheer]

Hello @pionl I have implemented Laravel Chunk with Dropzone. Upload with small files are working fine but while I am uploading large files, it gets stuck in middle.

[pionl]

@dainemedia I've found a solution: https://github.com/pionl/laravel-chunk-upload/wiki/Dropzone#get-final-response-data

[pionl]

Hello @pionl I have implemented Laravel Chunk with Dropzone. Upload with small files are working fine but while I am uploading large files, it gets stuck in middle.

Do you have any logs? I'm pushing new fix that is related with dropzone.

[Danmanu44]

$save->getFile() is returning empty dont know why, but while the chunks are uploaded successfully