1

I am trying to work with this example:

http://jsfiddle.net/200eoamf/1/

that is the code in part, you can see all the code in jsfiddle:

var onFileReadFn = $parse(attrs.onReadFile);
var reader = new FileReader();

reader.onload = function() {

    var fileContents = reader.result;

    // invoke parsed function on scope
    scope.$apply(function() {
        onFileReadFn(scope, {
            'contents' : fileContents
        });
    });
};

reader.readAsText(element[0].files[0]);

The following issue occurs in Chrome browser, but not in Firefox:

If I choose file, say myfile.txt, it will appear in the text box. However, if I manually clear that window by selecting the entire text and deleting it, and then trying to upload the same file myfile.txt again, it won't upload. Why is this happening and how to fix it? Thanks.

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
jazzblue
  • 2,411
  • 4
  • 38
  • 63
  • "manually clearing it" do you mean by content of the textarea element or how? – Lucio Oct 02 '15 at 22:37
  • Yes, just select entire uploaded text in the textarea by mouse or Ctrl-A, and then hit 'Backspace', then try to Choose the same file. It won't upload. – jazzblue Oct 02 '15 at 23:03
  • 1
    It is working for me under Firefox v41 – Lucio Oct 02 '15 at 23:15
  • Yes, it looks like this problem shows in Chrome and not in Firefox. I will change the title and add this fact to description. If you happen to know why this occurs in Chrome only, please, let me know. – jazzblue Oct 02 '15 at 23:23
  • BTW, I just noted the angular version in that jsfiddle is 1.2 which is nowadays obsolete. Do you need this working under a specific version or only the latest stable? – Lucio Oct 02 '15 at 23:30
  • To be clear: your code is working. The problem relay on the file input ´onchange´ event which, under chrome, fires if the new selected file is different from the previous one (if any). You can simply verify this [by your own](http://stackoverflow.com/a/11860770/1505348). – Lucio Oct 02 '15 at 23:39
  • Yes, I see, thanks for clarification. However, I still do not get how I redefine/overrride 'onchage' event so that it would fire off regardless of previously loaded file. Would it be easy to make this change in jsfiddle so that I could understand? (Any AngularJS version, especially latest would do, no need in 1.2) – jazzblue Oct 02 '15 at 23:56

1 Answers1

1

You have two options, one is use a Clear button so the user can manually do it, another option is to clear the value of the previous file when the user clicks on the input. Here is the later: http://jsfiddle.net/200eoamf/12/

element.bind('click', function() {
  element.val(null);
});

Thanks to Blake Plumb for the idea! :)

Community
  • 1
  • 1
Lucio
  • 4,753
  • 3
  • 48
  • 77