web-dev-qa-db-fra.com

Vérifiez si la variable contient un fichier ou un objet blob

Javascript a à la fois File et Blob pour la représentation des fichiers, et les deux sont presque la même chose. Existe-t-il un moyen de vérifier si une variable contient un type de données File ou Blob?

javascriptfileapi
16
alexandernst

W3.org:

'Un objet File est un objet Blob avec un attribut de nom, qui est une chaîne;'

En cas de dossier:

var d = new Date(2013, 12, 5, 16, 23, 45, 600);
var generatedFile = new File(["Rough Draft ...."], "Draft1.txt", {type: 'text/plain', lastModified: d});

console.log(typeof generatedFile.name == 'string'); // true

En cas de Blob:

var blob = new Blob();
console.log(typeof blob.name); // undefined

État:

var isFile = typeof FileOrBlob.name == 'string';
12
Reflective

Manière la plus simple:

a = new File([1,2,3], "file.txt");
b = new Blob([1,2,3]);
c = "something else entirely";

a instanceof File
> true
b instanceof File
> false
c instanceof File
> false
37
Nick Brunt

Cela fonctionne pour moi lorsque j'essaie de déterminer si un objet est un fichier:

var reader = new FileReader();

if(file.type){
    reader.readAsDataURL(file);
}

Si je veux vérifier s'il s'agit d'un type de fichier spécifique comme une image, je fais ceci:

if(file.type && file.type.indexOf('image') !== -1){
    reader.readAsDataURL(file);
}
2
Peter Drinnan

Comparez la classe constructeur:

var b = new Blob()
console.log(b.constructor === Blob) // true
2
Marcos Kubis

D'après Nick Brunt:

function isFile(input) {
   if ('File' in window && input instanceof File)
      return true;
   else return false;
}

function isBlob(input) {
    if ('Blob' in window && input instanceof Blob)
        return true;
    else return false;
}

//Test
const a = new File([1,2,3], "foo.txt", {type: "text/plain"});
const b = new Blob([1,2,3]);
const c = "something else entirely";

console.log(isFile(a));    //true
console.log(isBlob(a));    //true
console.log(isFile(b));    //false
console.log(isBlob(b));    //true
console.log(isFile(c));    //false
console.log(isBlob(c));    //false

Ne fonctionnera pas pour Opera mini ainsi que IE. Bien qu'avec IE cela n'a pas d'importance car vous ne pouvez utiliser que des balises d'entrée de fichier, dans ce cas vous saurez certainement que c'est un fichier.

1
Ric Flair

Une solution de doublure pour vous faciliter la vie.

Basé sur Ric Flair

const isFile = input => 'File' in window && input instanceof File;
const isBlob = input => 'Blob' in window && input instanceof Blob;

const a = new File([1,2,3], "foo.txt", {type: "text/plain"});
...

console.log(isFile(a)) // true
...
1
Ignacio Bustos