Uploader not working properly

[Vanderlei]

Hi guys,

MVC5, JS2, VS 2017 Community, all tests made in the developer machine.

I have 3 uploader components in webapplication views. All were tested and worked fine but something hapenned and none of them are working now, I mean a common problem affects all 3 components.

Uploaders renders ok to select but when files are selected the send/cancel buttons are not shown. Even when set to true Autoload does not work as well. There are no error messages...

But when running solution from VS2017, buttons are rendered and uploading or Autoupload works properly.

As I sad before all were working fine. I did not change anything in the related views. I found this malfunction after adding Syncfusion pdf library to the solution, I am not sure if this could be the cause of the problem...

Q1 - How to solve the problems?

Q2 - Is there a way to not show the Delete button after upload succeeds?

Webconfig, View and Layout files are attached to the message.

Thank you guys!

[Vanderlei]

Sorry, I forgot attachment...

Attachment: Attachment_c8d411fd.zip

[Prince Oliver]

Hi Vanderlei, 

Thank you for contacting Syncfusion support. 

Query: How to solve the problems? 

Based on your shared information, we have tried to reproduce the issue with rendering the uploader as a tab content. We have checked in both autoUpload true and false cases and its working properly in our side. For your reference we have attached the test sample in the below link. 

http://www.syncfusion.com/downloads/support/forum/143065/ze/UPLOAD~1106904543.zip  

Also, please remove if you are adding any custom styles to hide the buttons. Kindly check the above sample and If you are still facing the same issue, please revert the sample by modifying it to replicate the issue based on your application. This will help us provide a prompt solution. 

Query: Is there a way to not show the Delete button after upload succeeds? 

You can achieve your requirement by hiding the delete button using CSS in application level. Please refer the below code block. 

<style> 

.e-upload .e-upload-files .e-icons.e-file-delete-btn { 

    display: none; 

} 

</style> 

Please let us know if you need any further assistance on this. 

Regards, 

Prince  

[Vanderlei]

Hi Prince,

I made some changes to reflect what I am trying to do. Please note that Uploader componentes needs to be rendered within a dialog form loaded from a grid component while editing a record.

Please kindly find the code attached, you will be able to reproduce the related malfunction.

Thank you.

Attachment: Controller_and_Views_5073a039.zip

[Prince Oliver]

Hi Vanderlei 

Thank you for using Syncfusion products. 

We have validated the reported issue in our EJ2 Uploader control. We have already considered this as a defect in our end. The fix for the issue will be included in our upcoming 2019 Volume 1 release which is expected to be rolled out in the end of March 2019. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/5007/      

Until then you can use the file “selected” event and call the upload() public method to work around this issue. 

<div> 

    <div class="form-group col-md-12"> 

        <div class="control_wrapper"> 

            @Html.EJS().Uploader("UploadFiles").DropArea(".control-fluid").Selected("onFileSelect").AutoUpload(true).AsyncSettings(newSyncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Uploader/Save"), RemoveUrl = @Url.Content("~/Uploader/Remove") }).Render() 

        </div> 

    </div> 

</div> 

<script> 

    function onFileSelect(e) { 

        var proxy = this; 

        setTimeout(function () { 

            proxy.upload(proxy.getFilesData()); 

        }, 100) 

    } 

</script> 

 

Kindly refer to the following API reference link for further reference 

Selected - https://ej2.syncfusion.com/documentation/api/uploader/#selected  

Upload - https://ej2.syncfusion.com/documentation/api/uploader/#upload  

Regards, 

Prince 

[Vanderlei]

Hi Prince,

I followed the changes suggested and now I am able to upload files as expected. Thank you.

One more question please. How to auto clear the uploader file list a little while after upload succeeds?

Thanks.

[Prince Oliver]

Hi Vanderlei, 

Thank you for your update. 

To auto clear the uploader file list a little while after upload succeeds, you can use the success event in the control to get the file name and remove the element after the required delay. Kindly refer to the following code snippet. 

<div> 

    <div class="form-group col-md-12"> 

        <div class="control_wrapper"> 

            @Html.EJS().Uploader("UploadFiles").DropArea(".control-fluid").Success("onSuccess").Selected("onFileSelect").AutoUpload(true).AsyncSettings(newSyncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Uploader/Save"), RemoveUrl = @Url.Content("~/Uploader/Remove") }).Render() 

        </div> 

    </div> 

</div> 

<script> 

    function onSuccess(e) { 

        var li = document.querySelector("li[data-file-name='" + e.file.name + "']"); 

        if (li) { 

            setTimeout(function () { 

                li.remove(); 

            }, 1000); //specify the time delay here for removing the element. 

        } 

    } 

</script> 

Please let us know if you need any further assistance on this. 

Regards, 

Prince