I am using createObjectURL to get an image's attributes such as width and height. How do I get the local filename?

loadURL = function (event) {
    var output = document.getElementById('myimage'),
        output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function () {

        document.getElementById("urlinput").value = output. ? ? ? ? ?

        document.getElementById("width").value = output.width;
        document.getElementById("height").value = output.height;
    }
}

How do you get the filename from this? I have tried filename, src,and name. I know I can get the value from the corresponding input type="file" but I want to get it from the object (output.????? above), but how?

I am using createObjectURL to get an image's attributes such as width and height. How do I get the local filename?

loadURL = function (event) {
    var output = document.getElementById('myimage'),
        output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function () {

        document.getElementById("urlinput").value = output. ? ? ? ? ?

        document.getElementById("width").value = output.width;
        document.getElementById("height").value = output.height;
    }
}

How do you get the filename from this? I have tried filename, src,and name. I know I can get the value from the corresponding input type="file" but I want to get it from the object (output.????? above), but how?

• javascript
• image
• object

Share Improve this question Follow edited Nov 25, 2015 at 16:00 AtheistP3ace 9,6911212 gold badges4545 silver badges4343 bronze badges asked Nov 25, 2015 at 15:30 The One and Only ChemistryBlobThe One and Only ChemistryBlob 7,8841111 gold badges4040 silver badges7575 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

URL.createObjectURL does not have any of that information in the final returned value. It returns a URL of type string. And neither would your img element by default but if your event.target is a input of type file you can get the file name from that.

loadURL = function (event) {
    var output = document.getElementById('myimage'),
        output.src = URL.createObjectURL(event.target.files[0]),
        fileName = event.target.files[0].name;
    output.onload = function () {

        document.getElementById("urlinput").value = output. ? ? ? ? ?

        document.getElementById("width").value = output.width;
        document.getElementById("height").value = output.height;
    }
}

Fiddle: http://jsfiddle/AtheistP3ace/h1pswvk1/

Fiddle Code

HTML:

<input id="test" type="file" />

JS:

document.getElementById('test').addEventListener('change',
    function (event) {
        alert(event.target.files[0].name);
    }
);

EDIT: Sorry I guess I missed that last part where you said you know you can get it from the input. Either way if your document.getElementById('myimage') is an img tag that would not have the file name. The only option would be if the src has the url to parse that out but from your code it seems like the img tag exists but has no src until a file is added to input and then you set the src programmatically. Please correct if I am wrong. Why do you not want to get it from where it is available? Why only from the myimage element?