HTML5 File API size issue in Safari - html

I have a drag and drop upload script which works fine on chrome and firefox. However, on Safari, it has an issue with retrieving the file size. It returns 0 bytes for the file size, but strangely, it will occasionally return the correct file size. This is around 1 out of every 10 times.
I am getting the files list via a drop event like so:
var files = event.dataTransfer.files;
alert(files[0].size);
And upon trying to use the size method, I get 0 bytes in return. Does anyone know why this is happening?

The file api is slightly different to the standard. Safari 6 will change that.
Source: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
Safari's implementation has some strange bugs, however. Occasionally, I've noticed in my own use of this feature that your first drop might stall and not go through. Adding a simple asynchronous request to a blank page prior to completing the upload seems to defeat that bug.
Guide for Safari 5: http://www.deadmarshes.com/Blog/20110413023355.html

Related

Chrome crashes with too many web components

I have an HTML table with at most 25 columns (usually 5 or 6) and at most 25 rows. Each cell in the table contains a custom Web Component. These are minimal web components. For example, one wraps a number and you can set number formatting (e.g. format as currency) via the attributes. Another just displays a formatted string, etc. I am adding these components dynamically using appendChild on the td.
These Web Components are all using the Shadow DOM - as recommended in the documentation. So I create this simple table (6 rows and 25 columns) and I populate cells with these Web Components. If I do this in Chrome, my system crashes requiring a reboot (sometimes by forcing a shutdown). I tried this in Firefox, and the table renders in less than a second. Also I tried this in Edge and it crashes there too.
I tried re-doing my Web Components to remove the Shadow DOMs and voila, it works fine in Chrome and Firefox.
I don't want to do these component without the Shadow DOMs. Does anyone have any ideas?
Thanks
Update: this is still a problem. I tested in Edge browser and it does indeed work there (albeit a bit slow). Also tested in Safari/ MacOS and it works there too.
What a shame… I have to tell my users they can’t use Chrome and prevent the page from loading.
Update 9/2/2022: Without any changes to my code it is no longer an issue. The only explanation I have is that it might have been happily addressed by a scheduled Chrome update.
Now however, even though my table loads OK, if I open Developer Tools immediately after the table loads, I get a crash with error: 'Debugging Connection closed. Reason: Render process gone.'
Update 9/4/2022: I was overly optimistic about this error. I started testing my app again in Chrome today and the original problem still exists. I create my table in Chrome, interact with it in various ways (e.g. dynamically add a column, add an icon prefix to cell contents of a column, dynamically add a column with a drop-down menu in each cell, etc.) and eventually Chrome will crash.
I no longer expect this to be fixed. I logged a bug report with chromium.org and that is all I can do.

Html input of type "file" freeze the browser sometimes

i'm struggling with the classic HTML input of type file. I was using it on my angular application and i had freeze sometimes, the whole browser became unresponsive, and the only thing that works is the scroll.
You can't click any buttons, select any text or even change tab on the browser for about 5 seconds. I tried a lot of different file type and sizes and it doesn't change any of this, it even freeze sometimes when i don't select any file in the explorer and i click the close button directly.
So I thought it was my implementation that was bad and i went to the Mozilla developper website where you have an example and I have exactly the same behaviour. I also tried to take only the HTML from the Mozilla website and put it alone on a .html file and again, same behaviour.
This does not occur 100% of the time, but I would argue that on my end it does it about 60/70 % of the times.
I tried it on chrome and Firefox (both up to date), on multiple computer (all running Windows though) and i have the same behaviour on all of them.
I don't have any error or anyting in the consoles.
I don't know what to do with this, i'm pretty sure it can't be the file's input on the whole web that are bugged, but i tried a lot of various things with always the same results. Should i report it somewhere? ( if so, where? ) Or what would you suggest to do to investigate this further?
I couldn't find anyone discussing this issue on the internet apart for this thread that had no solution, they also say in this thread that the bug is not reproducible in Edge, but i just tried and it does the same thing.
Thanks for reading me and for any help about this.
Chrome freezes for few seconds when after any use of file field.
It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.
Same here, I have a mapped network drive that is not responding, this make a 5 seconds delay. After unmapping the drive, no more delay. The delay is the same in firefox or chrome.
Same here, if you want to remove it, on Windows 10, click on the icon Quick access (blue star), then right click on the dead link appearing in the "Frequent folders" panel on the right panel and choose "Unpin/Remove from Quick access". There should be no error message.

