I have an uploader that has two modes where it uploads different file types. Which one is active depends on what the user is doing. I am using FineUploaderBasic.
Right now to dynamically modify the allowedExtensions I do something like this:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
uploader._options.validation.allowedExtensions = ['swf'];
else // Static image
uploader._options.validation.allowedExtensions = ['jpeg', 'jpg', 'gif', 'png'];
uploader.reset(); // Resets with the new extensions
And to modify the acceptFiles:
if(type==<?=Campaign_Placement::AD_TYPE_USER_FLASH?>) // SWF
$('input[name="userfile"]').attr("accept", "application/x-shockwave-flash");
else // Static image
$('input[name="userfile"]').attr("accept", "image/jpeg, image/jpg, image/gif, image/png");
Both are ugly ways to do this, would appreciate a simple way to do both of these through the API, or some other elegant solution. Thanks!
You have 3 other options to solve this problem:
Don't set the allowedExtensions validation value at all. Then contribute a validate event handler that returns false if the user has submitted an invalid file, based on the value of the select you have provided.
Simply construct or re-construct the uploader instance whenever the user changes their selection.
Consider using the relatively new extraButtons feature, where you can connect additional upload buttons to a single Fine Uploader with varying validation options. For example, you can contribute some default allowed extensions (tied to the default upload button), and then provide an extraButtons button with alternate allowedExtensions. Simply display the appropriate button via JavaScript when the user changes their selection.
Related
I have a legacy app that has five separate file uploads for a single DB record. Beside each file upload there is a field to enter a caption for the uploaded file.
I am considering replacing the whole lot with a fineUploader gallery and allow up to ten files to be uploaded.
However, it was useful on the old system to have a caption with each image for the ALT tag of the image when it comes to web display.
I could address this with multiple single file uploads using fineuploader and a caption field for each but I want to get away from having so many on the page.
I see there is an option to change the file name during upload so that might be an option but that could lead to very long/messy file names and may cause issues with accents and other characters.
Can anyone suggest a good approach?
I would suggest considering you use the built-in edit filename feature, as this seems most appropriate to me and will certainly be the simplest approach.
Another approach involves the following:
Add a file input field to your Fine Uploader template. This will hold the user-entered caption value. You will likely need some CSS as well to make this look appropriate for your project.
Initialize Fine Uploader with the autoUpload option set to false. This will allow your users to enter in captions and then upload the files by clicking a button (to be added later).
Register an onUpload callback handler. Here, you will read the value of the associated file's caption stored in the text input and tie it to the file with the setParams API method.
The file list portion of your template may look something like this:
<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
<li>
...
<input class="caption">
</li>
</ul>
And your Fine Uploader code will contain this logic (important but unrelated options such as request.endpoint and element left out to maintain focus on your question):
var uploader = new qq.FineUploader({
autoUpload: false,
callbacks: {
onUpload: function(id) {
var fileContainer = this.getItemByFileId(id)
var captionInput = fileContainer.querySelector('.caption')
var captionText = captionInput.value
this.setParams({caption: captionText}, id)
}
}
})
Your server will receive a "caption" parameter with the associated value as part of each file's upload request.
I've been trying to implement what's been asked in this Stack Overflow question, here:
Calculation for status in Archer GRC based on date
Trying to create a status field based on a number of Value Lists that
users select from, but a request has been made that we check a date
field for a value to ensure an estimated date has been set so that the
calculation can determine if the status of the record is "In
Progress", "Late" or "Not Started".
...and now, I have a requirement for an actual popup warning message of some sort to prompt the user to make sure the date field is not blank.
How would I add this functionality?
In order to deliver the functionality you are looking for you have to use a "Custom Object". It is an object you put on the layout of the application in Archer that contains JavaScript code. This code will be executed as soon as the form of the application is loaded. There is a special type of the field "Custom Object" available in the Layout editor for each application in the Application Builder in Archer.
Note - I don't recommend to use custom objects in general and neither RSA Support. Every time you modify the layout in the given application, you have retest and sometimes correct IDs for your custom object. You can write an ID independent custom object and use field names, but in this case custom object will have more code. I prefer to make custom objects as short as possible.
Your custom object should do the following:
Override the behavior of the "Save" and "Apply" button in the top tool bar available for every application form in Archer.
Once "Save" and "Apply" buttons are "overwritten", every time they are clicked on your function will be called. So you need to create a click handler function.
Your click handler function will check values user is required to populate and will either return warning, or will call the original handler for "Save/Apply" buttons.
This is a code template you can start with:
<script type="text/javascript">
// ids are used to locate buttons
var buttons_ids = [
"master_btnSave", // "Save" button ID
"master_btnApply" // "Apply" button ID
];
// parameters are used in the "onclick" default handlers to call original handlers
var buttons_parameters = [
"master$btnSave", // "Save" parameter
"master$btnApply" // "Apply" parameter
];
document.getElementById(buttons_ids[0]).onclick = function(){ Validator_of_required_fields(buttons_parameters[0])};
document.getElementById(buttons_ids[1]).onclick = function(){ Validator_of_required_fields(buttons_parameters[1])};
// end of the script body
//==== Validator function attached to Save and Apply buttons
function Validator_of_required_fields(parameter){
// ids of the input fields to validate
var inputs_to_validate_ip_address = [ "master_DefaultContent_rts_XXX_YYY_t" ];
// jQuery selector is used here. Archer v5.x has jQuery library loaded by default
// you will need to modify this selector
var field_value = $('#'+inputs_to_validate_ip_address[0]+':first').val();
if(field_value.length = 0) {
// Here you are calling Archer Warning function
var msg = "[Text to display to user]";
var title = 'Required Field';
WarningAlert(msg,title);
return false;
};
// default onclick processor
ShowAnimationAndPostback(parameter);
return false;
};
Some comments on this code:
You will need to modify the validation function to work with values stored in the fields you need.
I used a rather 'unusual' way to override the behavior of the "Save" and "Apply" buttons using the following code:
document.getElementById(buttons_ids[0]).onclick = function(){ bla, bla, bla }There are simpler way to do the same, but this way custom object works fine in IE8-11, FF, Chrome and Opera. Let me know if you find a simpler way to override buttons that is browser agnostic.
Function WarningAlert(msg,title); is a build-in Archer warning message function. It worked fine in Archer v5.4. You might need to use simple JavaScript Alert function if WarningAlert doesn't work in your version of Archer.
Note that behavior of the "Save" and "Apply" buttons might be overwritten back to default in case if user opens up any pop-up dialog windows to populate a value list or cross-reference field. If that is the case, you will have to wrap the code provided into another function and attach it to the OnLoadWindow event (or similar).
I try to avoid using any JavaScript libraries in my custom objects. This way it is simpler to support them and you have less dependencies. I used jQuery in the provided example only because Archer already uses this library once the page is loaded.
Flak, make sure to test your custom object very well and good luck!
According to this article
http://www-10.lotus.com/ldd/ddwiki.nsf/revisions/6A9EDD911827AA13852574EA00388F8F?OpenDocument
simple validation should work for File Upload controls. I am trying to use it in a extLib Form table.
I would like to verify that the user have selected a file, but have not been able to get this to work on serverside validation. Have also tried to use a custom validator, but still with no luck. Other required fields are marked fine, but not the upload control.
Do anyone know how validate that the user have actually selected a file?
The validation works for client side validation only. There are some workarounds:
The easiest way to validate if a file was attached is to add a validation field to your form and set the property computeWithForm="onsave" of your datasource. As soon as you want to save the document a validation error is thrown and the saving is interrupted. The validation field is a simple editable field with a validation formula like this:
#If(#Attachments = 0;#Failure("No File attached!");#Success)
Check your datasource in the querySave event:
if( document1.getAttachmentList("Body").isEmpty() ){
var msg = new javax.faces.application.FacesMessage("No File added!");
facesContext.addMessage( "No File!", msg );
return false;
}
These two workarounds are only working if the document is newly created. As soon a file is attached, these two options are not working anymore.
If you want to check already existing documents, you can use this XSnippet here:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=replace-attachment-when-uploading-a-new-attachment
You then have to modify the XSnippet to fit your requirements and add a message (as shown in the second example).
Hope this helps
Sven
I'm aware that this has been asked and answered several months ago, but I was looking for an answer to the same problem today when I found this.
Although Sven's answers didn't help directly, option #2 gave the final hint to my solution. Maybe it can be of use for others, too:
First of all, my page uses a standard button (not a button of type "Submit" as I need to set some hidden fields along with the editable ones). So, before the final saving is done I added this script to my button code:
var numAtts = myDocDatasource.getAttachmentList("Body").size();
if(numAtts == 0){
var msg = new javax.faces.application.FacesMessage("You need to attach a file");
facesContext.addMessage("File validation error", msg);
return false;
}
//do some more stuff
...
myDocDatasource.save();
I had to realize that the content of the fileUpload control doesn't really matter when it comes to validation as at that stage of the process an uploaded file already is part of the datasource.
The "timing" of this validation step is a bit surprising, though: at least in my situation, validation of other fields is done before the file upload is validated:
in an errorMessages control first only the standard validation errors are listed. Only after all the other fields have been validated successfully my fileUpload validator is displaying its error.
I need to upload the photo of a user with his details from asp.net mvc3 razor view. The image selected by the user has to be shown as thumbnail before submitting the form.
The model of the view contains a byte array property called Photo. On page load i am converting this byte array to base 64 string and showing it in . this is working properly .
Now i need to show the thumbnail of the image selected by the user. And when he clicks on submit button i need to bind the selected image to the model property Photo.
After googling , i came to know that showing thumbnail is not possible until I upload that image. I tried Uploadify but its UI behavior is not what i am expecting. I also tried the article http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx, but it is also not suitable in our scenario.
can anyone help me by sharing their experience achieving this scenario.
Thanks in advance.
You could achieve this using HTML5 File API. Take a look at the following article and more specifically the Showing thumbnails of user-selected images section which illustrates an example of how you could achieve that without uploading the image to the server.
And if you want to support legacy browsers that do not yet support the HTML5 File API you could use the jQuery.form plugin which allows you to easily send the contents of a given form to the server using AJAX and it also supports file uploads. So basically you could subscribe to the .change() event of the file input or the .click() event of some see thumbnail ... button and then submit the form to a controller action using AJAX:
$('#myform').ajaxSubmit({
url: '#Url.Action("thumbnail")',
success: function(result) {
// the result variable will contain the result of
// the execution of the Thumbnail action.
// could be a BASE64 encoded representation of
// the thumbnail you generated on the server and then
// simply set it to the src property of your preview `<img>`
// element using the Data Uri scheme
}
});
I have a website with several views, and most of them have a jqGrid on them.
I'd like to set some base options on all my jqgrids. For example, I'd like the view option to always be set to true, and the search option to always be set to false.
Additionally, there are several that I'd like to have the same button labels.
Is there any way to do this with a jqGrid?
Look at the answer which shows how to set default settings jQuery.jgrid.nav. In your case it would be
jQuery.extend(jQuery.jgrid.nav,
{search:false,view:true, viewtext:"View label", viewtitle:"View tooltip"}
);
Other default settings you can change in the same way using jQuery.jgrid.del, jQuery.jgrid.view and of course jQuery.jgrid.defaults.
You don't need to place the code inside of jQuery(document).ready(function() {/**/});. It is enough just ecxecute the code like jQuery.extend(jQuery.jgrid.nav, {search:false,view:true}); inside a JavaScript file loaded after the jquery.jqGrid.min.js.
You could add an additional script tag to your HTML that references a JS file with some base configuration stuff for the grid in a $().ready(function() {}); block.
You could also create a base configuration function or variable that you store in that external JS, and reference that configuration on each view page.
I would prefer to write the base function, and not the ready event handler as the ready handler will NOT run at a predictable time. You won't know if it properly ran before your jqGrid configure function ran.