Blueimp jQuery File Upload with Additional title field editing - javascript

Using http://blueimp.github.io/jQuery-File-Upload/ I am trying to add a title field to go with uploaded image. Once uploaded I want to be able to edit the title field for each image. I am associating each image with an entity in the database successfully but I can't find a way to add and edit an additional title field.

You can add any data to send with the formData option. Let's see the documentation.
You also can add data to the data object, it's the same object you'll get with the response:
.on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
file.myTitle = 'anyThing';
});
});
With both solution you can add your title and an extra parameter to inform your DB if it's an edit or an insert.

Related

save filters, no data WebDataRocks

I have a table that receives a .JSON.
I have created some filters and I would like to save them but without saving the information that I received at that time with the filter.
I already tried:
pivot.getData({},
function(data) {
console.log(data);
},
function(data) {
console.log(data);
}
);
Too
var report = pivot.getReport();
console.log(report);
by last
pivot.save({filename:'reporte.json',embedData : false });
Thanks for your help
There are several ways to achieve what you need:
You can still use:
var report = pivot.getReport();
the data information is stored in report["dataSource"]. In such a
case, you can easily remove the unnecessary object the following
way:
delete report["dataSource"];
After that, the JSON config is saved as a file to the disk using
the following approach:
JavaScript: Create and save file.
The disadvantage of such a solution is that you cannot use the saved
JSON config to restore the view since it lacks the data part. You will need to add the "dataSource" part when you decide to restore
the view. Therefore, the solution that described below looks better
for me.
You can create a web service that returns the data file or simply put the JSON data file to the server. In such a case,
WebDataRocks will load the data for you. Then, when you decide to
save the config, only the link to the data will be saved to config.
Here is the reference to docs:
https://www.webdatarocks.com/doc/data-source-object/. The
"filename" property represents the link which leads to your data
file.
In such a case you don't need any additional customization for the
"Save" functionality. You can use a default one. Then it is easy to restore the view using the saved config.

Not getting file data in Extjs Ajax request

I have a form on form-window, and inside form window I have a form with many fields and one upload button. When try to submit form using Ajax.request I have got textfield value but can not get file data. Except filename.
var fd = Ext.getCmp('users-form').form;
var fileInput = document.getElementById('company_logo');
console.log(fd.getEl().dom.files);
params = {
name : fd.findField('name').getValue(),
login : fd.findField('login').getValue(),
email : fd.findField('email').getValue(),
password : fd.findField('password').getValue(),
password_repeat : fd.findField('password_repeat').getValue(),
id : fd.findField('id').getValue()
company_logo : fd.findField('logo').getValue()
}
console.log(params);
Ext.Ajax.request({
url: Scada.reqUrl('users', 'save'),
method: 'post',
params: {
data: Ext.encode(params)
},
success: function() {
console.log('in success');
},
failure: function() {
console.log('in failure');
}
});
Here logo is input type file. I want to send logo data with ajax request. Please help me to figure out the problem. Thanks
Not sure why you started a new question instead of editing Encode form data while fileupload true in Extjs Form Submit as this seems to be the same problem.
Assuming logo is your file upload field you are trying to get the file data using getValue does not actually return the file content (if you use modern there is a getFiles method which returns the selected file objects).
General problems with your approach:
As I stated in my original answer it is not a good idea to send files in a standard ajax request. In your case those problems are:
If you expect getValue to return file contents, you are potentially encoding binary data into a JSON string. This will maybe work but create a large overhead and as the only available JSON datatype that could handle this content is string your parser would have to guess that property company_logo contains binary data and needs to be somehow converted into some sort of file reference.
You are sending files without metadata, so when just adding the raw content into your JSON string you would not be able to detect the expected file type without testing the file in multiple ways
As far as I know you would not be able to access the file content in classic toolkit at all
Submitting the data as a form: In your original question you explained that you submit the form instead of doing Ajax requests which is generally the preferred way.
When you submit a form that contains a file upload field the form will automatically be submitted as multipart/form-data the raw files are added to the request body with it's original content while preserving metadata collected by the browser.
If you look at https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-request you would have to set isUpload to true and use the form proeprty instead of params, passing a reference to the parent form.

Save data into sql server using custom method in lightswitch html client

How to save data on button click(not by using save icon given by popup screen). I tried to use custom method like below. but data is not saving in sql database.
myapp.AddEditApplicantDeclaration.SubmitMethod_execute = funcation(scree)
{
msls.application.commitChanges().then(null, function fail(e) {
alert(e.message);
msls.application.cancelChanges();
throw e;
});
};
I created a button and write the _execute method. but its not saving into data base. Am i missing something here.
Its a simple table and trying to update isSummitted column into "Applicant" table.
I save the data by simply using myapp.commitChanges(); ... this can be included within validation under the _execute of a button as you have above

Get dynamic value to plugin options after the dom load. (Fineuploader plugin)

I am hoping for your help on this one.
I am using Fineuploader and I need to get and send input field value (that will be file group title).
For that I am using path to server side script (I didn't code it thats why I have to do it on my side, somehow):
endpoint: '/Services/hndFileUploader.ashx?case=deals&dealfiletitle=' + $("input").val()
Problem is that DOM with Fineuploader is already loaded and value of input is of course empty.
How can I get dynamic value to send with that query?
Thank you.
You do this using the setParams option for fineuploader. Docs are here, but basically it could be something like:
$('#fineUploaderElementId').fineUploader({
request: {
endpoint: '/Services/hndFileUploader.ashx'
}
}).on('submit', function(event, id, filename) {
$(this).fineUploader('setParams', {'case': 'deals', 'dealfiletitle': $(input).val(); });
});

No-Flash multiple images uploader script with options for every upload

I need a no-flash images uploader script that supports:
Multiple Uploads
Drag & Drop
Progress bar for every upload
Small preview for every upload
Resumable downloads
Selectable preferences for every upload
So something like this script: jQuery-File-Upload
A screenshot:
But I need to add some options for every upload, for example: "Title" and "Category", than I need to run a function for every upload that takes the submitted datas e puts them into my database, is there any way I can do it?
If you use the templates that come with jQuery-File-Upload, you can add in your own fields that appear when each item is added to the queue. The plugin will need to know about these fields, so you can use the callback to add more data:
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
// get content from the new input fields
var inputs = data.context.find('select'); // or whatever inputs you added
// assign values to data.formData
// you can simply $.extend() the new inputs with $(this), and $.serializeArray() both
data.formData = $.extend(inputs.serializeArray(), $(this).serializeArray());
});
See this for more information.

Categories