Web pages in CHtmlView with high dpi (150%) display incorrectly

Problem
I'm having the problem for days and haven't found anyone else mentioned it..
The issue is that when I set the system dpi scaling to 150% or above, some webpages I open in CHtmlView would be messed up, while using IE or Chrome not causing the same problem.
Context
It seems like in CHtmlView the fonts get bigger than it's needed. I figured out this situation happens if my program's "high DPI-aware" property is set. But I can't turn it off either because the webpage would be blurry.
The strange part is when I tested msdn or google paged in CHtmlView, they neither caused the problem nor scale 150%. They just displayed as the 100% one.
Not sure if I should do something to my program or the webpage. The webpage needed to be displayed in my program is also from my company, so if I know what to set in the webpage I could handle it.
Thank you :)
Edit:
Because the website I'm having problem with is a private site, so I use another page to explain the situation.
Webpage in HtmlView, seem like only fonts get bigger.
Webpage in IE
I'm here as I've got the same problem.
You can create a new VS2017 MFC project, derive a view from CHtmlView, you'll find this in the constructed code
void CMFCApplication4View::OnInitialUpdate()
{
CHtmlView::OnInitialUpdate();
Navigate2(_T("http://www.msdn.microsoft.com/visualc/"),nullptr, nullptr);
}
(Note I had to delete the two trailing nullptr arguments to get it to compile)
My application manifest lists the app as being High DPI Aware and I've got a 200% (192dpi) scaled monitor.
The web page that loads is tiny (unscaled).
zett42's answer (Aug 31 '17 at 14:39) is correct. Add the registry key indicated, using
Computer\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
MFCApplication4.exe=11001 [your application name here].
Restart the app, hey presto everythin is correctly scaled.
Dunno why I can't upvote zett42.

Chrome - type=file drag and drop

I have a weird situation. One of my users is using functionality of Chrome (current version, 49, 50), that he drags and drops a file from his folder on local computer to normal input type=file button in a form on the webpage. Once again, let me stress it even more, its normal html input, no fancy javascript, no drag&drop events and handlers, nothing like this. It just takes the name of the dragged file and puts it into the input field, as like he selected it via "normal" way, opening the file select window, locating file on harddrive, selecting the file and confirming.
In some specific situation, this stops working (while doing some edits in the page via javascript / ajax), and I need to "reenable" it.
But, and that is my question, I haven't found any documentation of this "feature" in Google Chrome (or maybe some other browsers as well, I don't know). Why it works, how it works, how it should work and what to do if it stops working :) Does anyone has any experience with this ? The only way how to "fix" it now is to reload the page. I'd love to solve it ... :)
EDIT 1 : I just did a quick test, it works and bugs the same way in Firefox on Win. It doesn't show any error in dev console or any message, it just doesn't add the file as expected.
I've found it. The previous discussion with deceze pointed me to test the javascripts I have on the page, that do not "interfere" with the input type=file ... they weren't any such scripts, but I've found that after doubleclick on the table (that I'm using for editing) this script is being called
$(document).bind('drop dragover', function (e) {
e.preventDefault();
});
and there wasn't any unbind action when table is saved ... this caused the drag and drop everywhere on the page to stop working after the edit.

Selenium Chrome Webdriver stalls when trying to get_attribute('href')

I'm building a webcrawler using Selenium Webdriver with Chrome. It uses
links = self.browser.find_elements_by_xpath("//*[#href]")
gets all the links on a page and then loops through the links to filter them. However, on every site I've tested, once it gets to a certain link on a certain page, it stalls at this line:
url = link.get_attribute("href")
It's not an error, it just stops, as if it hit an unending loop. For a given site, it's always on the same link on the same page for every test run. The stalling does not occur with Firefox - everything works fine. However, I need it to do this using Chrome for other reasons (trust me on this).
The version of Chrome I'm using is 28.0.1500.52, and I'm using the latest Chrome driver, which is compatible with that version. What could be going on here?
EDIT (IGNORE THIS EDIT)
After looking into it some more, I've found what's causing the problem: There's a part further down in the code that mouses over every link that's found.
hov = ActionChains(self.browser).move_to_element(link)
hov.perform()
When I comment that part out, it works. Now I have to figure out why this should have any effect on getting the href attribute from a Selenium link object (especially when it works fine for the first arbitrary number of link objects)...
EDIT 2
Ignore the first edit.