Can't display or read file object in Javascript

Question

I have file object and I wish to grab the URL.

screenshot of file object on Chrome console

I tried to output the properties like below, but all are giving me "undefined" except type and date.

      console.log("file: " + file.type);
      console.dir(file.attachment.attributes);
      console.dir(file.attachment.attributes.date);
      console.dir(JSON.stringify(file.attachment.attributes.author));
      console.dir(file.attachment.attributes.width);

Here's how the file type looks like as below.

screenshot of file type on Chrome console

Is there something wrong with how I try to read them?

My code is based on WordPress wp-plupload.js that comes with core WordPress. Yeah, I know I shouldn't edit the core codes but I was just experimenting.

UPDATE: Below is the code.

/**
     * After a file is successfully uploaded, update its model.
     *
     * @param {plupload.Uploader} up       Uploader instance.
     * @param {plupload.File}     file     File that was uploaded.
     * @param {Object}            response Object with response properties.
     */
    fileUploaded = function (up, file, response) {
      var complete;
   // Remove the "uploading" UI elements.
      _.each(["file", "loaded", "size", "percent"], function (key) {
        file.attachment.unset(key);
      });

      file.attachment.set(_.extend(response.data, { uploading: false }));

      wp.media.model.Attachment.get(response.data.id, file.attachment);

      complete = Uploader.queue.all(function (attachment) {
        return !attachment.get("uploading");
      });

      if (complete) {
        Uploader.queue.reset();
      }

      self.success(file.attachment);
    };

UPDATE: I just realized the file is NOT a file object after all.

  $isFile = file instanceof File;
  console.log("File? " + $isFile);

I received a "File? false". It's not a blob too! But I still wonder why I can't read the object and get the URL.

Are you sure the object is populated when you try to read its attributes? `console.log` is notorious for lazy display of objects - it will display the values of the object attributes at the time you click the expand triangle, not the values at the time the object was logged. See [Is Chrome’s JavaScript console lazy about evaluating objects?](https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects). This is especially an issue when an object is changed asynchronously. — Amadan, Feb 08 '22 at 23:39
Based on your screenshot, it seems to think it is a `PluploadFile` object, which may or may not have been created by the library Plupload, or by another unrelated piece of code that imitates it - we don't know, which is why people ask. What it certainly is not, is [a `File` object](https://developer.mozilla.org/en-US/docs/Web/API/File). — Amadan, Feb 09 '22 at 00:05
@Amadan Right. If it's PluploadFile object, is there a way to "extract" the file object out of it? I just need to get the file to upload do a AJAX request to upload to somewhere else. At least get the path or URL of the file. — wipor20530, Feb 09 '22 at 00:24

score 0 · Answer 1 · answered Feb 09 '22 at 00:55

0

Ok, I solved the problem this way. To get the file object, I need to call file.getNative() as stated here -> https://www.plupload.com/docs/v2/File

Thanks to all for your guidance, for without you I would be a lesser coder..

answered Feb 09 '22 at 00:55

wipor20530

23
4

Can't display or read file object in Javascript

1 Answers1