CODEWITHSUNDEEP
ajaxjquerysymfonyfile-uploadblueimp
Reveclair
Reveclair

Reputation: 2421

Blueimp jQuery file upload and symfony2 : issue with custom upload handler

I'm using Symfony2 and I would like to use the BlueImp plugin, basic setup.

Actually, I have a form in which you can load 3 pictures and one song (it is for an artist registration).

As a start, I try to implement the plugin for just one picture. But when I select a file in my input "picture 1", nothing happens.. What is wrong ? 

<html>
 <head>
    <script type="text/javascript"  src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
    <script type="text/javascript"  src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.iframe-transport.js') }}"></script>
    <script type="text/javascript"  src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.fileupload.js') }}"></script>
  </head>


 <form id="myForm" action="{{ path('MyBundle_artist_new') }}" {{ form_enctype(form) }} method="post" novalidate>
     <div class="field">
        {{ form_label(form.picture1 "Picture 1") }}
        {{ form_widget(form.picture1) }}
      </div>
      <input type="submit" value="Register"/>
</form>

<script type="text/javascript">

$(document).ready(function(){

    $('#myform_picture1').fileupload(
    {
        dataType: 'json',
        url:'{{path('MyBundle_ajax_upload_picture') }}',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
  });
</script>

Here is upload handler (the action for the url {{path('MyBundle_ajax_upload_picture') }} :

<?php

    public function ajaxUploadPicture()
    {
        $request = $this->get('request');
        $uploaded_file = $request->files->get('myform_picture1');

        if ($uploaded_file) 
        {
            $picture1 = $this->processImage($uploaded_file);
            $picture1->setPath('pictures/artist/' . $picture1);
            $em->persist($picture1);
            $em->flush();

            $response = 'success';
        }

        else $response= 'error';

        $response = new Response(json_encode(array('response'=>$response)));
        $response->headers->set('Content-Type', 'application/json');
        return $response;
    }

    public static function processImage(UploadedFile $uploaded_file)
    {
        $path = 'pictures/artist/';
        $uploaded_file_info = pathinfo($uploaded_file->getClientOriginalName());
        $filename = uniqid() . "." .$uploaded_file_info['extension'];

        $uploaded_file->move($path, $filename);

        return $filename;
    }

Upvotes: 2

Views: 5730

Answers (1)

l3l0
l3l0

Reputation: 3393

You should check what you get from ajax request ex:

$('#myform_picture1').fileupload(
{
    dataType: 'json',
    url:'{{path('MyBundle_ajax_upload_picture') }}',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    },
    always: function (e, data) {
       console.log(data);
    }
});

I am not sure about this line $uploaded_file = $request->files->get('myform_picture1'); you sure that your file input name is myform_picture1 ?

Please try $uploaded_file = $request->files->get('myform[picture1]', array(), true);

Upvotes: 1

Related Questions