upload

[vylink]

Hi,

can you help me with the ajax upload, please?
I'm not sure, how can I send a file from the dropzone to the server

dropzone.on('file', (evt) => {
        const formData = new FormData()
        formData.append('file', evt.data.file);
        this.di.getService('page').open('/somepresenter/?do=upload', 'POST', formData)
});

Many thanks,

M

[jahudka]

Hi, you're almost there - the easiest change to your code that should make it work would be to use Nittro.Forms.FormData instead of the native FormData, e.g.:

_context.invoke(function(FormData) {
    // ...
    const formData = new FormData();
    // ...
}, {
    FormData: 'Nittro.Forms.FormData'
});

If your code is in an inline <script> tag in a template and your project uses the _stack library, just replace _context.invoke(function(FormData) { ... }, { FormData: ... }) with _stack.push([ function(FormData) { ... }, { FormData: ... } ]) (note that in the _stack.push call the arguments are wrapped in an array). You can also just get a reference to Nittro's FormData directly like this:

const NittroFormData = _context.lookup('Nittro.Forms.FormData');
const formData = new NittroFormData();

Not sure about your this.di reference - within a _context.invoke()'d closure this points to the current namespace, which can be the global namespace where di is stored, but not necessarily - if you later refactor your code and move it into a namespace, the this.di references will break - I'd recommend you just let _context inject the di instance as a parameter of your callback like this:

_context.invoke(function(di) {
    // di.getService('...')...
});

[jahudka]

Also, if your dropzone is derived from a form input and the form is handled by Nittro you can just simplify sending all the dropped files like this:

dropzone.on('drop', function() {
    if (dropzone.hasFiles()) { // if there are any valid files
        di.getService('page').sendForm(document.getElementById('frm-some-id'));
    }
});

This will send all the currently queued files in one request. Your implementation has the downside that the page service will cancel any running transaction whenever a new transaction is started, so if the user drops more than one valid file at a time only the last file will be uploaded. This can be prevented with the background: true context option when calling page.open() or page.sendForm().