Vue-dropzone: Success Event Response Always 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) {
        var response = JSON.parse(responseText);

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

                this.setProgressMeter();
                this.checkProgress(file);
                this.uploadVideo(file, response.path);
            });
    }
});

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?

[rowanwins]

Hi @affinitycloud

Can't say I've done anything with the chunking option., it looks like this might be an issue with dropzone itself, hopefully this comment at the bottom helps you otherwise you may need to raise an issue in that repo.

Cheers

[artknight]

I have just found out the hard way that this is true!!!
THIS IS A BUG!!!!

However, I noticed that if you look at the first arg (file) you will notice that file.xhr.response contains the response.

Ultimately this needs to be fixed!!!!

[adnanmuttaleb]

@artknight you are life saver thank you.

[rjwebdev]

Indeed @artknight you truely are a life saver!!!

Did you already create a ticket in their repository?