Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE10 cannot upload the same file again. #141

Closed
danialfarid opened this issue Feb 19, 2014 · 16 comments · May be fixed by vovafeldman/ng-file-upload#1
Closed

IE10 cannot upload the same file again. #141

danialfarid opened this issue Feb 19, 2014 · 16 comments · May be fixed by vovafeldman/ng-file-upload#1

Comments

@danialfarid
Copy link
Owner

No description provided.

@DiegoPires
Copy link

Hi man, I'am using your directive and found the same problem... I've searched a little and found another upload plugin with the same problem and they solved it. Take a look: moxiecode/plupload#811

I changed my directive a little and it look like this now, what do you think?

    return function (scope, elem, attr) {
        var fn = $parse(attr['ngFileSelect']);

        var change = function (evt) {
            var files = [], fileList, i;
            fileList = evt.target.files;
            if (fileList != null) {
                for (i = 0; i < fileList.length; i++) {
                    files.push(fileList.item(i));
                }
            }
            $timeout(function () {
                fn(scope, {
                    $files: files,
                    $event: evt
                });

                elem.val('');

                var inputFile = elem.clone();
                elem.replaceWith(inputFile);

                inputFile.bind('change', change);
                inputFile.bind('click', click);

                inputFile = null;
            });
        };

        var click = function () {
            this.value = null;
        };

        elem.bind('change', change);
        elem.bind('click', click);
    };

@DiegoPires
Copy link

Hey... actually the above answer don't resolve everything, it worked just for the second try, but in the third it was broke again... found a little trick from angular to rebind the directive, the timeout function needs to be like this:

            $timeout(function () {
                fn(scope, {
                    $files: files,
                    $event: evt
                });

                elem.val('');
                var inputFile = elem.clone();
                elem.replaceWith(inputFile);
                $compile(inputFile)(scope);
            });

@danialfarid
Copy link
Owner Author

Yea, good idea, this could work. But I would do a check to do this only for IE10. It's so bizzare to recompile and replace the element on each click and it would most probably break the Flash support for IE8-9.

@github-steve
Copy link

IE wins again.

          <input id="uploadBtn" type="file" class="upload" ng-file-select="onFileSelect($files)"
                 ng-click="resetInputFile()" onclick="this.value = null"/>

onclick="this.value = null" is the key. Putting it in ng-click does not work for me.

@webdevjg
Copy link

webdevjg commented Aug 8, 2014

I tried this solution ('this.value = null') and it was still not working (using version 1.4)

I also tried the demo page setup on IE10 and it still didn't perform a secondary upload until the page is refreshed

@danialfarid
Copy link
Owner Author

You can try this workaround for IE10 only. This is IE10 specific issue.

@webdevjg
Copy link

webdevjg commented Aug 8, 2014

Looks like that did solve it. Thanks

@krgeppert
Copy link

@danialfarid I'm seeing this issue in chrome 36 as well. Oddly enough, if you upload a different file after the first, it works, but 2 sequential uploads of the same file it doesn't.

@danialfarid
Copy link
Owner Author

@krgeppert I have chrome 36 and the demo page is able to upload the same file again.
Are you testing the demo page?

@krgeppert
Copy link

My bad, I didn't notice the ' onclick="this.value = null" ' fix. Sorry about that.

@codephobia
Copy link

I had actually missed the onclick="this.value = null" as well. Perhaps this should make it to the readme?

@adrianolibrizzi
Copy link

I encountered the same problem on Chrome 36. In my case, I renamed the "onFileSelect" function in "upload", but this created a conflict within the scope. The first time everything worked regularly but the second time it was returned the error "Object is not a function".
I solved it by renaming the function again in "onFileSelect" (any other name that not does conflict is ok ;) )

@joshribakoff
Copy link

I ran into the same problem. Does it make sense to abstract away the onclick workaround? You could simply have a setting for disallowing the same file twice, it should default to off in my opinion.

@danialfarid
Copy link
Owner Author

The problem is that if you select the same file it doesn't fire change event that's why we are using click event to fix it.

@danialfarid
Copy link
Owner Author

fixed in version 2.0.0 by default it resets the file value on click.

@rajguru827
Copy link

In windows safari also it is not working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants