Suggestions for Editor field: File

Suggestions for Editor field: File

aveakaveak Posts: 15Questions: 0Answers: 0
edited July 2012 in Editor
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?

Replies

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    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
  • aveakaveak Posts: 15Questions: 0Answers: 0
    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.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    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
  • aveakaveak Posts: 15Questions: 0Answers: 0
    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.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    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
  • aveakaveak Posts: 15Questions: 0Answers: 0
    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.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    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
  • JePaFeJePaFe Posts: 1Questions: 0Answers: 0
    I need upload file, can help me with that?

    Thanks in advance!
  • SevSev Posts: 3Questions: 0Answers: 0
    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
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    edited March 2013
    > 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
This discussion has been closed.