CodeIgniter Forums

Full Version: uploading and using images
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5

El Forum

[eluser]Dan Tdr[/eluser]
Hey there,
i was thinking if you guys could help me out with something..
I want to be able to upload a picture on my web server and put the file location in my database.(also renaming the uploaded images to something like thumb_1/2/3 would be something useful)
basically i have a profile and i want to upload a photo to it. the database should contain something like : id, username, password, email, user_photo.
i took the uploading files example from the code igniter user guide( file upload ) but i still don`t know how to put the picture in the database of the person that is editing his profile.

oh and one more thing.. it would be very useful if you would know how to make it even more intresting:
in the edit profile page we could have 2 fields for picture uploading.. one for avatar and another one for the profile pictures

hope i expressed myself clear enough so that someone could help me..
thanks,
Dan

El Forum

[eluser]textnotspeech[/eluser]
As far as storing an image in a database, most people store the "image_name.ext" in the database and then generate a link from the query. Conversely you could store the "path/to/image/image_name.ext" but this could cause problems if you change the directory architecture. There is a way to store binary info in a database but I've never come across a reason to use this.

As far as appending "_foo" to your image names I can give you my handy little append function:

Code:
// Takes two arguments, the image file name and the string you wish to append before the extension. ie. append("my_picture.jpg", "_thumb")
// NOTE: if you pass in a four letter extension other than .jpeg, this function will fail.
function append($filename, $append)
        {
            $imagename = substr($filename, 0, -4); // extract the image name
            $extension = substr($filename, -4); // extract the extension
            // Not all image extensions are created equal, we're expecting a 3 letter extension so if we get a .jpeg extension, let's convert it
            if($extension == "jpeg")
            {
                $imagename = substr($imagename, 0, -1);
                $extension = '.jpg';
            }
            $extension = strtolower($extension); // I like uniform lowercase file extensions
            $new_filename = $imagename.$append.$extension; // put the filename string together
            return $new_filename;
        }

As for how you associate that image with a user completely depends on your model, the short answer however is: "by user id". If you want to get fancy with filenames, you could use this function that will append or prepend strings to your filename:

Code:
// Takes three arguments, the image file name, the string you wish to append or prepend and the mode (default is append).
// To prepend a string: pend("my_picture.jpg", "pre_", TRUE)
// NOTE: if you pass in a four letter extension other than .jpeg, this function will fail.
function pend($filename, $string, $prepend=FALSE)
        {
            $imagename = substr($filename, 0, -4); // extract the image name
            $extension = substr($filename, -4); // extract the extension
            // Not all image extensions are created equal, we're expecting a 3 letter extension so if we get a .jpeg extension, let's convert it
            if($extension == "jpeg")
            {
                $imagename = substr($imagename, 0, -1);
                $extension = '.jpg';
            }
            $extension = strtolower($extension); // I like uniform lowercase file extensions
            
            $new_filename = $prepend ? $string.$imagename.$extension : $imagename.$string.$extension; // put the filename string together based on the mode
            
            return $new_filename;
        }

Hope that helps!

El Forum

[eluser]M4rc0[/eluser]
This is exactly what i want, maybe we can help each other here Dan.

I've read the whole documentation and it's not clear how to save on database and display it later.

Before saving to database or uploading the picture (photo or avatar, w/e), the filename should always be renamed, that should be standard on the library imo. So my first question was how to rename the picture before uploading, upload and then save the path/filename to database so i could display later.

Looks like the first proccess is here, Thanks for sharing that code textnotspeech!
I want to rename the whole filename, not just pend or append (append only for thumb).
So i've done some change in your code, correct me if i'm wrong:

Code:
function rename_file($filename, $new_name)
        {
            //$imagename = substr($filename, 0, -4); // extract the image name
            $extension = substr($filename, -4); // extract the extension
            // Not all image extensions are created equal, we're expecting a 3 letter extension so if we get a .jpeg extension, let's convert it
            if($extension == "jpeg")
            {
                //$imagename = substr($imagename, 0, -1);
                $extension = '.jpg';
            }
            $extension = strtolower($extension); // I like uniform lowercase file extensions
            $new_filename = $new_name.$extension; // put the filename string together
            return $new_filename;
        }

So either i want to generate a random hash or a custom name (such as id+date or something) i call that function and i have what i want.

Now the question is, where do i put my new name on do_upload ? There isn't any parameter for filename. How did you do it textnotspeech ?

Could it be like this maybe?
Code:
$myname = rename_file([i]what goes here?[/i],$this->post('name'));
$config['new_image'] = '/path/'.$myname;

EDIT: Right, and what about the thumbnail new name? It should be $new_name.'_thumb'.$extension; If i add that on the function above (with a case for thumb), where will i add this new_filename for the thumb?

Thanks Big Grin

El Forum

[eluser]textnotspeech[/eluser]
Well, this is a different situation than I thought. Personally, I don't use the upload helper.
I would use the standard PHP move_uploaded_file function. If you do this, you can name the file anything you want as the "destination". You would use the destination variable in the SQL to save the path to the database.


You can just including the full path/to/filename.ext in the upload_path of the config array if you want to use the CI library.

Or, you could modify the $_FILES['userfile']['name'] to do what you want and then call the do_upload() function.

El Forum

[eluser]M4rc0[/eluser]
Okay, so for uploading i have a few options to try.
I think i'll try $_FILES together with do_upload() somehow.

So i can rename, upload and save to database.

My last (hopefully) question is about the image lib.
I don't get how am i suppose to use resize() with a file image i've got from $_FILES.

I don't like to make the user to use photoshop to resize his image and then upload.
It should accept the image (valid extension and size) and the app do the rest (resize,rename,upload,save,..).

The image lib sounds perfect for this BUT, it only shows how to resize the image after uploading?

The documentation mentions:
Code:
$config['source_image'] = '/path/to/image/mypic.jpg';

What if i want to use the image lib with the image i have on the file field?

El Forum

[eluser]M4rc0[/eluser]
textnotspeech, i believe the image library can do that!

Quote:$config['new_image'] = '/path/to/new_image.jpg';

Notes regarding this preference:
* If both the path and image name are specified it will placed in its own destination and given the new name.

So i can concatenate like $config['new_image'] = '/path/'.$new_name.$ext;

I'm really excited in trying this but i'm having trouble with the path..
I'm using /public/images for images, wich reside outside /system, so how can i fix this?

After this i believe this topic is nailed, since the image library resize,rename and also take care of the upload!
That leaves only the "save image path to db" wich is easy!
What is the path in my case?

El Forum

[eluser]Dan Tdr[/eluser]
hey M4rc0.. i have a question... could you help?
in the upload library file we have something we may use.. but i don`t know hot to get the variable from there..

