Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks
Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple
Related
What could cause Chrome on mobile to display a web page appears to smudge elements when scrolling the page, such as the below image.
The page uses many icons from Fontawesome and uses Google fonts (font source NPM package), reactjs, jQuery and is packaged using webpack. It includes multiple webpack bundles on the same page.
What could be the approach to troubleshoot this issue?
The example below is at URL https://uquiz.com/DlVmXD:
The issue appears to have surfaced with the inclusion of the additional react component further down the page that shows suggestions of other content. Apparently it doesn't happen when the suggestions aren't displayed such as on this embed URL of the same content: https://uquiz.com/quiz/embed/DlVmXD/what-romance-trope-are-you?embed=true
I have tried it on many devices and it is fine and thousands of people are successfully able to use the page without issue every single day, but many people are reporting this issue. Every person that I have investigated is using Chrome on a mobile device.
I can't find anything to do with this behviour on the githubs for the main libraries that I use so I'm left thinking it could be a hardware issue. Could it be?
I'm trying to create a javascript application where it takes the picture using ALPhotoCapture in Pepper and displays the picture as a part of a web page in the Pepper Tablet. I'm able to make the Pepper take the Picture on FrontTactileTouch event and the picture is stored in /home/nao/recordings/cameras/picture.jpg. However, When I'm using the Javascript to load the Picture. The Browser doesn't allow me to show the picture on the tablet. On Googling, I found that browsers don't allow us to load the local pictures on the web page because of security issues. Does Pepper run Chrome Browser?
Just wanted to know if there is any workaround to display the local images in Pepper Tablet Web page. I've come across this ( https://community.ald.softbankrobotics.com/en/forum/display-image-peppers-tablet-8658 ) where They take a picture using Choregraphe and show it in the Tablet. But, this way the picture occupies the whole tablet. I just want the picture to be a part of the web page. Any suggestions are much appreciated.
if your application id srinu634app (be sure that's the actual package id, not just the name), you can save your image to:
/home/nao/.local/share/PackageManager/apps/srinu634app/html/img/photo1.png
... and then, in your project's html folder, you can have an index.html referencing img/photo1.png in an <img> (you could have the robot notify the javascript when an image is taken and what it's name is etc.).
Note that it's also possible to directly get the image data from javascript, without ever creating a file - see here for some discussion of how to do that: https://community.ald.softbankrobotics.com/en/forum/how-appear-naos-camera-view-using-qimessagingjs-webpage-6287
(the use case is a video stream; doing a static image like you do is simpler)
We have a phonegap/ionic application targeting iOS. We have been testing with the ipad air simulator (xcode) and ipad air (10.3.3), ipad Pro (11.0.3).
The app is an ionic (v1) app that downloads and loads stand alone html files (the files contain css, html, js in one doc). The documents are typically long forms. In all test environments we are getting odd behavior with selects/drop downs.
When you click/tap on a select the options will appear correctly.
Then when you click/tap somewhere else, blank space or another input field you will usually get the select options bubble again but it will be empty.
In the above image I made my selection from the options and then clicked into the next field.
This was intermittent at first and now it seems to happen all the time. It seems like it has something to do with losing focus but I am unable to see why this is popping back up. I haven't found anything very useful from searching online in regards to this problem.
UPDATE 11/7/17
After more thorough searching this seems to be due to building the app with xcode 9 and/or the use of UIWebView vs WKWebview. I also looked through the code more to see we were already using WKWebView not UIWebView and the problem is still present. As someone mentioned in this thread.
Good thing is Cordova has support for WKWebView too. You have to install the plugin: cordova-plugin-wkwebview-engine
I have an Android - Cordova Project.
When index.html (main page) page is loaded, on Android 5.1 (real phone) only shows a white screen.
When I minimize app by the phone's home button and go back again, using task manager, the page loads normally as expected.
I found a similar question, where someone argued about WitheList plugin which I added to my project.
Answers are likely about to make a delay using setTimeout, which I applied, with no success.
I have some local css and js files in index.html.
In onDeviceReady.js file, I call load method to set the html content for a div, add some click button functions and re-size some divs in setTimeout and an addEventListener.
What's the reason for this?
Waaaauuu!!!
I upgrade my jquery to v2.2 and my problem solved!. It is a new challenge and new experience.
I start debug with a real device with Android 5.1.1 (Samsung S6) and see that there is an error: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
But after search I don't find any useful answer (like this).
I guessed that one or more javascript file(s) make this bug (white screen problem), so I remove all js files tags from index.html and add one by one.
Yes, my jquery file version cause problem. I upgrade it from v1.11 to v2.2.
I have googled, but couldn't find a solution
Trust me, I've googled!
So, what happens is the following: I have bought a 20 template pack, they are plain html/css & javascript, so I can open them without a webserver in my machine: They work fine.
The problem started when I uploaded a website to my server:
Sliders won't show
Hovering the 4 boxes right under "DISCOVER THE
PLACES YOU’VE NEVER BEEN BEFORE" won't make them stand out
Hovering Video or Gallery items won't apply a fade mask to the image
Clicking on Video or Gallery won't open PrettyPortpholio overlay, instead it opens in another tab
Inspecting the website, I could see there was nothing linked wrong, all .js files were there, all images, the console don't output anything odd, it shows 2 little errors, but it's present in the template seller website as well, and it works there
This is my website:
[removed by user]
Template seller working website:
http://www.template-guide.com/preview/5500/
I've uploaded another template from the same pack to see if it works, I get the exact same bugs:
Alternative bugged template:
[removed by user]
Alternative website from template seller: http://www.template-guide.com/preview/5501/
Tried:
Downloading jQuery and adding it locally (both 1.8.2 and last)
Downloading again camera jQuery script (the .js responsible for the slider)
Downloading an camera jQuery scrip adapted to the latest jQuery
Googled, most issues were related to wrong path
Looks like you will need to update twitter name in myscript.js.
Browse for this section
$('.tweet_module').tweet({
modpath: 'twitter/',
count: 2,
username : 'your_name'
});
and update "username : 'your_name'" or simply comment the above section, if you don't want to show twitter feeds. This causes an error in JS and the JS engine stops parsing anything after that.