1

I have a link of questions coming since I am developing a Flickr interface. Although I am not that new to developing code in languages like PHP, C++, Java and so on, but there are things that I must have missed in class because I just do not understand what to do, or more importantly how to think.

  1. When I upload a file from the desktop, it will accessible through the input that is used for the upload, but where is the actual file data located? When I use the following method to fetch the data I get a File object with some details but the raw data is missing. Why?

    function processUpload(event) {
    "use strict";

    var container = document.getElementById("imageContainer"),
        data = event.target.files,
        file = null,
        i = null;

    while (container.childNodes.length > 0) {
        container.removeChild(container.childNodes[0]);
    }
    for (i = 0; file = data[i]; i++) {
        if (!file.type.match('image.*')) {
            continue;
        }
        files.push(file);
    }
    loadImages();
}

  2. In my current code for the Flickr interface, I can load data from their Feeds and I get images but these are not of the same type as the images that I load from the desktop. To create File objects out of this data I do the following in my JavaScript code. I'm new to jQuery to excuse the mess. How do I update the code below so it will create the same kind of a File object, regarding an image, as if I would upload from the desktop? Perhaps it's not important right now but I rather that they are of equal type before I continue with this Flickr interface.

    function fetchImages() {
    var blob = [
        new Blob([], {}), [], new Uint16Array([32])
    ];

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tagmode: "any",
        format: "json",
    }, function (data) {
        for (var i = 0; data.items.length; i++) {
            files.push(new File(blob, data.items[i].media.m, {
                type: 'image/jpeg'
            }));
            if (i === data.items.length - 1) {
                loadImages();
            }
        }
    });
}

  3. FileReader code below. Could someone explain the logic behind this code, it works but I am not that experienced in just JavaScript? Why is the data from the files array given twice?

    var reader = new FileReader();
reader.onload = (function (file) {
    return function (f) {
        // do something with the image...
        // f.target.result gets the value used for the src attribute
        // what do I need to do here to convert it into a File object that is equal to a typical file upload?
    };
}) (files[i]); // why?
reader.readAsDataURL(files[i]); // why again?

Thank you!

Kind regards Richard

goldenmaza
  • 149
  • 1
  • 10
  • 2
    File objects are like refs to actual files. Use `FileReader()` to get the actual data, or `URL.createObjectURL()` to turn the actual data into a url. Note that since `File`s are "refs", using the OS to modify an open file will live-update the details of the `File` object, and you can re-read the `File` to get that new file data, without re-acquiring (via browser or dnd) the link. I believe it's this capability to "refresh" open objects that forces the initial file to NOT have actual binary data upon acquisition. – dandavis May 16 '16 at 22:28
  • Try this answer : http://stackoverflow.com/questions/12281775/get-data-from-file-input-in-jquery/12282163#12282163 – Sark May 16 '16 at 22:32
  • I actually used FileReader before (check the above), but how do I now convert it into a File object as if it was an upload? Thank you both for your help! :) – goldenmaza May 17 '16 at 07:13

0 Answers0