Drag and Drop - Upload Image on website form
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Simple.

I need user to be able to drag and drop an image, have the webpage upload it, show upload progress while it is uploading, and photo thumbnail of uploaded image once it is finished.

I need the frontend coded in js and backend coded in php.

Requirements:

  • Support uploading just one image (not more).
  • Security: do not permit user to upload non-images or files bigger than 10mb.
  • After preview is shown, confirmation button must be clicked to proceed with upload.
  • After confirmation button is clicked, path of uploaded image must be returned as a result of upload.

You can use ANY libraries. Suggestions: http://www.dropzonejs.com/

Provide full working implementation of frontend+backend.

Php 5.6

awarded to Zhopon

Crowdsource coding tasks.

1 Solution

Winning solution

As per your suggestion i have used Dropzonejs and implemended all your requirements, this is full working implementation of frontend+backend.

Here is my working code: check it right here: https://goo.gl/GQuXLh (With PHP & Folder)

Here's my live solution https://codepen.io/zhopon/pen/XMMxQd (For html and js , PHP will not work)

In upload.php (use the following code)

<?php
//for ensuring the name has no weird characters
function clean_image_name($file_name){
//get image extension
$image_ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$image_ext = "." . $image_ext;
//remove image extension
$file_name = str_replace($image_ext, '', $file_name);

// replace non letter or digits by -
$file_name = preg_replace('~[^\\pL\d]+~u', '-', $file_name);
// trim
$file_name = trim($file_name, '-');
// lowercase
$file_name = strtolower($file_name);
// remove unwanted characters
$file_name = preg_replace('~[^-\w]+~', '', $file_name);
$file_name = $file_name . $image_ext;
return $file_name;
}

if (!empty($_FILES)) {

$response = array();
$targetDir = "uploads/"; //your upload path
$website_url = "http://example.com/"; // your website path.

$fileName = clean_image_name($_FILES['file']['name']); //file name
$uploaded_file_size = $_FILES['file']['size']; //file size in bytes
$uploaded_file_type = $_FILES['file']['type'];//file mimetype
$allowed_file_type = array("image/jpeg", "image/gif", "image/png", "image/bmp"); //allowed mimetype
$allowed_size = 10000000; //10 mb in bytes

//extra security if someone messes with dropzone scripts, check file type and max size
if (in_array($uploaded_file_type, $allowed_file_type) && $uploaded_file_size <= $allowed_size) {
    //create targetpath
    $targetFile = $targetDir . $fileName;

    //upload the image here
    move_uploaded_file($_FILES['file']['tmp_name'], $targetFile);

    $response['image_url'] = $website_url . $targetFile;
    $response['status'] = 'Successfully uploaded';

} else {
    $response['status'] = 'Sorry only image allowed , with max size of 10Mb ';
}
} else {
$response['status'] = 'No image to be uploaded';
}

$response = json_encode($response);
echo $response;
?>

Ps: don't forget to create a folder named "uploads" & change $website_url with your website URL.

Where to create the "uploads" folder? Thanks
georgefountain 12 days ago
Create a folder "uploads" in the directory of your index.html .let me know if you need a copy of this setup .
Zhopon 12 days ago
Thanks. Could you please add the "security" part on the server side? Ensure the name has no weird characters and file is an image? Thanks
georgefountain 12 days ago
What about returning the url to uploaded file? Thanks
georgefountain 12 days ago
Ok, i will add the "security" part on the server side and Ensure the name has no weird characters and file is an image.
Zhopon 12 days ago
sorry i didn't worked on that, will ping you once its done.
Zhopon 12 days ago
Thanks! I'll wait
georgefountain 12 days ago
I have updated , the code as per our conversation. kindly check and let me know if i missed something,
Zhopon 12 days ago
Georgefountain did you check my solution?
Zhopon 9 days ago
Thanks Zhopon! The solution looks perfect! I 'll be testing it and awarding the bounty to you. Great job and thanks again :)
georgefountain 9 days ago
Thanks I'll be waiting
Zhopon 9 days ago