Suggestions for image upload and local storage in file system?

Question

I am starting work on a modification to allow image uploading and storage in the local file sytem rather than the database.  Since I am using a markdown editor rather than WSIWYG the mod will be written to integrate into this editor.  However, most of it should not be editor-specific.

I believe this approach is superior to storing blobs in the database for a number of reasons (Google it).

I haven't looked into it yet but it is quite possible that a small table might have to be added to the database in order to store the image metadata and id.

Current thinking is to follow best-practices and rename files using an MD5 hash.  Then this would be used in reverse order to evenly distribute files in the file system.  Example:

Original file name:  my_blue_flower.jpg

MD5 hash: c358ccba0209db89c742e061896ba829

New file name: c358ccba0209db89c742e061896ba829.jpg

File path:  c3/58/cc/ba/c358ccba0209db89c742e061896ba829.jpg

New files would be stored in similarly named directories which would effectively distribute files across a huge range of directories (avoiding issues with large numbers of files per directory).  The above example can store over four billion files with a maximum of 256 files per directory.

The other question is about image processing and, in particular, resizing.  I think that, for a number of reasons, it would be prudent to resize images on upload to a preset maximum size.  This will save storage and bandwidth.  

There's also the potential to generate and store thumbnail images and store them at the same time.  In other words:

 

Resized image path:  c3/58/cc/ba/c358ccba0209db89c742e061896ba829.jpg

Thumbnail path:  c3/58/cc/ba/thumb/c358ccba0209db89c742e061896ba829.jpg

 

or

 

Thumbnail path:  c3/58/cc/ba/c358ccba0209db89c742e061896ba829_thumb.jpg

 

 

Any thoughts on this would be appreciated.

 

 

Comments

This would be more than perfect for those who prefer markdown and image upload capability. +1 for this feature.
Please if you can design your software in a way that those who already are using markdown with some content on site can use this feature. Thank you very much.

---

That would be a little more involved. It would require reaching into the database to remove all of the images and store them in the file system.  Then you'd have to access the database again and search every single question, answer and comment for images and replace the links with new ones pointing to the files in the file system.  

It would be far easier to initially set it up so that any new questions, answers or comments use images stored in the file system and the old ones stay as they are.

I'll look into it as I move forward but I don't think I'll have the time to write the migration functions as a first release.  I need to get my site up and going and this is the only important feature I am waiting for before I launch it.  I could look into doing the migration tool later on.

---

I understand. Sure it must be quite an overhaul as you mention.
Let's forget migration and all issues for those already having content but if some way community can use it as 'Next' editor.
So after installing your editor we could then use images functionality from that point onwards or for fresh installation?.

---

I think that's the idea at this point.

---

Just to add: existing question from March 2012 about cache and blob-images, see also gidgreen's answer: http://question2answer.org/qa/13219/upload-images-instead-database-possible-recommended-ckeditor

---

Thanks, that's useful

---

Hi, martin. I'm interested in using this plugin. Have you made any further progress?

---

I got busy with another project which is nearing conclusion.  I hope to get back to this during the next few weeks.

Answer 1

How about simple resizing when picture is uploaded? Can this be achieved only with css if server side resizing is too much?

Sometimes users upload or link to picture with relatively large dimensions and thus it breaks the entire layout of that page, as seen in many forums.

Comments

Image resizing on upload is not a problem.

---

Hi Cessna, this can be solved by using CSS's max-width:600px;
However, the browser still needs to load the full image, then resizes it afterwards.

You can feel this slow speed when there are a couple of images. This slowness can be seen using my new plugin http://question2answer.org/qa/18768/

---

thank you echteinfachtv (Kai).