MongoDB GridFS image not loaded correctly

Question

I am trying to save images to a MondoDB Collection using GridFS. To test this, I made the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<?php
// open connection
$m = new MongoClient();
$db = $m->selectDB('ImageDatabase');
$gridUploads = $db->getGridFS('images');

// save image
$fileName = 'C:\Users\Thomas\Pictures\commits.png';
$gridUploads->storeFile($fileName);

// load image
$doc = $gridUploads->findOne($fileName);

// dsplay image
header('Content-type: image/png');
echo $doc->getBytes();

?>


</body>
</html>

This should upload the image to the collection and then get the same image from the collection and display it.

The collection content after this is:

{
    "_id" : ObjectId("52a6fcdd1dc38f0c3c0016bf"),
    "filename" : "C:\\Users\\Thomas\\Pictures\\commits.png",
    "uploadDate" : ISODate("2013-12-10T11:37:01.000Z"),
    "length" : 179952,
    "chunkSize" : 262144,
    "md5" : "768d618923442668ca2a60f02be59d52"
}

print_r($doc):

MongoGridFSFile Object
(
    [file] =&gt; Array
        (
            [_id] =&gt; MongoId Object
                (
                    [$id] =&gt; 52a6fcdd1dc38f0c3c0016bf
                )

            [filename] =&gt; C:\Users\Thomas\Pictures\commits.png
            [uploadDate] =&gt; MongoDate Object
                (
                    [sec] =&gt; 1386675421
                    [usec] =&gt; 0
                )

            [length] =&gt; 179952
            [chunkSize] =&gt; 262144
            [md5] =&gt; 768d618923442668ca2a60f02be59d52
        )

    [gridfs:protected] =&gt; MongoGridFS Object
        (
            [w] =&gt; 1
            [wtimeout] =&gt; 10000
            [chunks] =&gt; MongoCollection Object
                (
                    [w] =&gt; 1
                    [wtimeout] =&gt; 10000
                )

            [filesName:protected] =&gt; images.files
            [chunksName:protected] =&gt; images.chunks
        )

    [flags] =&gt; 0
)

However the result's body content is:

<img style="-webkit-user-select: none" src="http://localhost/path-to/the-script.php">

Any ideads why?

Thanks!

Yep, I don't know what should actually happen, but I guess an img tag where the src attribute is the path to the php file is not it^^ — tpei, Dec 10 '13 at 12:07

score 0 · Answer 1 · edited May 23 '17 at 12:19

Based on your first code example (mixed HTML and PHP), you're echoing the image's bytes within the HTML itself. There is also the issue of calling header() after the response body has been sent (one of the first things discussed in the header() PHP docs). I assume what you mean to do is have an <img> tag whose src attribute points to a separate PHP script that simply sets the Content-type header and returns the image bytes.

If you really do mean to output the image bytes within the page response, you should consider using data URIs:

However, pointing the src attribute to a PHP script is likely a better option (especially for large images). I can't explain how your original script generated:

<img style="-webkit-user-select: none" src="http://localhost/path-to/the-script.php">

...but that is certainly what you should be aiming for here.

Regarding use of MongoGridFSFile::getBytes(), you should note that getResource() will be more efficient, especially for large images. Working with the resource allows you to reduce memory consumption by only loading two chunks (from GridFS) in memory at a time. A concise example of using getResource() to output file contents can be found here.

MongoDB GridFS image not loaded correctly

1 Answers1