html download attribute redirects to url instead of downloading

Question 1

Noob webdeveloper here.

I'm trying to download an image from an url on click. But when I use the image url as my href it just redirects to that url instead of downloading. Of course I am using the download attribute. I have tried my own code and also mulitple code blocks from other people. But all of them just redirect. I am using google chrome.

My code:

<a href = "https://autoooo.nl/wp-content/uploads/2018/12/F5144B9C-2B27-4070-828E-2361EBD702EF-400x400.jpeg" download="car" id="downloadQRCodeButtonHref">
   <p>download</p>
</a>

Code I used from someone else 1(accepted answer):

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
   <img alt="ImageName" src="/path/to/image">
</a>

Code I used from someone else 2:

 <p> Click the image ! You can download! </p>
<?php
$image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
//echo $image;
?>
<a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
    <img alt="logo" src="http://localhost/sc/img/logo.png">
</a>

Some help will be appreciated. I might just be a big dum dum and overlook something extremely obvious.

Question 2

The problem is because you're using a cross-domain URL. From the documentation for the download attribute:

download only works for same-origin URLs, or the blob: and data: schemes.

To fix this you need to host the image on the same domain as the parent site.

Question 3

You can get the ID by this way, for more details and ajax part, check this fiddle, good luck. http://jsfiddle.net/ea51y1j5/

$("#userMenu").children('li').click( function() {
    var rssId = $(this).children('a').attr('id');
});

Question 4

There is a lot of ways to achieve this. In regards to the way you are asking, with a hidden form element.

change your form to:

<form method="post" name="myform" method="post" action="script.php">
  <input type="hidden" name="data" value="">
  <input type="submit" name="send" value="submit">
</form>

Javascript:

var data = signaturePad.toDataURL('image/png');
document.myform.data.value = data;
document.forms["myform"].submit();

Or Jquery:

var data = signaturePad.toDataURL('image/png');
$('form input[name="data"]').val(data);
$("form").submit();

Question 5

A bit of explaining as to what that %2520 is :

The common space character is encoded as %20 as you noted yourself. The % character is encoded as %25.

The way you get %2520 is when your url already has a %20 in it, and gets urlencoded again, which transforms the %20 to %2520.

Are you (or any framework you might be using) double encoding characters?

Edit: Expanding a bit on this, especially for LOCAL links. Assuming you want to link to the resource C:my pathmy file.html:

if you provide a local file path only, the browser is expected to encode and protect all characters given (in the above, you should give it with spaces as shown, since % is a valid filename character and as such it will be encoded) when converting to a proper URL (see next point).
if you provide a URL with the file:// protocol, you are basically stating that you have taken all precautions and encoded what needs encoding, the rest should be treated as special characters. In the above example, you should thus provide file:///c:/my%20path/my%20file.html. Aside from fixing slashes, clients should not encode characters here.

NOTES:

Slash direction - forward slashes / are used in URLs, reverse slashes in Windows paths, but most clients will work with both by converting them to the proper forward slash.
In addition, there are 3 slashes after the protocol name, since you are silently referring to the current machine instead of a remote host ( the full unabbreviated path would be file://localhost/c:/my%20path/my%file.html ), but again most clients will work without the host part (ie two slashes only) by assuming you mean the local machine and adding the third slash.

Question 6

I understand that I needed to remove Content-Disposition: ... line from the response headers. Since it was easier, I have solved the problem by editing/hacking OwnCloud’s PHP code.

In the lib/private/response.php file I changed setContentDispositionHeader function as follows:

static public function setContentDispositionHeader( $filename, $type = 'attachment' ) {
    if (OC_Request::isUserAgent(array(
            OC_Request::USER_AGENT_IE,
            OC_Request::USER_AGENT_ANDROID_MOBILE_CHROME,
            OC_Request::USER_AGENT_FREEBOX
        ))) {
        header( 'Content-Disposition: ' . rawurlencode($type) . '; filename="' . rawurlencode( $filename ) . '"' );
    } else {
                    // cca-hack-id:make-raw-output-property ###
                    // cca-hack-id:make-raw-output-property ### I needed something like "raw" format of github.com. 
                    // cca-hack-id:make-raw-output-property ###
                    // cca-hack-id:make-raw-output-property ### Usage with an example: 
                    // cca-hack-id:make-raw-output-property ###   1. share a single file and get a public link (MY_PUBLIC_LINK) for the file. 
                    // cca-hack-id:make-raw-output-property ###   2. get the file's direct url (MY_PUBLIC_LINK&download)
                    // cca-hack-id:make-raw-output-property ###   3. append '&raw' to the url: MY_PUBLIC_LINK&download&raw
                    // cca-hack-id:make-raw-output-property ###
                    // cca-hack-id:make-raw-output-property ### If you want to undo this hack, remove all lines which contains 'cca-hack-id:make-raw-output-property' string. 
                    // cca-hack-id:make-raw-output-property ###

                    if (!array_key_exists('raw', $_GET)) {  // cca-hack-id:make-raw-output-property
                header( 'Content-Disposition: ' . rawurlencode($type) . '; filename*=UTF-8''' . rawurlencode( $filename )
                                             . '; filename="' . rawurlencode( $filename ) . '"' );
        } // cca-hack-id:make-raw-output-property
    }
}

html download attribute redirects to url instead of downloading

Answers

javascript,php,jquery,html