show the file names and allow user to remove the files before submitting the form

Question

I am working on a web page where user need to upload files and send them along with some message.. First thing i noticed is when we want to upload a file or send an attachment(single or multiple) we need to use below line of code:

<input type = "file" name="file" file-model="file" multiple/>

With the above code when user is selecting more than one file it is not showing the file names on the webpage instead showing 2 files if 2 files are selected. I want to show the file names and user should able to delete the file before sending if he likes to remove it before submitting the form(just like we do in email attachments).

sample plunker : https://plnkr.co/edit/Le6edwhX3Bye6E2XwIhd?p=preview

Any inputs on how to do it using angularjs.

Answer 1

I would recommend using BlueImp Angular File Uploader: https://blueimp.github.io/ It would allow you to do this along with other cool things like drag and drop and ajax uploading

Here's a demo: https://blueimp.github.io/jQuery-File-Upload/

Also, it looks like there's an Angular JS flavor of it: https://blueimp.github.io/jQuery-File-Upload/angularjs.html