How to submit file when using fileField Widget

Show cool things you have done with our products


Post Reply
User avatar
SIM-LTD
Posts: 490
Joined: Thu Mar 28, 2019 4:12 pm

How to submit file when using fileField Widget

Post 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:

Code: Select all

<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 ?

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 659
Joined: Mon Dec 24, 2018 9:15 am

Re: How to submit file when using fileField Widget

Post 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

User avatar
SIM-LTD
Posts: 490
Joined: Thu Mar 28, 2019 4:12 pm

Re: How to submit file when using fileField Widget

Post 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"?

User avatar
SIM-LTD
Posts: 490
Joined: Thu Mar 28, 2019 4:12 pm

Re: How to submit file when using fileField Widget

Post 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'];

Code: Select all

{
   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);
      });
   }                                                
 }, 

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 659
Joined: Mon Dec 24, 2018 9:15 am

Re: How to submit file when using fileField Widget

Post by sergey.maltsev »

Hi!

FileField and FilePicker are not designed to support uploading files.

To send file content over http try this code

Code: Select all

    {
        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

Code: Select all

<?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()
            )
        )
    );
}

User avatar
SIM-LTD
Posts: 490
Joined: Thu Mar 28, 2019 4:12 pm

Re: How to submit file when using fileField Widget

Post 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

Post Reply