File Upload - Image Resize and Saves in Image Folder

[jillianmarie]

Hey all, hoping to get this code solved.

 

I am building an image gallery for a client's website and wanted a way for the client to upload their own images from the back end and shows up on the website page for the pictures. I am using color box as the lightbox feature for the photos and on the webpage thumbnails are displayed in rows.

 

In the backend, I have the upload page and here is my form:

 

 

<form name="form" action="../uploader.php" method="POST"
enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="uploaded_file" id="uploaded_file">
    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" /><br />
    <input type="hidden" name="image_type" value="" /><br />
    
<input type="submit" name="submit" value="Submit">
<input type="hidden" name="MM_insert" value="form" />
</form>
 

From the admin upload page, the client can upload their image and it will save it into the "image/uploads/" folder. Here is the uploader.php script:

 

 

<?php
    
//Сheck that we have a file
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 1.4MB
  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
 
  if (($ext == "jpg") && ($_FILES["uploaded_file"]["type"] == "image/jpeg") &&
    ($_FILES["uploaded_file"]["size"] < 10485760))
    {
    
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/images/uploads/'.$filename;
      //Check if the file with the same name is already exists on the server
    
      
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "Upload Complete! ";
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["uploaded_file"]["name"]." already exists";
      }
  } else {
     echo "Error: File too big to upload";
  }
} else {
 echo "Error: No file uploaded";
}


?>
 

Now the website page will display all the images in the "images/uploads" folder and will update itself when new photos are uploaded.

 

Here is the gallery code from the website:

 

<div class="gallery">

 <?php
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
  $files = array();
  if($handle = opendir($images_dir)) {
    while(false !== ($file = readdir($handle))) {
      $extension = strtolower(get_file_extension($file));
      if($extension && in_array($extension,$exts)) {
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  return $files;
}

/* function: returns a file's extension */
function get_file_extension($file_name) {
  return substr(strrchr($file_name,'.'),1);
}

/** settings **/
$images_dir = 'images/uploads/';
$images_per_row = 5;

/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
  $index = 0;
  foreach($image_files as $index=>$file) {
    $index++;
    echo '<a href="',$images_dir.$file,'" class="photo-link group1" rel="uploads"><img src="timthumb.php?src=',$images_dir.$file,'&h=150&w=150" /></a>';
    if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
  }
  echo '<div class="clear"></div>';
}
else {
  echo '<p>There are no images in this gallery.</p>';
}

 ?>


</div>
 

With the help from timthumb.php and timthumb-config.php I am able to produce the thumbnails for the website. Once clicked, brings up the colorbox feature for the image slideshow.

 

For some reason, this code only can use image sizes under 1500px. How can I upload a bigger image and resize it to save itself into the "images/uploads/" folder to be under 1500px?

 

Please look at my codes and let me know where and what code I need to produce the resized image.

 

 

Thanks!

 

[jazzman1]

The server does not care about the px of the image only from file size.

 

Check that values in the php.ini file:

 

file_uploads = On

upload_max_filesize = 2048M

max_file_uploads = 2M

post_max_size = 2048M

[PaulRyan]

@Jazzman, you have no clue what you're talking about.

 

@Jillianmarie, you want to look into getimagesize and use it on the uploaded image to check its dimensions, then if the image is too large, you will need to re-size it. You can Google some tutorials on how to do the re-sizing, and the come back if you get stuck with it.

[jazzman1]

@Jazzman, you have no clue what you're talking about.

 

Really?

 

What do you want to say me, that the server does care of the image dimensions?

Edited April 2, 2013 by jazzman1

[PaulRyan]

Yes really, you obviously didn't read the question properly.

He wants larger images to be re-sized to 1,500px or less to work in the image slideshow.

[jazzman1]

 

He wants larger images to be re-sized to 1,500px or less to work in the image slideshow.

 

Yes, that's true.....but before to start that process the image has to be uploaded into the server.

[PaulRyan]

That is correct, but the OP didn't state an issue with the actual upload. He/she stated an issue with the image dimensions.

[jazzman1]

Ok, you are English, so tell me how you understand that question?

 

How can I upload a bigger image and resize it to save itself into the "images/uploads/" folder to be under 1500px?

[PaulRyan]

"How can I upload a bigger image and resize it" - Take note of the red text.

[jazzman1]

"How can I upload a bigger image and resize it" - Take note of the red text.

 

Yes, because he doesn't understand how php works, the same like you (I don't be rude)

 

Don't forget - php is a server side language and need to follow the rules of the server before doing anything with javascript. 

[PaulRyan]

I think you'll find I do understand PHP, you just don't understand English fully.

 

He first has to upload the image, via a form (He doesn't have a problem with this, otherwise he'd have said so)

Secondly, he wants to re-size any image that is above 1,500px, so it will work with his image slideshow (This is where he is stuck)

 

You also don't understand JavaScript, you can't re-size an image using JavaScript. You can make it look smaller, but you can't physically change it's dimensions.

You need to use PHP to find the ratio of how to scale the image, then save the image in the correct dimensions (All done by PHP)

Edited April 2, 2013 by PaulRyan

[KevinM1]

Less bitching at one another, more helping the OP.

[jazzman1]

Kevin, you are right

 

Hey Paul, sorry buddy...my apologies.

[PaulRyan]

Less bitching at one another, more helping the OP.

 

Bitching? Where? Just a friendly debate. I gave the OP some advice on an earlier post I believe.

[cpd]

You also don't understand JavaScript, you can't re-size an image using JavaScript. You can make it look smaller, but you can't physically change it's dimensions.

You need to use PHP to find the ratio of how to scale the image, then save the image in the correct dimensions (All done by PHP)

 

I beg to differ. Its now possible to re-size images client-side by using the new "canvas" element ^[1][2][3]. A completely new image! I tried it myself when playing around with HTML5. Moreover, PHP creates an entirely new image when you use GD; it doesn't manipulate the image stored on the file system as you appear to think, but instead manipulates a copy created from the actual image.

 

^[1] Pascal Helfenstein. Resizing images with Javascript. http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html

^[2] Mozilla.org. How to develop an HTML5 image uploader. http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

^[3] Andrea Giammarchi. 100% Client Side Image Resizing. http://webreflection.blogspot.co.uk/2010/12/100-client-side-image-resizing.html

Edited June 8, 2013 by cpd