Wordpress type image upload

Posted on 2016-11-03
Last Modified: 2016-11-03
I am not using Wordpress for my current project but when I have used it before I really liked the way it uploads images and manages the uploads. Is there anything similar for download that you can "plug in" to php?

I liked this but there is no ability to delete the image once uploaded:
Question by:Black Sulfur
  • 5
  • 3
  • 2
LVL 108

Expert Comment

by:Ray Paseur
ID: 41872746
This expert suggested creating a Gigs project.
I set up a demonstration of DropZone.js and found that it worked just fine, as far as it goes.  It just lets you drag-and-drop images, and it triggers an upload script.  Poof, the image arrives on your server.  The ability to download or delete an image from the server is a whole different application.  Here are some of the questions that would need programmatic answers for such an application to be viable.

1. Who is allowed to delete images?  
2. How will they be authenticated?
3. Should there be an "un-delete" function?
4. Who is allowed to download images (authentication again)?
5. Will uploaded images have a public-facing URL?

Executive summary: This might be a good one for E-E Gigs.

Author Comment

by:Black Sulfur
ID: 41872764
Thanks, Ray

What I meant about deleting is that in Wordpress you can select a featured image by either uploading or selecting from your library. Then if you aren't satisfied you can just click to remove that image.

With drop zone you can upload the image and it shows you the image. But if I change my mind there is no option to remove it and choose another one.

Something like this:

But I am struggling to customize it.

Author Comment

by:Black Sulfur
ID: 41872767
To answer your questions:

1. Only the site administrator can upload images
2. They will log into their dashboard/admin area to perform uploads when adding a product
3. Not concerned about an undelete function
4. The images aren't really for download, just to display with the product details
5. I am not too sure what this means?
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 41872807
This expert suggested creating a Gigs project.
#5 seems to be answered by #4.  If they are to display product details, you'll want to be able to create HTML <img> tags.  These tags contain a URL in the src= attribute.

Have you tried using dropzone to overwrite images?  If it will overwrite images (and I think it will, depending on the PHP script that is used for file uploads) you might be able to have a "no image available" PNG file or something like that to overwrite the images you want to remove.

I'm asking this because server-side image management is not a question with an answer - it's a project that would be customized in the context of your application.  I still think this is a good place to look to E-E Gigs for some hands-on help.  You can get an explanation of the design strategies from the expert you hire for the gig.

Author Comment

by:Black Sulfur
ID: 41872817
I would be open to the idea of hiring an expert. But the only problem is that I don't have much of a budget and what I am asking for is probably not going to come cheap.

I basically want a wordpress "clone" with regards to how it works on the front end for uploading images and allowing you to enter alt tags and set a featured image and choose more images per product. I don't know what it's doing on the backend though.
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

LVL 51

Accepted Solution

Julian Hansen earned 250 total points
ID: 41872918
Dropzone is a good option - handling the delete aspect is relatively straight forward.

You should be able to do this with a bit of coaching. There should be a few samples out there using Dropzone and PHP that can get you started.

An image gallery is a fairly straight forward bit of code. You have a loop that builds a list of images (either from a database or from the file system). This can be a simple <ul> list with links bound to jQuery event handlers (Are you sure you want to delete this image) - AJAX call back to server with image ref. PHP code removes the image and sends back the updated list.

If I were you given the inroads you appear to have made - jump in the deep end and give it a go.

Author Comment

by:Black Sulfur
ID: 41872959
Perhaps I should just spend some more time with this:

It has the delete function right out of the box, well to delete the file anyway. There are additional steps to make this talk to the database.

@Julian, you make it sound so easy! :)

To be honest, this uploading files and trying to store in database and trying to integrate with adding of a product is melting my brain. I think a good nights rest and trying again tomorrow will be better.

I am pretty sure I will have a lot of questions :P
LVL 51

Expert Comment

by:Julian Hansen
ID: 41872984
I have used both BlueImp and Dropzone - I prefer the latter.

As with anything in code - break it up into bits. Solve each bit on its own - the solution will follow.

Author Closing Comment

by:Black Sulfur
ID: 41873411
I think I am going to try as Julian has suggested and take it little bit by little bit. If end up tearing my hear out I might have to sell some stuff to try get an EE expert gig going.
LVL 51

Expert Comment

by:Julian Hansen
ID: 41873435
Good choice - you should find that after taking that initial step and getting in to it - you find your way.

Good luck with it.

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now