with the basic upload function found in the user guide from here : http://ellislab.com/codeigniter/user-gui...ading.html

after you sucesfully uploaded a file you get the following page with some data we could use:

Code:
<html>
<head>
<title>Upload Form</title>
</head>
<body>

<h3>Your file was successfully uploaded!</h3>

<ul>
<li>file_name: wc4.jpg</li>
<li>file_type: image/jpeg</li>
<li>file_path: E:/xphpx/xampp/htdocs/clasa/uploads/</li>

<li>full_path: E:/xphpx/xampp/htdocs/clasa/uploads/wc4.jpg</li>
<li>raw_name: wc4</li>
<li>orig_name: wc.jpg</li>
<li>file_ext: .jpg</li>
<li>file_size: 13.55</li>
<li>is_image: 1</li>
<li>image_width: 320</li>
<li>image_height: 301</li>
<li>image_type: jpeg</li>

<li>image_size_str: width="320" height="301"</li>
</ul>

<p><a href="http://localhost/clasa/index.php/upload.html">Upload Another File!</a></p>

&lt;/body&gt;
&lt;/html&gt;

so i found from were this info is outputed.. it`s from the Upload.php file in libraries
Code:
// --------------------------------------------------------------------
    
    /**
     * Finalized Data Array
     *    
     * Returns an associative array containing all of the information
     * related to the upload, allowing the developer easy access in one array.
     *
     * @access    public
     * @return    array
     */    
    function data()
    {
        return array (
                        'file_name'            => $this->file_name,
                        'file_type'            => $this->file_type,
                        'file_path'            => $this->upload_path,
                        'full_path'            => $this->upload_path.$this->file_name,
                        'raw_name'            => str_replace($this->file_ext, '', $this->file_name),
                        'orig_name'            => $this->orig_name,
                        'file_ext'            => $this->file_ext,
                        'file_size'            => $this->file_size,
                        'is_image'            => $this->is_image(),
                        'image_width'        => $this->image_width,
                        'image_height'        => $this->image_height,
                        'image_type'        => $this->image_type,
                        'image_size_str'    => $this->image_size_str,
                    );
    }
so we just need to get the file name or path.. i suggest we get the 'file_name' and store it into the database then when you want to display the image you could use something like :
[code]
&lt;?php
$upload_dir='uploads/' // your upload folder
foreach ($user_profile as $field=>$profile){?&gt;
<img src="&lt;?=base_url().$upload_dir.$profile?&gt;" />
&lt;?php } ?&gt;

i know this would work.. but i don`t know how to get if from the library.. and how to store it into the database.. could you guys help?

