I have a MVC 3 application with Razor. The form is data driven and has a series of testboxes and radio buttons and a file upload control. The textboxes and radiobuttons reside in first form and the upload control is in its own form. If the file is uploaded first then everything is fine. But if say the user fills in the form with the textboxes and radio buttons and then browse's to the file to attach and clicks attach (a submit button) within the 2nd form, the whole page is posted back and all the controls loses their values and its not user intutive. As I am trying to do the file upload and uploading the file on the server as a separate task on the form, I am not able to find any examples on the net for such a scenrio. All I find is people doing form elemnets and file uploads in one subit action. My requirement is such that the file upload is kept seperate so that users can attach files and also remove files which are attached, so only when they are happy do they submit the form. Any pointers welcome.
Here's an approach you could try and which seems adapted to your scenario:
Use AJAX (or Flash/Silverlight/HTML5) in order to upload the file to avoid page reloads. There are many plugins and possibilities out there: plupload, uploadify, jquery form, ..., just pick one that suits you.
When the user uploads the file store it on the server on some temporary location and return an unique id so that later you could fetch this file.
On the client use the id to inject it into a hidden field on the first form (the one that contains all the textboxes and radios).
When the user submits the first form the id of uploaded file will be sent to the server and you will be able to fetch the file that was uploaded.
This approach could also allow you to upload multiple files. Just play with jQuery and manipulate the array of hidden fields (add, remove, ...).
Related
We implemented a web service that gets called on save. Can we get Form Builder to send all files uploaded in the form every time the form is saved, instead of just the files that were newly uploaded since the last time the form was saved?
I imagine you're implementing the persistence API. Assuming this is the case, the short answer is no.
But then, why would you want that to happen? If a file has already been saved to your persistence layer, when the data is saved you get the form definition with a "link" to that saved file. If you need to retrieve it, you can do so, but, unless I misunderstand what you're doing, you don't need to get it back from Form Builder.
I have the following requirement:
We have a page that requires a user to enter some data into a form that consists of various input fields and dropdowns.
Special is, imho, that within this form is a part for fileupload. The user shall there be able to upload some (multiple) files. Then when he/she presses submit at the end of the page, the whole input shall be submitted and written to an object. In this object also the path to the uploaded files must be saved.
I want to achieve the file upload with primefaces' (3.4) component.
Now to my challenge:
The fileUpload requires its own h:form with enctype "multipart/form-data". The other data is within a "normal" .
For me this means that I must place the forms after each other within the page. But the fileUpload component shall be displayed in the middle of the other form.
How can I achieve this?
Any ideas?
Best regards,
Florian
Now to my challenge: The fileUpload requires its own h:form with enctype "multipart/form-data". The other data is within a "normal" . For me this means that I must place the forms after each other within the page.
This makes honestly no sense. I'm not sure how you come up to this conclusion. Perhaps you concluded this based on an incorrect observation of a problem. Perhaps you used the wrong bean scope and encountered null values for all so far entered input and previously uploaded files while processing the form submit. You should be using #ViewScoped if you want the very same bean instance to live as long as you're interacting with the same view by several ajax requests.
You can perfectly put "normal" input fields like <h:inputText> in the very same form with multipart/form-data encoding. With this encoding, the HTTP request is just been sent in a bit different format which allows room for binary content. See also params not getting passed to backing bean for h:commandLink under rich:popupPanel and t:dataList for a detailed background explanation.
See also:
How to choose the right bean scope?
Image not getting updated
Multiple Image upload in primefaces
Unrelated to the concrete problem, I'm not sure how to interpret
In this object also the path to the uploaded files must be saved
but I'd like to note that you can absoutely not rely on the full client side file paths being sent to the server. This would only occur when the IE browser is been used due to a security bug in that browser. You should rather be interested in the file contents in flavor of InputStream or byte[]. You should be autogenerating a (temp) file with an unique name yourself, if necessary based on the sole filename (and make sure that a second uploaded file with coincidentally the same filename doesn't override it). See also How to get the file path from HTML input form in Firefox 3
I have rather esoteric usecase for nested forms, multi-file uploads, and progress bars in Rails. I haven't found any online discussions about precisely about this so far. If I have overlooked something, I am sorry. Please correct me.
Here is what I want:
A given form has multiple dynamic fields. One of which is 'attach a file'.
For this 'Attach a file', I would like an interface which is essentially similar to gmail.
That interface enables you to :
click 'attach file'.
select a local file, which starts uploading immediately in the background, giving you a progress bar in the mean time.
this allows you to write your message, or add more files.
You can cancel a live upload and even delete attachments after the fact by un-checking a box.
Here are the models and associations I am working with.
I have a model Recording which has many AudioFiles.
Each AudioFile contains audio data, as well as metadata like size, type, date created etc.
A Recording has several other child collections as well.
Here is how the 'Create Recording' form should behave:
It should enable the user to add multiple number of child fields, including multiple audio files..
So far, I am using the excellent Nested Form (https://github.com/ryanb/nested_form) gem to create the non-AudioFile children of a Recording. IT works brilliantly.
What I want is to be able to have similar nested fields to upload multiple audio files, asynchronously, with progress indicators, and with an ability to cancel or delete uploaded files.
There are many resources which demonstrate how to use uploaders in conjunction with carrierwave to store files with progress information. For instance, https://github.com/yortz/carrierwave_jquery_file_upload, and https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5 .
Essentially, what these examples do is to generate a request from one of these uploaders which is directed to a controller create action for a model which has a carrierwave uploader attached to it. I have got this much to work OK.
What I can't figure out is how to do this in a nested form context. The tricky bits are:
Suppose I write up the AJAX to do a post from a 'Create Recording' form, and have that post create a new AudioFile record. How do I associate that audio file with the as-yet-un-created recording?
If the user aborts the transaction, how will the AudioFile record thus created be cleaned up?
I can think of hacky-ways to do both of the above, but I am wondering if there are more elegant approaches. I am rather new to rails so I am guessing that I am not using it to the fullest.
Thanks,
Apurva
I thought I would contribute back to the community by sharing how I solved this problem.
To summarize, the major problem was to reconcile the behavior of CarrierWave, nested forms, and fine grained control of file uploads.
The crux of the issue was that Nested Forms create the root record and all its associations in a single POST operation to the #create action of the root Controller.
In the example above, the Recording model was the root, while AudioFile, Note, and Categorization were the associations to be created along with a Recording.
So with Nested Forms, I would have to create all these records in a single POST, which would preclude the possibility of canceling uploads in isolation, or uploading in parallel with adding other fields (like Notes).
That would not make for a good user experience. My solution was really simple:
I chose not to use nested forms.
Recording#create would always be called with empty parameters. The Recording attributes would get sensible default values in the create operation.
The user would only see the Recording#edit page.
On the Recording#edit page, I had independent controls for CRUD operations on the associated models which would route to different controllers through AJAX calls. This worked because each associated model had a valid recording_id to use.
The various controllers would return HTML fragments which would be written into the main recording page.
This enabled inline editing of all the fields on the Recording page, even though these fields mapped to different (associated) models. Thus the user would be able to upload multiple files, add notes while they were uploading, play back already uploaded files, and cancel uploads at will.
As a result the whole user experience was a lot smoother. This would never have been achievable with Nested forms by definition.
I have a project where I have several content types (Article, Interview, etc) with nested images. To handle the images, what I did was implement a popup 'image upload' box (using a combination of Paperclip and Uploadify) so the user can upload an image immediately to the article.
The process works like this: the user clicks the 'upload an image' icon, then a box pops up where they can add paperclip file upload fields to upload as many images as they want. Uploadify instantly uploads the photos and assigns them the article ID number they're attached to. Then the photo's HTML gets sent to the WYSIWYG editor. If they want to delete photos as well, they can. If it sounds like WordPress, that's what it's based on.
Anyway, I have this working great. Photos remain associated and attached with their respective articles, as opposed to throwing everything in one huge folder (like many WYSIWYG image uploaders do) where anyone can add/delete anything.
But there is one little flaw to this...as I said, the image is assigned the content's ID number when an upload is performed. Well, you can see how this is an issue when creating a brand new article, as a new article doesn't have an ID number before saving it. So the image upload fails. Thus, this whole process only works on the 'edit/update' action.
In the interim, I told the team to make sure to SAVE the article first, then when they go back to edit it they can then upload their images to the body. But naturally, they forget as it's an easy thing to do, and as this is very user-unfriendly, I gotta solve this.
I see two ways I can go about this.
Assign an ID (hidden field or otherwise) to an article on the 'new' form. This would appease the uploader as it fills the 'nil' value it errors out on, then when the article gets saved the first time, it would assign it that very same number. But I see a potential issue...what if another user creates an article at the same time and the database assigns it an identical ID number?
I noticed that the moment you create a new WordPress document, the new document 'autosaves' immediately as a draft. So my line of thinking is this...when the user goes to create a new document, the 'new' action would actually trigger a 'save' operation, bypass any validation errors (since the fields are blank), then immediately redirect to the 'edit' action. That way, the ID is saved and everything would work as normal, and the entire process may look seamless to the user.
How would you handle this situation? Like I suggested above, or is there an even better way?
I decided to go the second route and perform a save on the new action and bypassing the validations, then redirecting to the edit form, throwing as "autosaved" flash message in for good measure. It works well.
I have an ASP.NET MVC page with multiple file uploads. After a failed post, all the file upload boxes are blanked out. I don't want the user to need to reselect all the uploaded files. Is there a way I can preserve the values in these fields if other fields fail to validate on Post?
I could do the uploads via AJAX, but this would be more complex as I'd need to ensure they were cleaned up if the user decided not to submit the form in the end.
You need to write your upload view so that you can pass default values to the text boxes.
When your user submits the file upload from your upload view, you will have all of the values for the text boxes in your controller method. Then, when your post fails, you can simply pass the values back to your upload view to populate the text boxes, rinse and repeat.
Actually, FireFox does preserve value. But you can't preserve it (set on server) according to http://www.cs.tut.fi/~jkorpela/forms/file.html#value. So I think your best way is AJAX. If you can actually clear the value.
Also, not sure if this will help, but try http://jquery.malsup.com/form/ which does file upload in iframe.
Or let user choose a better browser ;-)