I want to restrict end user to upload multiple images using drag and drop feature, should not be greater than 1000 pixels wide. I have read http://docs.fineuploader.com/branch/master/features/validation.html
it's discuss fineuploader provide built-in validators for image dimensions.I have used image.maxWidth attribute but it's not work.
validation: {
allowedExtensions: ['jpeg','jpg','png', 'gif'],
maxWidth:1000,
},
Please suggest what i am doing wrong?
Thanks
I am doing wrong,the correct way is :
validation: {
allowedExtensions: ['jpeg','jpg','png', 'gif'],
image:{maxWidth:1000},
},
You can find more validation attribute details here :
http://docs.fineuploader.com/branch/hotfix_4.1.1/features/validation.html
Related
Is there any way to impose a maxLength text allowed in an ag-grid cell, similar to the one on a normal input element?
<input maxlength="220"/>
No relative documentation was found. Also, no particular situations & more details are needed, in my opinion. Thank you!
agGrid's documentation really isn't clear on this, but it is possible.
agGrid MaxLength
In your column definitions, just add something like this:
this.columnDefs = [
{
field: 'Surname',
minWidth: 100,
editable: true,
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: { maxLength: 200 }
}
Yes, you can control the full flow of input data, but you have to create your own cellEditor for that.
So - it shouldn't be hard to make a simple input validation.
and to achieve your requirements you have to take care of one function within the component:
// Gets called once when editing is finished (eg if enter is pressed).
// If you return true, then the result of the edit will be ignored.
isCancelAfterEnd?(): boolean;
isCancelAfterEnd() {
return !this.isValid(this.eInput.value);
}
isValid(value) {
return value.length <= this.maxLength;
}
Demo
I am aware of this question-Fineuploader - add jqCrop.
However my challenge is that i do not want to use a generic file input that add jCrop as a listener.I am a newbie with FineUploader.Can some expert confirm if this is the most appropriate steps to follow.
form: {
element:document.getElementById('fileinput_inline')
}
$('#image_input img').Jcrop({
bgColor: 'black',
bgOpacity: .6,
setSelect: [0, 0, 100, 100],
aspectRatio: 1,
onSelect: imgSelect,
onChange: imgSelect
});
Use FineUploader Core form.element option to bind my file input to FineUpload
Use FineUploader validation options to validate size,filetype, etc
At the onSubmitted event ,retrieve the file id and use the drawThumbnail method to insert a preview in an image html element (<img id='image_input'/>)
Introduce jCrop.
Submit the cropped Blob to Fine Uploade
uploader.addBlobs({blob: croppedImageAsBlob, name: "my cropped image.png"});
Fire the upload to server
Your outlined steps look to be appropriate, but the selector tied to jcrop looks incorrect.
For this element: <img id='image_input'/>, your selector string should be '#image_input'.
i want to save the width of coumns of jqgrid, when user re-size the column the width should be saved, so next time when user open the page the width should be the same user did. is it possible?
js code
{ name: 'FirstName', index: 'FirstName', width:100, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
i have tried shrinkToFit:false, autowidth:false
any idea, any suggestion will be appreciated...i will mark it as answer if it works for me
thank. if you need any extra information about the code i am here to explain..just comment ;)
jqGrid don't provide any API to change the column width after the grid been created, but I created the plugin which do this. You can download jQuery.jqGrid.setColWidth.js from here, included it after jqGrid JavaScript files and then you can just use new setColWidth method in the form
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth);
The method setColWidth will adjust the total grid width after changing the width of the column. If you don't need it you ca add false as an additional last parameter of setColWidth:
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth, false);
Additional details about the method you will find in the answer and in this one.
Probably you can write your code so that the width of columns will be set before the grid will be created. In the case you will don't nee the method setColWidth. For example you can try the demo from the answer (see the previous answer too). If you changes the width of some column and then reload the full page you will see that the grid will be created using the widths of column which the used made at the last time. Is it not close to your requirements?
I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.
Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.
My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.
Is there some officially supported API to do what I want?
I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help:
http://hardtouse.com/blog/?p=24
The idea is to use renderer combined with A LOT OF css magic:
columns : [{
xtype : 'treecolumn',
dataIndex : 'name',
renderer : function(value, record){
return Ext.String.format('<div class="tree-font">{0}</div>', value);
}]
Thanks for your answer above. Here is another example showing a few more options for formatting:
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
// see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
var tooltipString = "Hello";
metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
}
}]
You might also want to add
hideHeaders : true,
to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.
Murray