We Keep Coding

browser doesn't show progress bar when downloading a file using javascript

browser doesn't show progress bar when downloading a file
function getSound(sound) {
var req = new XMLHttpRequest();
req.open("GET", sound, true);
req.responseType = "blob";
req.onload = function (event) {
var blob = req.response;//if you have the fileName header available
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download='sound.mp3';
link.click();
};
req.send();
}
I want show like this

The issue is that by the time you call 'click' the file is already downloaded. But you didn't need to download the file in advance:
function getSound(sound) {
const link=document.createElement('a');
link.href=sound;
link.download='sound.mp3';
link.click();
}

You have to add Content-Lenght header to let the web browser know the size of your file.

IOS Javascript download is broken after OS version update

I wrote a JS code to download pdf and zip files into the browser. For pdf download everything works fine. But for zip download, it's not working for ISO(15.3.1) chrome and firefox. But this works fine for the safari browser. Before updating the version(15.1) it was working fine for all browsers. I also tried using https://github.com/eligrey/FileSaver.js but the same problem exists.
let req = new XMLHttpRequest();
req.open("POST", url);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.response != null && req.status === 200) {
let link = document.createElement('a');
link.href = URL.createObjectURL(req.response);
link.download = $currComponent.find(".downloadFileName").val() + "." + req.response.type.split("/")[1];
link.click();
link.remove();
}
};
req.send(JSON.stringify(data));
Here I added the code that I worked with.

checking audio file exists with javascrip only

I have a webpage which need to play a mp3 file (if exists)
But I can only javascript only...
I tried the different method, but I still cannot check the file exists or not..
it sometimes works in IE,
but not work in chrome
Updated on 20200731
I've updated my code
now I have updated my code with 2 functions
executeIfFileExist <-- check the file exists
playme <-- play the mp3, this is fine and I can play the music now.
the check file exists function still not working.
even my file exists in server, the player still not show.
anyone can help me.
Thanks a lot.
<script>
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", src, true);
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
callback();
}
};
xhr.open('HEAD', src);
}
function playme(mp3file) {
//$("#playAudio").attr('src',mp3file).autoplay;
$('#playAudio').show();
$("#playAudio").attr('src',mp3file).play;
}
function showTips(url,event){
$('#tipsimg').attr('src', url);
// start
$('#playAudio').hide();
mp3file = url.substr(0, url.lastIndexOf(".")) + ".mp3";
mp3file = '01.mp3';
alert(mp3file);
// $("#playAudio").attr('src',mp3file).play();
// playme(mp3file);
executeIfFileExist(mp3file,playme);
// end
$('.tips').show();
//event.preventDefault();
}
$(document).ready(function(){
showTips('01.png',null);
})
</script>
<div class="tips">
<img src="" data="image1" id="tipsimg" />
<br />
<audio id="playAudio" controls autoplay>
<source src="" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>

You can have a function to check whether the file exists or not, try this out!
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
callback();
}
};
xhr.open('HEAD', src);
}

I found answer and tried myself, at least it works (hide the audio tag if not found)
but it still show a js error if the file not exists
wish its helpful
function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(src);
}
};
xhr.open("GET", src, true);
xhr.responseType = 'blob'; // add these line will loop until the file is ready
xhr.send(); // add these line will loop until the file is ready
}
function playme(mp3file) {
$('#playAudio').hide();
$('#playAudio').show();
$("#playAudio").attr('src',mp3file).play;
}

Storing Image In Database Without JQuery

Good day stackers,
I'm working on a web project in which we recreate a social media site similar to snapchat. I'm using my webcam to take pictures using JS, and I'm writing the picture to a var called img as follows:
var img = canvas.toDataURL("image/png");
We are required to use PDO in PHP to access the database. Alternatively we can use AJAX, but JQuery is strictly forbidden. My question is, how can I store the DataURL inside my database? All the tutorials online use JQuery.
Update:
I followed the steps as suggested below, but when I hit the snap button, it still only takes the picture, but no URL or nothing.
function sendimagetourl(image)
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
alert( this.resoponseText);
}
}
xhtp.open("GET", "saveimage.php?url="+image, true);
xhttp.send();
}
//Stream Video
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
//Snap Photo
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
document.getElementById("snap").addEventListener("click", function() {context.drawImage(video, 0, 0, 800, 600);var image = canvas.toDataURL("image/png"); sendimagetourl(image);});
So it appears I was a bit of a fool. There were two minor typos, and it seems like the data sent is invisible in the url. Thanks for all the help!

You can use javascript ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert( this.responseText);
}
};
xhttp.open("GET", "saveimage.php?url="+url, true);
xhttp.send();

You can use XMLHttpRequest() or fetch(), Blob, FormData to POST data URI to php. See also Using files from web applications
var request = new XMLHttpRequest();
request.open("POST", "/path/to/server", true);
request.onload = function() {
// do stuff
}
var data = new FormData();
data.append("image", new Blob([img], {type:"image/png"}), "filename");
request.send(data);

javascript: iOS audio not being loaded from page saved to Home Screen

page works well until being saved to Home Screen. If started from Home Screen no audio appears. The error is "Value is not a type of AudioBuffer". I guess there are problems with loading of audio with XMLHttpRequest() here.
M4A file presents in cache.manifest, so should be cached normally.
could you please advice? Thanks
function beep(){
var sound = context.createBufferSource();
sound.buffer = soundBuffer; <<< here
sound.connect(context.destination);
sound.noteOn(0);
}
......
if('webkitAudioContext' in window) {
context = new webkitAudioContext();
function bufferSound(event) {
var request = event.target;
soundBuffer = context.createBuffer(request.response, false);
}
var request = new XMLHttpRequest();
request.open('GET', 'stoplight.m4a', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();
}
Update: solved with Base64 audio encoding. iOS doesn't cache audio files.