Grabbing a Files Metadata

Coding Help
,
1

Hello I am a Novice Coder so Please Try to be As Clear as Possible (for the sake of anyone Reading This For Help)
and be Understanding
Anyways
I want to Read a Files Metadata and store them as a Var
mainly an Images Metadata
What I am Trying to do is
to Get The Width and Height of an Image
What I Plan To do is
Set An Embeds params to the Width and Height of an Image
(which I know How to do)

So How do I do it

I have Code (Not Formatted) if you Want to Look at it

             const output = document.getElementById('output');
                const button = document.getElementById('submitbtn')
                const button2 = document.getElementById('removebtn')
                if (window.FileList && window.File) {
                  document.getElementById('file-selector').addEventListener('change', event => {
                    output.innerHTML = '';
                    for (const file of event.target.files) {
                      const li = document.createElement('li');
                      var input = document.getElementById("file-selector").files[0];
                      const name = file.name ? file.name : 'NOT SUPPORTED';
                      const type = file.type ? file.type : 'NOT SUPPORTED';
                      const size = file.size ? file.size : 'NOT SUPPORTED';
                      const mod = file.lastModified ? file.lastModified : 'NOT SUPPORTED';
                      var isimage = type.includes("image");
                      var isaudio = type.includes("audio");
                      var isvideo = type.includes("video");
                      var height = file.height ? file.height : 'NOT SUPPORTED';
                      var width = file.width ? file.width : 'NOT SUPPORTED';
                      var path = document.getElementById("file-selector").value
                      dateObj = new Date(mod * 1000); 
                      utcString = dateObj.toUTCString(); 
                      time = utcString.slice(-11, -4);
                      console.log(type + name + size + isaudio + isimage + isvideo)
                      var hrmod = "???"
                      var trusize = bytesToSize(size) 
                      if (size > 8388608) {
                      li.textContent = `The File is Too Big To Submit As it Excced Discord's 8Mb limit on file's Try again You can Try Changing the format or Lowering the Quality of the file`;
                      output.appendChild(li);
                      document.getElementById("file-selector").value = '';
      button.disabled = true
                       
                     
      } else {
      var fileobject = URL.createObjectURL(document.getElementById("file-selector").files[0])
         document.getElementById("img").src = fileobject;
                        li.textContent = `name: ${name}, type: ${type}, size: ${trusize} last modified: ${time} path: ${path} object: ${fileobject} width: ${width} height: ${height}`;
                      output.appendChild(li);
          button.disabled = false;
          button2.disabled = false;
       };
                    };
                  });
                }

Edit: I am Making a Upload to Discord Form It is For Art COntest Everything is Working i am Just Polishing it Up to Be Better
The ID of the File Input is file-selector
Also button and button2 are the Upload and Submit Buttons and Clear File Buttons

2

@Boofhead1000, is your current code working or not?

2 Likes
3

It is I am Just Looking to Read an Images Metadata and Get the Height and Width elements
Edit: I Provided it so you Know What code i have And What i am Working with

2 Likes
4

You could try this.

  1. Once the file has been uploaded, preview it on the browser by showing an <img> tag with the uploaded image and set the source dynamically using JavaScript.

  2. Use this code:

In HTML

<img src="" id="preview-image" />

var newImg = new Image();
newImg.src = document.getElementById("preview-image").src;
 
var height = newImg.height;
var width = newImg.width;

Does anyone know an easier method?

4 Likes
5

Okay So I have An Embed which Uses a Blob to Display The Image
Because i also Want it to Display Audio And Video As Well
Here is the Code which Converts it:

var fileobject = URL.createObjectURL(document.getElementById("file-selector").files[0])
             document.getElementById("img").src = fileobject;

How will i be able to Adjust The Embed (I would use iframe but embed for me do not display until they have an item to Display)
How Would @khalby786

6 
var fileobject = URL.createObjectURL(document.getElementById("file-selector").files[0]);
document.getElementById("img").src = fileobject;

var newImg = new Image();
newImg.src = fileobject; // edited typo

var height = newImg.height; // the height
var width = newImg.width; // the width
7

Error in console:
Uncaught SyntaxError: Unexpected identifier Art_Event.html:107

Which is This Piece of Code:
newImg.src = file object;

@khalby786 what do i do

8

Oops, a small typo, fixed it:

var fileobject = URL.createObjectURL(document.getElementById("file-selector").files[0]);
document.getElementById("img").src = fileobject;

var newImg = new Image();
newImg.src = fileobject;

var height = newImg.height; // the height
var width = newImg.width; // the width
2 Likes
9

It is returning 0 for both
@khalby786

10

That’s weird, can you run console.log(fileobject) just to make sure?

11

This is what the value spits out
blob:https://boofboat-studios.glitch.me/9ad53ad1-ae98-4676-afe3-04014e21270a
It creates a url for the file

12

Can you copy the URL that it gives out and visit it in your browser just to make sure that it returns an image?

13

It only generaes a custom URL
That is local and limited to the current page
I think
But it displays I The embed

1 Like
14

Can you tell us the project name so that I can take a look, unless it’s private?

1 Like
15

It is Private But i can send you The Project File Since i have it all in one HTML Doc

1 Like