Download file by mobile device

Asked

Viewed 355 times

9

I have a link, and by clicking on this link he downloads an image. So far so good, plus when I access from some mobile device I can’t download this file, someone has some idea or solution to solve this?

HTML:

<a href="http://mlb-s2-p.mlstatic.com/ipad-mini-apple-16gb-wi-fi-100-original-pronta-entrega-16713-MLB20125338106_072014-F.jpg" download>
    Clique para baixar a imagem
</a>

JSFIDDLE:

http://jsfiddle.net/dv381tga/

  • Dude, which browsers have you tested? Some browsers offer more HTML5 support than others!

  • Example: Safari (by iPad), Internet Explorer (Windows Phone), Chrome (iPad and Android).

  • Precisely Safari and Internet Explorer do not support the download attribute. Newer versions of Chrome and Opera support.

  • Right. So I tested for Chrome (iPad) and it didn’t work, so I see the download tag is supported by Chrome

  • look here: http://developer.android.com/intl/pt-br/training/basics/data-storage/files.html

  • my Android cell phone low file in a good...?

  • I don’t know what it’s like on Android and Windows Phone, but on iOS I think you just can’t download.

  • 1

    @Danilo doesn’t have something with iOS to test, but looking at http:/mobilehtml5.org/ it looks like Chrome’s grip on iOS HTML 5 is the same as Safari’s. In this case, on iOS, perhaps the only option is Opera. Depending on who your target audience is, you can try using a base-64 coded href (more or less as done on: http://stackoverflow.com/a/26721964/1156498 ) using a suitable MIME type for your image (I would try application/octet-stream).

Show 3 more comments

2 answers

2

You can try this, but it does not support all browsers:

<a href="/caminho/imagem" download="arquivo-para-baixar.jpg" title="Nome da imagem">
    <img src="/caminho/imagem/arquivo-para-ver.jpg" alt="Nome da imagem">
</a>

Example of use

See which one is supported here: http://caniuse.com/#feat=download.

But you can try using the modernize for that reason: http://modernizr.com/download/#-a_download

Another way is by creating a . htaccess with the following rule:

<Files (arquivo1|arquivo2).jpg>
   ForceType application/octet-stream
   Header set Content-Disposition attachment
</Files>

Model with Fiddle

  • I saw no difference by the example I made available in the question

  • @Danilo, if you notice, in my example, the attribute is receiving the image parameter, maybe this is the reason you are not able to download your file. If there’s another way to do this, which I’m not aware of, I suggest you share it with Sopt’s community. Also, I suggested an API that allows to be implemented for your download.

  • 1

    Here’s more about the API: https://modernizr.com/docs/#using-modernizr-with-javascript

  • You can make a JSFIDDLE of that answer?

  • I could, but I don’t see the need, since it’s just a simple link tag. And even if I do, the test should be done from a mobile phone.

  • So I would like to do this test on mobile, as it is a simple fsfiddle

  • Won’t that link resolve? http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download2

  • No. I tested it on all mobile platforms and does not download the image. :/

  • You have to use /path/, it doesn’t work using domain. I put an example with fiddle.

  • Didn’t work either

  • I gave +1 for the server-side idea in htaccess

Show 6 more comments

1

Danilo, there’s no way to do this consistently on the client side. You would have to use a server solution to ensure the download happens.

See a well-spread PHP example:

  1. Your image on the front end (client side):

<a href="download.php?imagem=caminho/absoluto/da/imagem.jpg">
    <img src="caminho/absoluto/da/imagem.jpg"/>
</a>

  1. On the server side:

<?php

$imagem = $_GET['imagem']; #pega o caminho absoluto da imagem a partir do link

baixar_imagem($imagem); #executa a funcao abaixo que tem o caminho absoluto da imagem como parametro

function baixar_imagem( $camingo_absoluto_da_imagem ){

  // Verifica se os cabeçalhos da pagina de download foram enviados
  if( headers_sent() ){
      die('Cabeçalhos de página já enviados!');
  }
    

  // Essa parte é requerida em alguns navegadores
  if(ini_get('zlib.output_compression')){
      ini_set('zlib.output_compression', 'Off');
  }
    

  // Primeiro, verificamos se a imagem existe
  if( file_exists($camingo_absoluto_da_imagem) ){

    // Depois, verificamos a extensao da imagem para podermos saber seu tipo MIME
    $tamanho_da_imagem = filesize($camingo_absoluto_da_imagem);
    $trecho_caminho_imagem = pathinfo($camingo_absoluto_da_imagem); //veja mais sobre a função pathinfo() do PHP
    $extensao = strtolower($trecho_caminho_imagem["extension"]);

    // Agora, verificamos o tipo da imagem a partir da extensao
    switch ($extensao) {
      case "gif": $tipo_imagem="image/gif"; break;
      case "png": $tipo_imagem="image/png"; break;
      case "jpeg": $tipo_imagem="image/jpg"; break;
      case "jpg": $tipo_imagem="image/jpg"; break;
      default: die('Imagem não foi encontrada');
    }

    header("Pragma: public"); // requerido
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // requerido em certos navegadores
    header("Content-Type: $tipo_imagem");
    header("Content-Disposition: attachment; filename=\"".basename($camingo_absoluto_da_imagem)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$tamanho_da_imagem);
    ob_clean();
    flush();
    readfile( $camingo_absoluto_da_imagem );

  } else{
      die('Imagem não foi encontrada');
  }
    

}

Information:

  1. PHP functions used:

  • In case my file is already being generated and coming from the server. On pc everything works, the problem is when I access via mobile as the question says. In mobile it does not download using the download attribute in <a tag>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.