Como instanciar um objeto File em JavaScript?

Há um Fileobjeto em JavaScript. Quero instanciar um para fins de teste.

Eu tentei new File(), mas recebo um erro "Construtor ilegal".

É possível criar um Fileobjeto?

Referência de objeto do arquivo: https://developer.mozilla.org/en/DOM/File

De acordo com a especificação da API do arquivo W3C, o construtor File requer 2 (ou 3) parâmetros.

Então, para criar um arquivo vazio, faça:

var f = new File([""], "filename");

• O primeiro argumento são os dados fornecidos como uma matriz de linhas de texto;
• O segundo argumento é o nome do arquivo;

• O terceiro argumento se parece com:

  var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})

Funciona no FireFox, Chrome e Opera, mas não no Safari ou IE / Edge.

Agora você pode!

var parts = [
  new Blob(['you construct a file...'], {type: 'text/plain'}),
  ' Same way as you do with blob',
  new Uint16Array([33])
];

// Construct a file
var file = new File(parts, 'sample.txt', {
    lastModified: new Date(0), // optional - default = now
    type: "overide/mimetype" // optional - default = ''
});

var fr = new FileReader();

fr.onload = function(evt){
   document.body.innerHTML = evt.target.result + "<br><a href="+URL.createObjectURL(file)+" download=" + file.name + ">Download " + file.name + "</a><br>type: "+file.type+"<br>last modified: "+ file.lastModifiedDate
}

fr.readAsText(file);

Atualizar

O BlobBuilder está obsoleto. Veja como você o usa, se você estiver usando para fins de teste.

Caso contrário, aplique o abaixo com estratégias de migração para acessar o Blob , como as respostas a esta pergunta .

Use um Blob

Como alternativa, existe um Blob que você pode usar no lugar do File , pois é o que a interface do File deriva conforme a especificação do W3C :

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

A interface do arquivo é baseada no Blob, herdando a funcionalidade do blob e expandindo-a para oferecer suporte a arquivos no sistema do usuário.

Crie o Blob

Usar o BlobBuilder como este em um método JavaScript existente que leva um arquivo para carregar via XMLHttpRequeste fornece um Blob para ele funciona bem da seguinte maneira:

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;
var bb = new BlobBuilder();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsfiddle.net/img/logo.png', true);

xhr.responseType = 'arraybuffer';

bb.append(this.response); // Note: not xhr.responseText

//at this point you have the equivalent of: new File()
var blob = bb.getBlob('image/png');

/* more setup code */
xhr.send(blob);

Exemplo estendido

O restante da amostra está no jsFiddle de uma maneira mais completa, mas não será carregado com êxito, pois não posso expor a lógica de upload a longo prazo.

Agora é possível e suportado por todos os principais navegadores: https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

A idéia ... Para criar um objeto File (api) em javaScript para imagens já presentes no DOM:

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

Não faça isso! ... (mas eu fiz assim mesmo)

-> o console fornece um resultado semelhante ao de um arquivo de objeto:

File(0) {name: "fijRKjokDhgfsKtG1527053050.jpg", lastModified: 1527053530715, lastModifiedDate: Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 0, …}
lastModified:1527053530715
lastModifiedDate:Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)) {}
name:"fijRKjokDhgfsKtG1527053050.jpg"
size:0
type:"image/jpg"
webkitRelativePath:""__proto__:File

Mas o tamanho do objeto está errado ...

Por que eu preciso fazer isso?

Por exemplo, para retransmitir um formulário de imagem já carregado, durante uma atualização do produto, juntamente com imagens adicionais adicionadas durante a atualização

Como isso é javascript e dinâmico, você pode definir sua própria classe que corresponda à interface File e usá-la.

Eu tive que fazer exatamente isso com o dropzone.js, porque queria simular um upload de arquivo e ele funciona em objetos de arquivo.