Dropzone / Image Upload - Admin

Overview & background This is a 2 part/function project based upon some characteristics of datatables editor and jquery file upload (database enabled). I'm decent with php/mysql but not so much with javascript. I need some help to finish the project. See: [login to view URL] I have messed with it enabling the mysql database. However it has some limitations: 1) As you upload many images the page can get extremely long and load slowly. 2) Other than by filename, there is no sorting mechanism. 3) There is no filter either search or dropdown type meaning it is challenging to locate images even if categorized. I also like DataTables Editor. [login to view URL] It is not designed as a versatile image uploader but has some nice editor features. 1) Sorting and row reordering 2) Pop-up editor Project Goal The goal is to take an uploader like [login to view URL] and adapt/configure it so it stores uploaded files in a mysql table and secondly to set up a popup editor so that you can edit image properties including titles, descriptions and categories, publish state. I have a sample image editing script. See my demo at: [login to view URL] . The only part working in the demo is using ajax to load images when selecting a category. Admin page structure: Drag/drag box at the top of the page. Can upload one to many images (many not vital) and probably configure an upper limit for size and some error messages. Output will be a square thumb, a single 800x800 image, and the uploaded image. They all get stored in separate subfolders perhaps /images/uploads/thumbs (120x120) /images/uploads/800x800 /images/uploads (originals) Displaying upload progress would be good. My preference for filenames is to rename all images upon upload to something like $datetime.$suffix - so yyyymmddhhmmssms.jpg. If adding milliseconds is not enough to ensure uniqueness upon upload then something incremental. Basic image info will go into the database: id: 123 basename: yyyymmddhhmmssms or yyyy-mm-dd-hh-mm-ss-ms (or an increment in place of ms) suffix: jpg[png,gif,jpeg] uploaded_name: original image name (but stripped of special characters) There should also be some error checking to ensure that malicious files cannot be uploaded as images. Once images are uploaded 120x120 thumbs will appear on the same page (something like Dropzone or jquery file upload) in an unprocessed image div. I have ImageMagick/convert code for resized images/thumbs. Image editor With each image, whether categorized or not you should be able to delete or edit the image in a popup editor like datatables. I have some php image editing scripts for parameters like title, description, tags, category, publish, etc. The textarea for description - it should be simple yet would be a plus to add some really basic formatting functions like inserting a link, bold, justification. See Summernote for simple. After you edit an image and add it to a category the image will no longer display in the Unprocessed images section. Processed images Processed images will now be available to display in the category div when you click on the Category function and with the same popup editor. Delete - when clicking to delete an image it will be dropped from the database and all variations of the image will get deleted. It should go away visually. Drag/drop image reordering - a bonus. Test the demo by clicking on categories. This could be smoother. Either a double-click on a category name should close it or clicking on a different category should close the one that is opened. The switch category function needs to be converted to a loop or maybe a variable to go through the categories (which will be stored in mysql) so that the #Results div is unique for each.