Page 1 of 1

How to submit file when using fileField Widget

Posted: Tue Oct 01, 2019 3:03 pm
by SIM-LTD
Hi

Great to have implemented a new widget : fileField & filePicker
But how to submit the selected file with fileField.

There is no sample and having read the document, we did not see how to submit the file to be uploaded in the server.

We know how to set the server-side script but there is one missing part which is how to connect the fileField to the action that will perform the submit.

The basic HTML code would do so:
<form action="uploadfiles.php" method="post" enctype="multipart/form-data">
	<p>
	<label for="my_upload">Select the file to upload:</label>
	<input id="my_upload" name="my_upload" type="file">
	</p>
	<input type="submit" value="Upload Now">
</form>
But with the sample (https://www.bryntum.com/examples/gantt/taskeditor/) TaskEditor, we wanted to move forward with the new Tab (File) and we are pretty much stuck when it comes to submitting the file selected.

Could you please give us some hint ?

Re: How to submit file when using fileField Widget

Posted: Tue Oct 01, 2019 3:48 pm
by sergey.maltsev
Hi, SIM-LTD!

FileField itself doesn't have any upload capabilities.

I can suggest to use AjaxHelper in beforeTaskSave event for TaskEdit to upload file.
In case of upload fail you could abort saving task by returning false.


More info in docs
https://www.bryntum.com/docs/grid/#Common/helper/AjaxHelper

https://www.bryntum.com/docs/gantt/#Gantt/feature/TaskEdit#event-beforeTaskSave

Re: How to submit file when using fileField Widget

Posted: Tue Oct 01, 2019 4:06 pm
by SIM-LTD
Hi Sergey

Very nice to you to get a quick answer.

Thus, we believe if "FileField" got no capability to perform upload; is it the same with "FilePicker"?

Re: How to submit file when using fileField Widget

Posted: Tue Oct 01, 2019 11:42 pm
by SIM-LTD
Hi

We have been trying this code below, in order to operate an upload of a selected file, the response is OK;
But the php script does not receive anything

We would appreciate if you could tell us whether this approach is good and what are we missing, for not receiving the arguments in our PHP script?

Indeed the second parameters sent via AjaxHelp is the formData (raw file), but in the PHP script the file is empty

Thank you for your help
In our php script these are empty?
$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];
{
   type            : 'filefield',                                                                                               
   cls               : 'b-inline',
   style            : 'margin-top: 3em; margin-left:10px;',
   onChange  : ({ source }) => {
          AjaxHelper.post(this.destination, source.files[0]).then(response => {
                   console.log('Response....', response);
      });
   }                                                
 }, 

Re: How to submit file when using fileField Widget

Posted: Wed Oct 02, 2019 7:01 am
by sergey.maltsev
Hi!

FileField and FilePicker are not designed to support uploading files.

To send file content over http try this code
    {
        type     : 'filefield',
        cls      : 'b-inline',
        style    : 'margin-top: 3em; margin-left:10px;',
        onChange : ({ source }) => {
            const formData = new FormData();
            formData.append('file', source.files[0]);
            AjaxHelper.post('upload.php', formData).then(response => {
                console.log(response);
            });
        }
    }
simple php backend
<?php

try {
    move_uploaded_file( $_FILES['file']['tmp_name'], $_FILES['file']['name']);
    echo '{"success": true, "msg": "Upload ok!"}';
} catch (Exception $e) {
    die(
        json_encode(
            array(
                'success' => false,
                'msg'     => $e->getMessage()
            )
        )
    );
}

Re: How to submit file when using fileField Widget

Posted: Wed Oct 02, 2019 7:17 am
by SIM-LTD
Hi Sergey

We have been through the entire online documentation that we start to be well acquainted with and did see any of this formData class.
Except for a config value that lightly mentions a way to send as formData from AjaxStore section..anyway
We were not very far but could not deal with the raw file to be sent accordingly

So again, we thank you very much for this help.

Have a very pleasant day
Cheers