How do I use paramaters with Valums Uploader and Codeigniter?
With Valums the parameters are set like so:
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/server-side.upload',
// additional data to send, name-value pairs
params: {
param1: 'value1',
param2: 'value2'
}
});
or using
uploader.setParams({
anotherParam: 'value'
});
if you want it to be aware of the state of your app/
subD="/Pic"
function selectGaleryName()
{
subD=subD+"/3"
alert(subD) // /Pic/3
}
var uploader = new qq.FileUploader({
element: document.getElementById('UploadFile'),
action: 'http://localhost/Farainform/manager/upload.php'
// additional data to send, name-value pairs
onComplete: function(id, fileName, responseJSON){
selectGaleryName();
uploader.setParams({
subDirectory : subD
});
},
});
if you want to set an id and a description for an image you can set these in javascript and then send these. So something like (im using jQuery here):
var description = $('#input_description').val(); //This can be an input
var id = $('#input_description').att('id');
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/server-side.upload',
// additional data to send, name-value pairs
params: {
description: description,
id: id
}
});
Note I havent tested this code and its for demonstration purposes.
$_GET was always destroyed in the 1.7.3 branch but upgrade to the new CodeIgniter Reactor 2.0 and you'll find that GET strings work out of the box.
When upgraded, use this syntax:
$this->input->get('value1');
I don't know why it is not documented on Valums page, but apparently parameters should be sent not like this
params: {
param1: 'value1',
param2: 'value2'}
But like this
data: {param1: 'value1',
param2: 'value2'}
On server side you could get them with $_REQUEST['param1'];
You have to use PHP's input stream in order to obtain the data.
$fp = fopen('php://input', 'r');
Then read the data as you normally would with a regular file using fread(). Refer to valum's server side code located in server/php.php within the download.
Two related issues that I ran into that might help someone out:
1) var uploader causes issues - try using something like ajaxuploader instead
2) the documented setParams is incorrect for the latest release - it should be setData
The end result should be something like this:
var ajaxuploader = new AjaxUpload(button, {
action: 'your-server-script.php',
name: 'myfile',
onSubmit : function(file, ext){
ajaxuploader.setData({
somevar : 'somevalue',
anothervar : 'anothervalue'
});
)};
Related
Need a little help on pass the upload file size variable to the endpoint (the php controller). I tried multiple ways, but seems the method is not working.
First of all, I am not be able to get upload file 'id' which is necessary for getSize function.
Secondly, system through errors when I put getSize function in the parames: object.
part of my code below:
var loader=$('#fine-uploader-s3').fineUploaderS3({
... ...
//deleted not relevant code above
uploadSuccess: {
endpoint: "/s3/uploadSuccessful",
customHeaders:
{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
params: {
user_id:'{{Auth::user()->id}}', // there are params I want to
lot_id: '{{$lot->id}}', //pass to the controller
//no issue. the php controller
//got them. this code is part of
.. ... //Laravel blade.
size: function (){
return this.uploaderMethods.getSize('0');
//hard code file id 0 for test. not working.
Or I have tried: size: function (){
return this.getSize('0');
Or size: $('#fine-uploader-s3').fineUploaderS3('getSize', '0'),
None of them works. Thanks for any help here.
Found an answer in the docs using setUploadSuccessParams. Add a callback block such as below:
callbacks: {
onSubmit: function (id, fileName) {
var size = this.getSize(id);
var newParams = {"size": size};
loader.setUploadSuccessParams(newParams, id)
}
},
I have the following code base to share with you guys to list the pages that fetch using the query builder via AJAX call. We have to pass the URL and the parameters to fetch the child pages from the URL that we provide.
I have put some console.log to track the values of each states.
replace the with your project.
<featurearticles
jcr:primaryType="cq:Widget"
fieldLabel="Article Pages"
itemId="selectauthorId"
name="./authorselect"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection"/>
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(box,value) {
CQ.Ext.Ajax.request({
url: '/bin/querybuilder.json',
success: function(response, opts) {
console.log('Response from the ajax');
var resTexts = $.parseJSON(response.responseText);
var selectopts = [];
console.log(resTexts);
$.each(resTexts.hits, function(key, page) {
console.log(page);
selectopts.push({value: page['path'], text:page['name']});
});
console.log(selectopts);
box.setOptions(selectopts);
},
params: {
'type' :'cq:Page',
'group.1_path' : '/content/<PROJECT_NAME>/Feature_Articles'
}
});
}"
selectionchanged="function(box,value) {
var panel = this.findParentByType('panel');
var articleTitle = panel.getComponent('articleTitleId');
CQ.Ext.Ajax.request({
url: value + '/_jcr_content/par/featurearticleintro.json',
success: function(response, opts) {
console.log('success now');
var resTexts = $.parseJSON(response.responseText);
console.log(resTexts);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}"/>
</featurearticles>
If you have any better idea than this, I would like to know about that.
Cheers,
Another alternative is to use the "options" attribute of the selection xtype to fetch the dropdown list options from an AJAX call via a servlet or sling selector. The widgets api (http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html - search for "selection") says this for the options attribute:
If options is a string it is assumed to be an URL pointing to a JSON
resource that returns the options (same structure as above applies).
This should be either an absolute URL or it can use the path of the
content resource being edited using a placeholder
(Selection.PATH_PLACEHOLDER = "$PATH"), for example:
$PATH.options.json.
So it may be a cleaner approach to build a servlet that will respond with JSON to an AJAX request, then put this servlet as the "options" attribute. For example, the attribute might be something like options="/libs/myServlet" or something like options="$PATH.options.json". That may make the dialog cleaner (no listener required), and it uses built-in CQ capability to fetch options via AJAX.
We can use the dynamic dropdown as below:
<item
jcr:primaryType="cq:Widget"
fieldLabel="Item"
name="./item"
optionsRoot="root"
options="/bin/service/item.json"
type="select"
xtype="selection"/>
options: the url will return the json format for the selection xtype
optionsRoot: the name of the root item of the json
optionsTextField: the name of text field (default value: "text")
optionsValueField: the name of the value field (default value: "value")
Example of json: {"root":[{"text":"Item 1", "value":"Value 1"},{"text":"Item 2", "value":"Value 2"},{"text":"Item 3", "value":"Value 3"}]}
Selection xtype
Say I want to upload several files at once, which is something I can do when setting the multiple option to true:
var myUploader = new qq.FineUploader({
element: $('#test')[0],
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false,
});
Now, let's say I have a button that will allow me to select the files I want to upload. If I click said button and select, say, test.txt file, test.txt will be added to the list of files that will be uploaded. So far so good. Now, my problem is that, if I click the button again, and select test.txt file again, it will be added to the list even though it's already in the list.
Is there any way to prevent FineUploader from letting me do this?
Thanks in advance
I'd be careful declaring a file a duplicate simply based on the name. You should also take size into account, at least. Although, this is not possible in IE9 and older since we can't determine file size client-side in those browsers. Just for the purposes of simplicity, let's use the file name exclusively...
One way is to maintain an array of file names submitted to the uploader. You can add to this list in your an onSubmitted handler. The, you can contribute an onValidate handler that will reject the file if it already exists in the array. Your code would look something like this:
var filenames = [];
var myUploader = new qq.FineUploader({
element: $('#test')[0],
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false,
callbacks: {
onSubmitted: function(id, name) {
filenames.push(name);
},
onValidate: function(fileData) {
return qq.indexOf(filenames, fileData.name) < 0;
}
}
});
Also, just for kicks, why not just use Fine Uploader's jQuery plug-in, since you seems to already be using jQuery in your project? The above example is rewritten using the jQuery plug-in below:
var filenames = [];
$('#test').fineUploader({
multiple: true,
request: { endpoint: 'path/to/master/server/php/' },
autoUpload: false
})
.on("submitted", function(event, id, name) {
filenames.push(name);
})
.on("validate", function(event, fileData) {
return $.inArray(fileData.name, filenames) < 0;
});
I have a store being used by several charts. I get my data remotely with an ajax call. In the php script that I link it too, I'm just going to change the parameters of my query to adjust for the different charts.
Here's my idea: I pass the title of the chart's panel as a parameter to my php script. That'll tell me which chart it is.
How do I access the title of whatever chart the store is being used by?
var my_store = Ext.create('Ext.data.JsonStore', {
fields: ['project', 'accepted', 'rejected', 'deleted', 'undefined'],
proxy: {
type: 'ajax',
url: 'generate_proj.php',
extraParams: {foo: **chart.id**},
reader: {
type: 'json'
}
},
autoLoad: true,
listeners: {
beforeload: function(store,operation) {
//operation.params.foo = this.idname;
},
load: function(obj,records) {
var text = Ext.decode(obj.responseText);
Ext.each(records,function(rec) {
});
}
}
});
Here's what I've done so far. Getting the name of a single chart/panel is no problem. I want the store to be able to dynamically read the name of what's using it. How?
Somewhere, you have some code that switches between the various charts. During that code, you could do something like
activeChart.getChartStore().proxy.extraParams.foo = activeChart.getId();
where activeChart is whatever reference you have to the chart you are about to show. Then when you load the store, it'll send the correct parameter.
i just came across this ajax upload plugin and i wish to use it inside a form as shown in the demo page example 3. For some reason i am not able to make it work. I am not sure what parameters come into the function. For example here is my sample code.
$(document).ready(function(){
var upload = new AjaxUpload('property_i',
{
action: 'submitproperty.php',
autoSubmit: false,
onSubmit : function(file , extension){
return false;
}
});
var upload_data = upload.setData({
'propertytype':'propertytype'
});
});
Now the ID used in the AjaxUpload function should be ID of the or of the Entire form. Also how do i use setData method. Any suggestions or links will be very helpful. Thanks
I got it to work with the following code:
new AjaxUpload('#uploader_button', {
action: 'filename.ashx',
autoSubmit: true,
onSubmit: function(file, ext) {
// --- stuff here
// --- add postdata parameters
this.setData({ id: 1, title: docTitle.val() });
},
onComplete: function(file, response) {
// --- stuff here too
}
});
it doesn't utilize the var but instead adds the custom data params in the onSubmit block. The only other difference is that I haven't wrapped the parameter key in quotes as it seems to serialize correctly. And I'm not using autoSubmit: false , but instead it's true...
The only way I could get this to work with autoSubmit: false is to add this outside any function:
var uploader;
var uploadFile;
then in the AjaxUpload(...
onChange: function(file, response){
uploader = this;
uploadFile = file;
},
then in the function to do the upload:
uploader.setData({session: session});
uploader.submit();
Hope this helps
I'm using uploadify and very useful.
http://www.uploadify.com/