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

1 Answer 1

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?