Is there a working demo anywhere? about oneupuploaderbundle HOT 4 CLOSED

Hi @lfjeff

The documentation may be helpful to someone with extensive experience with Symfony, but this is my first Symfony project and I seem to be continually getting stuck on minor issues [...]

Thanks for taking the time to write down such extensive feedback. This is indeed helpful, as this is a point that gets constantly out of my focus, when I'm writing documentation.

Meta

Let's just start from the beginning and see if we can resolve some of your questions.

Is there a working demo anywhere?

No, there is no working demonstration. This is because its hard to cover all features/uploaders without creating an overly complicated solution. But you're right, the docs addressing the implementation of specific uploaders could be more detailed. I'll take that on the list of documentation improvements.

So far, instead of this being a "RAD" project, it has been "SAD" (Slow Application Development).

Symfony has indeed a steep learing curve, which makes the initial learning process pretty hard. But you'll see. Once you get familiar with it, the S will shift to the R. :)

Questions

Can this bundle be used with the regular form construction method like [...]

Frontend file uploaders tend to forge their own requests instead of submitting the form. Therefore this bundle does not handle a request using the Form component. But there is another reason. Typically the Form component is using a CSRF-Token. On each request this token changes. This would significally complicate the integration of a frontend uploader due to the fact that after each upload, a fresh token has to be returned and sent along with the next request.

So if you take the mapping described before, the generated route name would be _uploader_gallery. However, the generated name is actually: _uploader/gallery/upload

_uploader_gallery is the route's name whereas _uploader/gallery/upload is the generated path. You can always have a look at your defined routes running the router:debug command in your Symfony2 project.

$> ⎈ ⇢ php app/console router:debug
[router] Current routes
Name                      Method      Scheme Host Path
_welcome                  ANY         ANY    ANY  /
_demo_login               ANY         ANY    ANY  /demo/secured/login
_security_check           ANY         ANY    ANY  /demo/secured/login_check
[...]
_uploader_upload_gallery  POST        ANY    ANY  /_uploader/gallery/upload

Normally you deal with routes using their name. This allows you to change pathes without almost no implications to your application.

Where is the module that is mapped to this route? Is this part of this bundle or do I need to write that part myself?

This is completely handled by the bundle. It will create a seperate route for each mapping you define. This route will be linked to a provided controller which handles the upload of your files, so you don't have to take action here. Depending on which frontend you defined in the mapping, another controller will be put behind. Take a look at the RouteLoader and the different Controllers for details.

Do I really need to configure a service -- from what I read, it appears to be optional. Does your bundle handle the upload automatically without the necessity of configuring a service? If so, where are the files stored by default?

No. You don't need to create an service to listen to upload events. The file upload will be handled anyway. Take a look at the configuration reference. You will see, that the key oneup_uploader.mappings.id.storage.frontend has the value ~. This means: take the default value. The default value for this configuration key is null, but is automatically set to web/uploads/{mapping_name}. So if your mapping name is gallery, have a look at the directory web/uploads/gallery to see if files gets uploaded.

Why is the service configuration in XML when the other configs are in YAML?

This is not an easy question to answer. Actually I have no idea. This probably has historical reason. One thing is that I tried to follow the guidelines/best practices used by bigger bundles like FOSUserBundle. So much for the bundle.
You can always choose your prefered way by changing the FileLoader in your bundles Extension file. For example: This UploaderBundle uses an XmlFileLoader here, but you are by no mean bound to that. Just choose your prefered loader in your bundles extension class. A list of loaders can be found in the API documentation.

Hopefully I answered a few of your question. Feel free to ask if something is not clear. I'm happy to help.
Now. You wrote that you have not yet integrated this bundle successfully. Let's try to change that. I'll start from the very beginning, as I've no idea where you got stuck. :)

Howto

First of all, let's install a fresh copy of Symfony2 and integrate the OneupUploaderBundle (implies that you have Composer installed on your system).

⎈ ⇢ php composer.phar create-project symfony/framework-standard-edition uploader-project/ 2.3.1

Now that we have new project folder, follow the installation instructions of the this bundle.
I think step 1 and 2 should not be a problem, so lets hook directly to step 3, the configuration.

You said, you tried to integrate the jQuery File Uploader, so lets create a mapping for it.
Open the file app/config/config.yml and add the following lines to the end of it.

oneup_uploader:
    mappings:
        gallery:
            frontend: blueimp

And of course, don't forget to add the following lines to app/config/routing.yml.

oneup_uploader:
    resource: .
    type: uploader

So much for the configuration. FYI: We will alter the AcmeDemoBundle for the sake of simplicity.

Open the file src/Acme/DemoBundle/Resources/views/Welcome/index.html.twig and delete everything between {% block content %} and {% endblock %}. We don't need this anymore.

Now insert the following:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="https://rawgithub.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#fileupload').fileupload({});
});
</script>

<input id="fileupload" type="file" name="files[]" data-url="{{ oneup_uploader_endpoint('gallery') }}" multiple />

Point your browser to the root directory of this application (app_dev.php). You'll see an input field just like expected and you can now upload some images (for example). The files will be stored in web/uploads/gallery every single one with a unique filename. Note that we used some CDNs to serve the JavaScript files needed for this. It would be better to use Assetic for this, but this would go beyond the scope of this manual.

From here on, I leave you with the Next step section in the documentation. The most interesting parts for you are probably the following.

• Process uploaded files using custom logic
• Return custom data to frontend
• Include your own Namer

If you have any questions left, feel free to ask here. :)

from oneupuploaderbundle.

Thanks for your comments, they have helped me to better understand how everything is supposed to work.

Your explanation of where and how the default upload location is set was the key. If that was in your documentation anywhere, I must have missed it. Once I created the web/uploads/gallery directory, I was able to upload files and see them appear on my server. In your docs, you may want to mention that you need to create this directory and set the proper permissions, etc.

The reason I was stuck was because I could not figure out where the files were supposed to go, so I didn't know where to look for the results. The error messages I saw were too generic to be of any help so I was basically flailing around trying to fix things that were not relevant to the true cause of the problem. As it turned out, my configuration was correct, all that was missing was the directory to receive the uploaded files.

Now I feel like I'm starting to get traction and am making progress again.

I didn't think about potential problems with the CSRF-Token, but that makes sense.

I know from experience how hard it is to write good documentation (sometimes harder than writing the code).

Is your bundle only useful for uploading new files or can it also be used to manage (delete, modify) existing files?

I'm trying to design a page to handle property images for a real estate application. What I ultimately need is to show thumbnails that can be expanded to full images and to give the user the ability to add, delete and modify images, and to modify the order in which the images are displayed (by using drag and drop or up/down buttons).

Can you recommend any other Symfony bundles that can be used with your bundle that might be useful in accomplishing this task?

from oneupuploaderbundle.

Is your bundle only useful for uploading new files or can it also be used to manage (delete, modify) existing files?

This bundle is only for uploading files. The rest (modify/delete) is too tight-coupled with the logic of your implementation and can therefore not be generalized properly.

Can you recommend any other Symfony bundles that can be used with your bundle that might be useful in accomplishing this task?

You can generate and manage thumbnails using LiipImagineBundle.

from oneupuploaderbundle.

I am reading this issue in order to get proper examples. I would like to thank @sheeep for writing such a detailed answer!
Great work! (I don't want to pollute this thread, but just send congrats, feel free to delete the post if required ;))

from oneupuploaderbundle.