File Upload

cbtdev

Is there a way to upload the file when the form is submitted, as opposed to immediately uploading the file when it is selected? Would I need to write a custom editor.fieldType to handle this? If so, how would I go about implementing the get method so that editor will send the file(s) along with the rest of the form data?

Thanks,
Kurt

allan

Unfortunately, with the built in upload file type, no. The file is uploaded async relative to the rest of the form.

The only option I can think of to make it synchronous would be to have a custom field type plug-in that would read the file information into a local variable and that would be submitted to the server as the form as a whole is submitted. That is probably fairly non-trivial to do though.

Allan

cbtdev

Thanks Allan, I'll play around with this and see what I can come up with.

Thanks again,
Kurt

cbtdev

Hi Allan, I guess I am still a little confused. I'm trying to implement the custom field type and I am unsure what editor is expecting back from the get method...

_fieldTypes.upload_s = {
        create: function ( field ) {
            field._enabled = true;
            var input = $('<input type="file"/>');
            field._input = $(input)[0];
            return field._input;
        },
        get: function ( field ) {
            // what should be returned here?
            return $(field._input)[0].files[0]; // this doesn't work            
        },
        set: function ( field, val ) {

        },
        enable: function ( field ) {

        },
        disable: function ( field ) {

        }
    }

From what I understand, in order to submit a file along with other parameters, you need to use a FormData() object as the value for the ajax data field. However, the Editor.prototype._submit function doesn't seem to be serializing the input fields like this.

Any help with this would be greatly appreciated.

Thanks,
Kurt

DavidT72

Kurt,

I'm trying to do the same thing. Did you manage to find a solution to this?

Thanks,
Dave

allan

I'm not sure if be did ever complete this - my profuse apologies if I failed to reply here Kurt!

Basically you need the get() to return the information about the file - probably a base64 representation. It might be possible to return a Blob but that isn't something that I've tried.

Either way, as the file is selected you would need to read the information about it (using FileReader) into a variable that can then be returned using the get method.

Allan

cbtdev

Dave,

We decided not to implement a custom field type and just use the built in file uploader.

Kurt