I have a File object myFile that looks like this in console:

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}

But when i create an image out of it with

var image = new Image();
image.src = URL.createObjectURL(myFile);

I get:

<img src="blob:">

When i try to save the file with right-click, the file-name is empty or "6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5" instead of "myimage.jpg". The file-name from the file-object is gone. Is there any way to set the image file name?

I have a File object myFile that looks like this in console:

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}

But when i create an image out of it with

var image = new Image();
image.src = URL.createObjectURL(myFile);

I get:

<img src="blob:http://myurl./6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5">

When i try to save the file with right-click, the file-name is empty or "6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5" instead of "myimage.jpg". The file-name from the file-object is gone. Is there any way to set the image file name?

• javascript
• image
• image-processing
• filereader
• fileapi

• @K3N You can see working example here . Source is here - I used alot of your code btw but had no chance to contact you. Would love to see you contributing to the project! :) – Mick Commented Jun 15, 2016 at 22:12
• Great to hear @Mick, always nice to hear back from people, thanks :) I am not sure I can contribute much though as I lack typescript skills, but I'll be happy to "consult" if ever needed. I'm unable to reproduce the problem btw (FF48/CH53/IE11), might be a browser-bug. In what browser(s) / version do you get this error? – user1693593 Commented Jun 16, 2016 at 20:38
• TypeScript is nearly JavaScript with datatypes and object oriented stuff that is known by all programming languages. I learned everything within less of a day. My project is quite simple, only one file and 95% JavaScript. The problem is that the image doesnt have a filename. You may look at the inline JavaScript of the example where i create the image out of a file object or blob(if file api is not available, which is Safari and IE). You may see in console that the File object contains a filename, but the image has no filename. – Mick Commented Jun 16, 2016 at 22:56
• I edited the question. Its not about "blob://null" which i got maybe only at my local machine. Its about the filename of the file-object which is gone when i create an image out of it, as shown above. – Mick Commented Jun 16, 2016 at 23:08

1 Answer 1

The Problem

The File object is sort of an extended version of a Blob that allows it to hold metadata such as filename, size etc.

However, while createObjectURL() will reference both File and Blob the data read through the blob: protocol will only consist of the binary file data itself as when loading via other protocols. No metadata (such as filename) will be provided via the protocol.

Other examples where filename is not considered could be when an image is loaded via for example a PHP or ASPX page (/getimage.aspx?id=1). Also here there is no metadata provided and browser would suggest something like "getimage.aspx%3Fid=1" as filename in this case. As expected.

The IMG tag itself never assumes any filename even if one is used at source point; it only holds what is given to it via the src attribute/property as-is, as a connection point to retrieve the needed binary data for decoding.

In this case the source point is blob:*/* which then will be what IMG tag references via src, and is what the browser use when the data is to be saved.

Workarounds

The only way to hold on to a filename from the File object is to keep track of it so you have access to it when needed for download.

But also this is limited as you can only specify a filename using the download attribute in an A tag. And of course, some browsers such as <= IE11 does not support this attribute.

<a href="blob:.." download="filename.jpg"><img ..></a>

In IE10+ there is the proprietary method msSaveBlob() which can be used instead though:

window.navigator.msSaveBlob(myBlob, 'filename.jpg');

Besides from these there are no mon way to specify a default filename from within the client.

Example fiddle