I would like to use the OneUploader bundle in a Symfony2 form that also contains other fields. In other words, the uploaded file is handled as an attachment to the rest of the data in the form. But I can only find instructions on how add the uploader as a separate form with it's own controller to which the files are sent. So how do I handle the use case I just described?
Bundle dev here.
Frontend uploaders like jQuery File Upload or Dropzone always forge a seperate request when uploading a file to the server. This means that the upload process takes place before the form handling in your controller. If you really want to upload file along with the main form request, then you should not use such an uploader. Instead, create an Entity Media (or the like) map it to the base entity with a OneToMany or ManyToMany association and add it to the form with an Entity type.
There are some pretty good answers here on StackOverflow, for example this one.
However, if you choose to not use a frontend uploader all your files will be sent to the server simultaneously. Depending on the file size / server configuration this can result in upload errors. Moreover the upload will not be performed asynchronously anymore, which forces the user to wait for the upload to complete, after he submitted the form.
There is general problem when dealing with asynchronous multiple uploads on creation forms. I tried to answer a similiar question here.
The problem with enabling file uploads on the create mask is that you eventually end up with orphaned files. This is because a user is able to trigger the upload without saving the actual entity.
Your problem seems like a good use case for the Orphanage feature of this bundle. It lets you upload files before an actual entity exists to attach these files to. After the main form has been submitted you can retrieve the files and perform some more logic on top of it.
Note: This is by no means a perfect solution. Take a look at the limitations! Summarized can be said; as this feature is based on the session, a user may end up having uploaded a file twice. Be sure to handle this accordingly.
And then there is the possibility that you just want to add some more data to the file upload request: As this is handled in the frontend uploader, it differs from implementation to implementation. For example the jQuery File Uploader just serializes the whole form and sends along all other values, including hidden fields.
Personal Recommendation: I'd not send the file along with the form submit request. Instead use a frontend uploader and either:
Let users upload files not until the entity exists where it should be attached. This is a quite common strategy and in most cases the desired one. A simple second step when creating an entity should be sufficient.
Take a look at the Orphanage feature if you really want to be able to upload files directly on the creation mask.
Related
Suppose we have the web application which handle create, read, update and delete articles and each article should have gallery of images. I have to make one to one relation between Article and Gallery and one to many relation between Gallery and Media.
HTML5 gives a lot of features like multiupload, so I want to use this excellent http://blueimp.github.io/jQuery-File-Upload/ plugin for that. The problem is how to handle the file upload "in memory" like other form's data?
For example when we show the page for create new article we should be able to fill in article's data fields and select images to upload, next when we click the save button the images should start upload and after that the form should submit. When validation fails the images should be still displayed on the frontend, but on the server-side nothink should be saved.
One of the solutions is create somethink like "create entity session temporary id" before displaying the entire form and that id can be used to create temporary directory for save uploads, so after success saved form these images can be moved to appropriate directory, but how to make the "create entity session temporary id"?
The other solution I think is the "with the edit id" approach, because we can handle the uploads with previously saved gallery id, but sometimes I can't save new blank article with gallery, cause some of the fields should't be empty in db.
For the Rails I saw https://github.com/thoughtbot/paperclip gem which in the Readme says:
Paperclip is intended as an easy file attachment library for Active Record. The intent behind it was to keep setup as easy as possible and to treat files as much like other attributes as possible. This means they aren't saved to their final locations on disk, nor are they deleted if set to nil, until ActiveRecord::Base#save is called.
My question is how it works?
The problem with enabling file uploads on the create mask is that you eventually end up with orphaned files. This is because a user is able to trigger the upload without saving the actual entity. While creating a very own UploadBundle I thought about this problem for a while and came to the conclusion that there is no truly proper solution.
I ended up implementing it like this:
Given the fact that our problem arise from orphaned files, I created an Orphanage which is in charge of managing these files. Uploaded files will first be stored in a separate directory, along with the session_id. This helps distinguishing files across different users. After submitting the form to create the actual entity, you can retrieve the files from the orphanage by using only your session id. If the form was valid you can move the files from the temporary orphanage directory to the final destination of your files.
This method has some pitfalls:
The orphanage directory itself should be cleaned on a regular basis using a cron job or the like.
If a user will upload files and choose not to submit the form, but instead start over with a new form, the newly uploaded files are going to be moved in the same directory. Therefore you will get both the files uploaded the first time and the second time after getting the uploaded files.
This is not the ultimate solution to this problem but more of a workaround. It is in my opinion however cleaner than using temporary entities or session based storage systems.
The mentioned bundle is available on Github and supports both Orphanage and the jQuery File Uploader plugin.
1up-lab/OneupUploaderBundle
I haven't work with the case personaly, but my co-worker had similar conundrum. She used
punkave/symfony2-file-uploader-bundle
It's a bundle that wrapps jQuery File Upload plugin. It is in the early stages and a lot of things are missing, such as event, but we gave it a shot.
That's what we do: in newAction() we create entity, generate unique dir ID, and store the ID in entity (via regular setDirId()). Than we create the form, which contains hidden field dirId.
We are uploading the files to temp dir on server via ajax, not during the submit. Ajax request requires the ID. It stores files in temp_dir/prefix_ID
Than it's quite simple. Form is sent. If form is valid - move files from temp to dest dir. If not - we have the ID, and are able to show the images.
However, we do not save information about individual files in a separate table in the database. Every time we read the contents of the folder that corresponds to our dirId.
I know it's not the solution You are asking for. It's rather a workaround.
Sorry for my English, I had to use Google Translator
I have a form, in this form i have several input upload files.
What I'm trying to do is send the arquives at once to the next page. When its happen it darkens the page and shows a progress bar where it sends all files. Once you do it finishes recording in the database.
The files uploads is multiple instances
Found I multiple file uploads but no causes that I am wanting to do and do not know what I can do to get this result.
I can't use XMLHttpRequest but i can use APC
I do check the size and types of archives (PDF, JPG, ZIP)
I have an image that explains itself, see the link
Picture
Beside the fact that you cant use XMLHttpRequest, any ajax solution can't be used. But in my eyes this works only with ajax.
I recommend you to check out uploadify. There are several events fired on upload start and while uploading the file(s). Just take a look to the documentation! Also you can upload multiple files at once, without having several inputs for file uploading.
You can make on upload start (once, just set a var on upload start of the first file to true or something else, what indicates, that the upload has started) show a overlay-div with HTML-elements that simulate a progressbar. This progressbar can be updated by javascript while uploading. Uploadify should give you all information about the files and amount of bytes.
The upload and database part is handled by a php-file which can be specified by you.
Reference: PHP, Jquery File Upload, Yii, XUpload
Jquery File Upload, retrieving uploaded data and displaying using the UI Template
(similar to the template displayed after uploading, purpose is to generate the already uploaded data using the UI Tempalte)
https://github.com/blueimp/jQuery-File-Upload
"set form data on page load"
I already uploaded files and these files are automatically viewed using js_encode of the file properties and xupload immediately shows them on template. But how will I have the same view/result when I visit again the page next time (assuming files were already uploaded and the upload start has not yet run)?
I tried doing an echo js_encode of the same properties in the controller. Instead, it just printed out the data and was not read by the xupload, unlike what happens right after uploading files.
Am I missing something? I've been reading, but haven't found any answers yet.
I have no easy way in mind to do this, but i think the easiest way to do this, is to inspect the code, and how its build and do the same in your view, using the same classes should trigger the same event binds and the same layout.
I not sure why you want to load the data with js if you already have them in your controller/view in php. dont overdo js, it will only make your users browser slower and the controller is already 'controlling' the data. No i am a Back-end Developer but my Front-end colleagues always tell me : "Avoid DOM manipulation if not needed, it will make client side slower and it might turn out differently in every browser"
I know that its easy to upload single image with symfony and doctrine2.
But i want to have system like Google docs where i can see the progress bar of current image upload using doctrine2.
I know want to use thirdparty plugin.
Because i need to create an entity for everyimage and store it database with some detail. So i can just bulk upload with third party software in directory
is it possible or not
You may try AX Ajax Multi Uploader
Here is their homepage http://www.albanx.com/ (not relevant though)
You can use javascript to upload the file at client side .
Refer http://fineuploader.com/demos.html.
you can browse your files and trigger upload automatically or if you want to process the data at client side (say for a preview) you can process and trigger the upload manually as well.
you can also refer http://www.queness.com/post/11434/7-javascript-ajax-file-upload-plugins
and choose the lib which fits your requirement.
I can upload files from a form using post, but I am trying to find out how to add extra fields to the form i.e File Description, Type and etc.
Also can I upload more than one file at once, I know it says you can't using post in the documentation but are there any work arounds?
Thanks in Advance
In regards to uploading multiple files, are you uploading directly to S3 using POST, or posting to s3 using CURL or a similar lib from your own server?
Why are you adding these extra inputs? If posting directly to S3, you cannot post any inputs that aren't specified as required or optional in the S3 documentation. Any form elements that don't start with "x-ignore-" and aren't required/optional for S3 post upload WILL cause an error to be returned from S3, without uploading your file. If you have elements in the form that can cause this error and they are important to leave in the form before it is submitted (being used as input for an ajax call, etc), then simply append the name of these form elements with "x-ignore-" or delete them from the form.
You have control over a few things, such as the name the file is served with and type by usign the Content-Type and Content-Disposition elements. Take a look at this:
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=1434
You can append your additional information to the "return url" you send alongside your request to Amazon.
Be aware that doing this may expose sensitive information about your app logic to the user in the form of an URL. One thing you can do to avoid/hide this is to capture all GET variables on return, save them, and redirect user to a summary page.
This won't block smarter users form learning your GET variables, but will hide them from 99% of the public.