CODEWITHSUNDEEP
javascriptphpangularjssymfonyng-flow
Pradeepb
Pradeepb

Reputation: 2562

ng-flow throws 404 error

I am new to symfony REST fromework. In our project we are using ng-upload to upload the images. below is the piece of code responsible for that.

// HTML

<div style="float: left; margin-top: 7px; width: 220px;" permission-roles="['ROLE_UNIT_WRITE']" flow-init="{target: getFlowJsTarget(), testChunks:false, headers: getFlowJsHeaders()}" flow-file-added="!!{jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message"></div>

// in controller (frontend)

$scope.getFlowJsTarget = function() {
    return Routing.generate('api_1_post_unit_photo', {id: $scope.unit.id});
};

$scope.getFlowJsHeaders = function() {
    return {'X-XSRF-TOKEN': $cookies['XSRF-TOKEN']};
};

$scope.getUnitPhotoUrl = function(unit) {
   return Routing.generate('api_1_get_unit_photo', {id: unit.id});
};

// Backend code - UnitController.php

public function getUnitPhotoAction(Request $request, $id)
{
    $unit = $this->getOr404($id);

    $response = new Response();

    if ($unit && $unit->getPhoto()) {
        $response->headers->set('Cache-Control', 'private');
        $response->headers->set('Content-type', 'image/jpeg');
        $response->headers->set('X-Accel-Redirect', '/unit-photos/'.$unit->getPhoto());

    } else {
        $response->setStatusCode(404);
    }

    return $response;
}

public function getUnitPhotosAction(Request $request, $id)
{
    $this->getOr404($id);

    $flowJsHelper = $this->get('isf.flow_js_helper');

    if ($flowJsHelper->checkChunk()) {
        return new JsonResponse(null, 200);
    } else {
        return new JsonResponse(null, 404);
    }
}
public function postUnitPhotoAction(Request $request, $id)
{
    $unit = $this->getOr404($id);

    $flowJsHelper = $this->get('isf.flow_js_helper');
    $flowJsHelper->saveChunk();

    $data = [
        'success' => true,
    ];

    $unitPhotoPath = $this->container->getParameter('kernel.root_dir').'/../web/uploads/unit-photos';
    $fileName = $unit->getId().'.jpg';

    if ($flowJsHelper->validateFile() && $flowJsHelper->save($unitPhotoPath.'/'.$fileName)) {
        $data['finished'] = true;
        $unit->setPhoto($fileName);
        $this->getHandler()->persist($unit, false);
    }

    return new JsonResponse($data);
}

//FlowJSHelper.php

public function checkChunk()
{
    return $this->filesystem->exists($this->getChunkPath($this->getParameter('flowChunkNumber')));
}

public function saveChunk()
{
    /** @var \Symfony\Component\HttpFoundation\File\UploadedFile $file */
    $file = $this->getRequest()->files->get('file');
    $chunkFile = $this->getChunkPath();
    $file->move(dirname($chunkFile), basename($chunkFile));
}

public function getChunkPath($index = null)
{
    if (null === $index) {
        $index = $this->getParameter('flowChunkNumber');
    }

    return $this->tempDir . DIRECTORY_SEPARATOR . $this->getParameter('flowIdentifier') . '_' . $index;
}

error I am getting like this.

ng-flow-standalone.js:1249 GET http://localhost:30080/api/v1/units/5732fa2dec045be8448b457d/photos?flowChu…st1jpg&flowFilename=test1.jpg&flowRelativePath=test1.jpg&flowTotalChunks=1 404 (Not Found)

Upvotes: 0

Views: 255

Answers (1)

Ravi Teja
Ravi Teja

Reputation: 1107

It looks like you are sending and GET request. Aren't you supposed to send a POST request when you are trying to upload an Image?

Does your server expects a GET or a POST request?

Try adding testChunks:false along with other configuration

flow-init="{testChunks:false}"

So that ng-flow does not send a GET request.

Upvotes: 1

Related Questions