How to change save image to file default name?

How to change the default name of save to file dialog in FF using HTML and JS?

The simple answer is that we can't.

The names are generated internally in the browser and we have no API access to this from an ordinary web page, and therefor can't change this behavior.

There are several reasons for not having direct access to the default context menu, one being security.

Extensions

One work-around though is to write a plugin/extension for the browser and provide a custom context menu item which you can then give the desired behavior.

Or use some existing ones like this or this - these are randomly selected just meant as examples. You may be able a better fit going through the add-on collections.

Download attribute and context menu

If you are controlling the page you want to save the images from, you could also provide a custom context menu which allows you to save images using the A-tag and the download attribute which allows you to set a filename.

You would need to convert the image to an Object-URL or Data-URI and set that as source for the A-tag.

Some may object to using custom context menus for various reasons, but if this is for local usage there is no good reason saying you can't, and in other cases a good UX approach can inform the user of this behavior removing any surprises.

Context menu example using CamanJS

Added a minimalist example to pop up the menu with a link and filename. The example uses CamanJS using the toBase64() method.

Since CamanJS replaced the original element it is important to attach event handlers after canvas has replaced them as otherwise the handler will die together with the original element in the sense they are no longer available.

Caman(img, function() {
  var me = this;
  
  // from inside callback as img is now a different element
  img.oncontextmenu = function(e) {
    e.preventDefault();                           // prevent default action
    lnk.download = lnk.innerHTML = "Myfile.jpg";  // set file and link name
    lnk.href = me.toBase64();                     // get Data-URI from CamanJS
    menu.style.cssText =                          // show the menu
      "left:" + e.clientX + "px; top:" + e.clientY + "px; display:block";
  };
});

window.onclick = function() {menu.style.display="none"};
#menu {
  position:fixed;
  background:#444;
  padding:4px 7px;
  box-shadow:3px 3px 3px #000;
  display:none;
  }
#menu a {color:#fff;font:14px sans-serif}
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<img id=img src="//i.imgur.com/67E6Ujdb.jpg" crossOrigin="anonymous">
<div id="menu">
  <a id="lnk"></a>
</div>

NOTE: may not work in Stacksnippet with Firefox (seem to be an issue with Stacksnippet). Here is a alternative fiddle link in that case.


It's not quite possible to change default name, but we can create an a tag and give it canvas data and set download attr to filename of choice, and show it like a menu replacing default menu...

Default and right clicked states

Code will look something like this...

jQuery(function($) {
  $('<a id="download-canvas">Save as image</a>').appendTo('body'); // Adding the tag to body
  var link = $('#download-canvas')

  $('body').click(function(e) {
    link.hide(0) // Hide the link on clicking anywhere else
  })
  $(document).on("contextmenu", function(e) {
    link.hide(0)
    if (e.target.nodeName == "CANVAS") { // Proceed for CANVAS nodes only
      e.preventDefault(); // Dont show default menu

      link
        .attr({ //Set the attributes for link
          href: e.target.toDataURL(),
          download: 'my-file.png'
        })
        .css({ // Position the link to current mouse position
          top: e.clientY,
          left: e.clientX,
          display: 'block'
        });

    }
  });
});

///////////////////////////////////
// Just drawing something on canvas
var canvas = document.getElementById('canvas-id'),
  ctx = canvas.getContext('2d');
ctx.fillStyle = '#0cf';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText('Hi from Canvas!', 10, canvas.height / 2 - 15);
ctx.font = '26px sans-serif';
ctx.fillText('Just right click me to download ;-)', 15, canvas.height / 2 + 35);
/* Position the tag absolute and make it look pretty */

#download-canvas {
  display: block;
  background: #fff;
  padding: 7px;
  font: 14px sans-serif;
  color: #555;
  border: 1px solid #ccc;
  position: absolute;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="500" height="300" id="canvas-id">Sorry, Your browser doesn't support canvas.</canvas>

To change the default name when Save AS dialog is not directly possible, But there is a workaround

You can specify the file name for file to be downloaded using Download Attribute in a tag like this

<a href="ImageLocation" download="filename">

Convert you canvas to data url and assign it to href of a tag

var canvas = document.getElementById('canvasId');
var yourlink= document.getElementById('linkId');
var dataURL = canvas.toDataURL();
yourlink.href=dataURL;

Tags:

Javascript

Html

Jquery

Recent Posts