I want to upload the files while clicking the submit button of the form - from Forum 173400

I want to upload the files while clicking the submit button of the form.


I have tried by calling the upload method of the EJ2 uploader component inside the submit button click event but it seems that i'm might be doing it wrong. Kindly assist


https://stackblitz.com/edit/angular-nqk33p?file=app.component.ts




5 Replies

SP Sureshkumar P Syncfusion Team August 17, 2022 12:58 PM UTC

Hi Charles,

We suggest you use our upload method to resolve your facing issue. To know more about the upload method. Please refer to the below documentation link.

Documentation link: https://ej2.syncfusion.com/angular/documentation/uploader/how-to/achieve-file-upload-programmatically/

Also, please provide the below details to proceed further in this.

  1. Whether you have got the selected file from your backend service or not?

  2. If possible, please share your backend service code to validate the issue.

  3. Whether you have got the selected file in the form submission data or not?

These details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P



CH Charles August 17, 2022 07:51 PM UTC

Hi Sureshkumar,

My project is working fine. This uploader is also working fine. My aim is to access the uploader function from the submit button. So when l click on the submit button then all input data on the form will be save to it destination at once (including the upload image). I don't want to manually click on the upload button, but l want it to be done by the submit button on the form.


https://stackblitz.com/edit/angular-nqk33p?file=app.component.ts




SP Sureshkumar P Syncfusion Team August 18, 2022 10:21 AM UTC

Hi Charles,

We suggest you follow the below rules when uploader render inside the form element.

  1. saveUrl` and `removeUrl` must be null.

  2. `autoUpload` must be disabled.

  3. `name` attribute must be added in input element.

In your attached sample please remove the asyncSettings property to achieve your requirement.

Also, when the form is submitted the form action handles the server-side operations that manage the file upload process.

To know more about form support, please refer to the documentation link; https://ej2.syncfusion.com/angular/documentation/uploader/form-support/

Find the screenshot for getting the selected file details in the form submit action:


If you have faced any difficulties when getting the selected file getting from your form post server side then please share your service code we will validate and update you the exact solution as earlier as possible.

Regards,

Sureshkumar P


Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



CH Charles September 7, 2022 08:57 PM UTC

Hi  Sureshkumar, 


Can you get me the codes for saving image in binary format into sql server database? Or what ever option you think is better please assist me.


Regards

Charles



SP Sureshkumar P Syncfusion Team September 8, 2022 06:35 AM UTC

Hi Charles,


We will address your query in the respective forum # 177349. Please check the forum for further assistance.


Regards,

Sureshkumar P


Loader.
Up arrow icon