Resize, preview and upload an image with AJAX - Complete example

[bullseye2346]

Hi Bullseyes2346!

When you click the save button you call the insert.php file.
Inside the insert.php:

<?php

require_once('uploadedFile.php');

$imagesCount = $_POST['imagesCount'];

$images = array();

for ($i = 1; $i <= $imagesCount; $i++) {
    $images[] = $_POST['image' . $i];
}

$keywords = $_POST['keywords'];


$savedImages = UploadedFile::moveTempFilesDescriptiveNames($images, $keywords);

$imageSavingResult = implode(',', $savedImages);




    $q1 = "insert into tablename (images) values ($imageSavingResult)";

mysql_query($q1);

you just have to change the name of the table, and if you have a user ID yo need to indicate the id into the insert. Remember to connect to your db first.

Sorry for my english, i talk in spanish.

Muy bien gracias, Yo hablo español tambien. Yo tome una ruta diferente para guardar las imagenes en la base de datos. Utilizo la funcion encontrada en saved.php para buscar el valor de $images y salvarlo finalmente en la base de datos.

[bullseye2346]

Amigo AMS donde estas?

I know you have been busy. Please help me out with one last request. This about the preview images: Under every upload input a preview image appears. Is there a way I can have a second copy of the preview images appear somewhere else in the page but not with an upload input above? Hope this makes sense.

[MisterRoshi]

Here I place a function to update uploaded images with no loop.

It takes two arrays, one with the images comming from the form (which may contain some changes or not) and one with the images stored in database.

This two arrays are substracted in both ways, in order to get the new and the deleted images, which are set in the arrays $deletedUploads and $newUploads.

A last array, $totalUploads, gets the list of total stored images. You may return this array instead of $result, or pass it by reference as parameter. It is not used in this function for any purpose, if you don't need this array for anything, you may remove it from the function.

    private function updateUploads($uploads, $dbUploads) {

        $result = true;

        $totalUploads = array();

        if ($dbUploads) {
            $totalUploads = $dbUploads;
        }

        if ($uploads && $dbUploads) {
            $deletedUploads = array_diff($dbUploads, $uploads);
            $newUploads = array_diff($uploads, $dbUploads);
        }
        else {
            $deletedUploads = $dbUploads;
            $newUploads = $uploads;
        }

        if ($deletedUploads) {
            
            $totalUploads = array_diff($totalUploads, $deletedUploads);

            $result = $result && UploadedFile::deleteUploadedFiles($deletedUploads);

            $sql = 'DELETE FROM table'
                 . ' WHERE field IN ("' . implode('","', $deletedUploads) . '")';

            $result = mysql_query($sql) && $result;
        }

        if ($newUploads) {
            
            $newUploads = UploadedFile::moveTempFilesDescriptiveNames(
                    $newUploads, $this->getDescriptiveNameKeywords()
            );

            $totalUploads = array_merge($totalUploads, $newUploads);

            // Example: INSERT INTO tbl_name (a,b,c) VALUES(1,2,3),(4,5,6),(7,8,9);
            
            $preparedValues = implode('"),(' . $elementId . ',"', $newUploads);

            $sql = 'INSERT INTO table (element_id, field)'
                 . ' VALUES(' . $elementId . ', "' . $preparedValues . '")';

            $result = mysql_query($sql) && $result;
        }

        return $result;
    }

Hi AMS!!!

I use this code and works perfect, but i have a problem, for any reason the pics on the folders won't delete, only delete the names of db. I appreciate your help.

Thanks!!!

[AMS]

Hi AMS!!!

I use this code and works perfect, but i have a problem, for any reason the pics on the folders won't delete, only delete the names of db. I appreciate your help.

Thanks!!!

You have to pay special attention to the UploadedFile::deleteUploadedFiles() function.

I guess it'll be a question of rights. Check if you have delete rights for the image directory.

[MisterRoshi]

You have to pay special attention to the UploadedFile::deleteUploadedFiles() function.

I guess it'll be a question of rights. Check if you have delete rights for the image directory.

Many thanks AMS, i'm trying in localhost and i dont have folders permissions. I need to change something in the function deleteUploadedFiles?

[MisterRoshi]

You have to pay special attention to the UploadedFile::deleteUploadedFiles() function.

I guess it'll be a question of rights. Check if you have delete rights for the image directory.

Hi AMS, i think the problem is in the function getPath of configuration.php because if i put the path of the images folder, works fine.

Example:

    public static function deleteUploadedFiles($filenames) {

        $resultOk = true;

        foreach($filenames as $filename) {
            if ($filename) {
                $resultOk = $resultOk && self::deleteUploadedFile($filename);
            }
        }
        return $resultOk;
    }

    // ---------------------------------------------------------------------------
    /**
     * Delete the given uploaded file.
     *
     * @param string $filename
     * @return $resultOk
     */
    public static function deleteUploadedFile($filename) {

        $resultOk = false;

        $uploadPath = '../uploads/medium/';
        $tmbUploadPath = '../uploads/thumb/';

        if ( ! $filename) {
            $resultOk = true;
        }
        else {
            if (file_exists($uploadPath . $filename)) {
                if (unlink($uploadPath . $filename)) {
                    if (file_exists($tmbUploadPath . $filename)) {
                        if (unlink($tmbUploadPath . $filename)) {
                            $resultOk = true;
                        }
                    }
                }
            }
        }
        return $resultOk;
    } 

And if i try to delete more than one image, only delete the last one.

Many thanks!!!

[MisterRoshi]

Hi AMS! Well, i found the solution for non deleted files, in the function deleteUploadedFiles. Is necesary to remove "$resultOk = $resultOk &&" before self::deleteUploadedFile($filename); and work it!

But now i cant found a solution in configuration.php functions for the images path.

    public static function deleteUploadedFiles($filenames) {

        $resultOk = true;

        foreach($filenames as $filename) {
            if ($filename) {
                $resultOk = $resultOk && self::deleteUploadedFile($filename);
            }
        }
        return $resultOk;
    } 

Thanks!!!

[Vespa]

Great script AMS, exactly what I was looking for from weeks.
Just a request: is it possible to show the file name somewhere after selected the image? The most annoying issue in all upload image forms is that the long path to picture in the input area always hide the file name: you have to scroll the path to the right to check the filename.
One more thing: if I remove a selected image not yet saved, the path still stay in the input field, could it be removed?

[MisterRoshi]

Hi AMS! Now i have the form fully working and i add a form validator, but i have the last question. It is posibble to send the form without images? in my form the images are optional. I remove the "length" line in itemform.js - function validateData() - if (( ! $.uploaderPreviewer.loadedImages().length) and now i can send the form without images but i cant remove the alert message of no images added. Can you say me how to remove this alert message?

Many thanks!!!

[TomTom3]

Hello AMS!!!

Many thanks for this script, is perfect but only have one problem. The script dont work with form, if i use a <form></form> when i press submit button don&#180;t save the content. Any idea for me, how to repair? Is necesary a <form> to validate data.

Thanks for your help

[Jerome_ua]

Hi there

Does anybody can solve Tom's question?
Script is really great but it would be more great to use it with common <form></form> tags.

Or please describe how to make a full-sized form with several fields using script's workaround.
In its initial state there is only one "Other field:" which is transferring through GET request.

Regards

Hello AMS!!!

Many thanks for this script, is perfect but only have one problem. The script dont work with form, if i use a <form></form> when i press submit button don´t save the content. Any idea for me, how to repair? Is necesary a <form> to validate data.

Thanks for your help