HTML5 i drag\'n\'drop upload

Obecnie większość serwisów implementuje dość przydatną i użyteczną funkcjonalność jaka jest drag'n'drop upload dla plików. Niestety HTML5 jest jeszcze implementowany w przeglądarkach i nie każda go obsługuje w pełni, w tym przypadku Firefox, Chrome, Safari bez problemu obsługują window.File, window.FileList i window.FormData.

Warto natomiast zwrócić uwagę, że w wielu przykładach używany jest obiekt window.FileReader do wczytania pliku i sprawdzenia czy został poprawnie odczytany przez przeglądarkę. Niestety gdy chcemy odczytać kilka sporych plików np. metoda .readAsDataURL() zajmowana jest spora ilość pamięci przez przeglądarkę i niestety nie ma możliwości zwolnienia tej pamięci, taki memory leak powoduje wyświetlenie komunikatu z błędem lub zamknięcie przeglądarki. Dlatego obecnie lepiej nie wczytywać zawartości plików.

Kolejnym problemem może być skorzystanie z obiektu XMLHttpRequest() i wysłanie binarnie pliku xhr.sendAsBinary(file.getAsBinary()), taki sposób nie pozwoli nam na wysyłanie dość sporych plików powyżej 50Mb. Warto więc użyć obiektu FormData() do wysyłania dużych plików.