How to Hide Delete Icon After JS File Upload Success Using CSS in Uploader?

Learn how to use CSS to hide the delete icon in Syncfusion’s JavaScript File Upload component after a file is uploaded successfully. This technique is particularly useful for customizing the user interface and ensuring a cleaner design.

Steps to Implement

1. Set Up the File Uploader Component

   • Include an HTML <input> element for file uploading:

     <input type="file" id="fileupload" name="UploadFiles" />
     

   • Initialize the Syncfusion File Uploader component using JavaScript:

     var uploadObj = new ej.inputs.Uploader({
       cssClass: 'specific',
       dropArea: '.container',
       asyncSettings: {
         saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
         removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
       },
     });
     uploadObj.appendTo('#fileupload');
     

2. Apply Custom CSS

   • Use the following CSS class to hide the delete icon:

     .specific.e-upload .e-upload-files .e-file-delete-btn.e-icons {
         display: none;
     }
     

   • This ensures that the delete icon is concealed after a file is uploaded.

3. Test Your Implementation

   • To verify the functionality, you can refer to the sample project hosted on StackBlitz:
     View Sample Project

Tips & Additional Context

• Why Hide the Delete Icon?

  • Hiding the delete icon can help prevent accidental file deletion or streamline the user interface for specific use cases.

• Customizing Further:

  • You can modify the CSS class to target specific scenarios or use conditional logic in JavaScript to dynamically toggle the visibility.

• Syncfusion Documentation:

  • For additional details on customizing the File Uploader, refer to Syncfusion’s official documentation at [insert link].

By following these steps, you can effortlessly customize the File Uploader component to meet your specific requirements.

Conclusion

I hope you enjoyed learning about how to hide delete icon after JS File Upload Success Using CSS in Uploader.

You can refer to our JavaScript File Upload feature tour page to learn about its other groundbreaking feature representations. You can also explore our documentation to understand how to present and manipulate data.

For current customers, you can check out our JavaScript components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our JavaScript File Upload and other JavaScript components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!