El Forum

[eluser]M4rc0[/eluser]
Hi Dan,

You can get all those upload parameters you mentioned with $this->upload->data()['parameter'];

Check the array example in the end of "File Uploading Class" documentation with the data() function.
What you want is [full_path] so:

Code:
$full_path = $this->upload->data()['full_path'];

I see you are using a separate form to upload the picture, all you have to do is pass the path paramater to save on db:

Code:
$this->My_model->insert_picture($full_path);

On your My_model you would have something like this:
Code:
(...)
function insert_picture($full_path)
{
  $this->your_db_field = $full_path;
  $this->db->insert('your_table',$this);
}
(...)

This is one example, just making things clear for you. Do as you want (there's probably a better way).


I was happy with my solution above until i've found out that i STILL need to have the file already uploaded in the destination.

I just wish i could use the image_lib to rename and upload like it does but with my file field..
It looks like i'll have to upload and only then rename&resize;, wich sounds redundant but possible. With raw php you can get the file, rename on the fly, resize and then upload.

Is that how you did Dan?
I see you are not renaming the images. But are you uploading and then resizing?

El Forum

[eluser]textnotspeech[/eluser]
I couldn't remember if the image library would use the image name in the upload path parameter. Disregard using the $_FILES to rename. To go back a folder you would use "../". For example, if you have your site in a subfolder like www/site/, to get to the www folder you would use ../ to go up one directory to the www folder. You can use as many ../ as you need to reach the folder you need. My only experience is with *nix servers so if you're using IIS, I'm not sure if it's the same.

El Forum

[eluser]M4rc0[/eluser]
textnotspeech,
I've fixed my problem setting a base href on my template:

&lt;base href="http://localhost/project/" /&gt;

So on the path i can just put public/images Smile

I'm gonna use the redundant CI way. Upload the wrong thing and only then fix it.
So i'm going to upload the image and then rename/resize with the image already there.

It's uploading successfully now. With rename i gave up and i'm gonna use encrypt_name TRUE on the upload class. That solves things a bit since it's a random hash name.

Now i'm trying the resizing.

I'm still testing and i'll post my results.

Dan, The code i posted above to get the data doesn't work.
I'm doing this and it's working:
$img_data = $this->upload->data();
now what you want is in $img_data['full_path'];

The rest is the same.
Pages: 1 2 3 4 5