Suggestions for Editor field: File

aveak

So, I'd like to design an editor interface that asks for typical demographics for a user, and also asks them to upload a profile image.

To do this, I'd need to represent the traditional input type="file" field. Editor doesn't appear to be set up for this at the moment.

Until a newer version provides this, where would I look to extend the plugin to support a field of my own design?

allan

Hi aveak,

Extra field types can be added through field type plug-ins: http://editor.datatables.net/tutorials/field_types .

This is certainly something that I would like to see added to Editor in future versions (unfortunately it is probably too late for v1.2, which I don't want to hold up much before its release, but it is something that I will look at for 1.3).

The issue with files is that there isn't a good, native, way of working with them via Ajax, calling instead for a bit of Javascript, typically with an iframe or Flash - for example: http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ . This is probably what would be needed with Editor.

Regards,
Allan

aveak

Oddly enough, that phpletter addon is exactly the code I'm trying to implement. I'm having some issues with short-circuiting the database submission, as I'd like the file to go to he filesystem, and the URL for the file to go into the database. But, I'm getting there slowly.

allan

Yup - it is rarely a trivial exercise getting Ajax file uploads to work... I'd be interested to know how you get on with phpletter - it might be that that one is suitable for direct integration with Editor core.

Regards,
Allan

aveak

Ok, hitting some snags I can't seem to overcome.

I'm using phppletter's $.ajaxFileUpload, and I've gotten it to upload the file appropriately. I'm currently running this code in the onPreSubmit event, in hopes of getting the file uploaded and configuring the file name on the server side before submitting the file name to the database.

In onPreSubmit, it looks like this:
[code]
$.ajaxFileUpload({
url:'/lib/fupload.php',
secureuri:false,
fileElementId: 'DTE_Field_profileImageUpload',
dataType: 'json',
async: false,
success: function (ajdata, status) {
if(typeof(ajdata.error) != 'undefined') {
if(ajdata.error != '') {
console.log(ajdata.error);
} else {
a = ajdata.msg.split('|');
json.data.profileImage = a[0];
json.data.profileImageType = a[1];
}
}
},
error: function (ajdata, status, e) {
console.log(e);
}
})
[/code]

You'll notice that I've set async to false, in hopes of getting the json.data elements set before the data is sent to the database.

However, that doesn't seem to work. onPreSubmit finishes evaluating before the response from my file upload can complete, and ends up submitting the default values for profileImage and profileImageType to the database each time.

Is there a way to upload the file first, and then process the editing submission? Is onPreSubmit the wrong place to be doing it? I figured it was the most appropriate place for me, as it allows me to edit the data object to be submitted to the database.

allan

I just had a quick look through the source and there doesn't appear to be an async option in that plug-in. Did you find it in the documentation or somewhere else?

Possibly what you might need to do is use the 'ajax' init option: http://editor.datatables.net/options/#ajax . That would give you the ability to do the upload and then in the success handler for that, fire off the submit to the server for the Editor data.

Allan

aveak

That plug actually inherits all settings from the standard $.ajax call in jQuery. Outside of the onPreSubmit event, it properly turns off async when I ask it to.

I'll take a look at your suggestion. For the time being, I recoded the whole app to create the file name (epoch seconds + file extension) in the client, rather than on the server, and pass the file name to the server so that it names the resulting uploaded file appropriately. That way, they're both on the same page, no matter when they end up resolving.

allan

Ah okay. Now that 1.2 is out, development can really get going on 1.3 and I'll make sure that a `file` option is available as part of that (probably as an optional plug-in rather than a core component, since it could add quite a few KiB to the library...).

Allan

JePaFe

I need upload file, can help me with that?

Thanks in advance!

Sev

Hello Allan, I just bought Editor and I was wondering when 1.3 will be out as I am needing the file option. Do you have rought idea ?
I was also expecting to have the possibility to have CSV/XLS/PDF buttons on the top bar + the capability to select the number of rows to display as it is on datatables. Do you expect to add this in the 1.3 ? (maybe this should be a separate question).
Thanks
Sev

allan

> I was also expecting to have the possibility to have CSV/XLS/PDF buttons on the top bar + the capability to select the number of rows to display as it is on datatables. Do you expect to add this in the 1.3 ?

This is already available. Just add the CSV etc buttons to the TableTools `aButtons` array that you are using for the DataTables initialisation.

Regarding Editor 1.3 - I'm expecting this to be released, most likely May this year. However, it is quite possible to add a file input option at the moment using a field type plug-in - I just don't have the code to give you for that at the moment.

The way this would likely be implemented is an async upload using FileReader, so the file would be uploaded before the form is actually submitted (since Editor uses Ajax rather than a full page reload).

Regards,
Allan