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

[criterion9]

I am not sure if I have understood the question. An ajax request can send GET or POST parameters, the same as a html form.

Does this answer your question?

I was correcting your incorrect statement from above:

Javascript cannot construct and send individual POST parameters, due to security reasons.

[AMS]

Yes, that is right, with javascript the files must be sent to the server side in order to be managed. The reason is that javascript cannot interact with the user filesystem, because of security reasons. If this would be possible, some malicious programmer could easily access every user filesystem, what could become terrible.

And that is the reason because the browsers don't have that technologies by default. If a user wish to install them, it is their responsibility.

[criterion9]

Yes, that is right, with javascript the files must be sent to the server side in order to be managed. The reason is that javascript cannot interact with the user filesystem, because of security reasons. If this would be possible, some malicious programmer could easily access every user filesystem, what could become terrible.

And that is the reason because the browsers don't have that technologies by default. If a user wish to install them, it is their responsibility.

I agree that Javascript cannot interact with the filesystem. I was saying your blanket statement that Javascript cannot manipulate individual POST elements was misleading and didn't want others to be confused.

[didier]

Hi AMS,

first af all, nice job

than, I'm not realy confident with JS. I understand the way the script is running but I really don't get how to do it with more uploads.
You reffer to the Iframe uploadedImage to show the preview but how can I upload more files and show all previews to the client??

thank you

[didier]

Reading this treath from A to Z, I saw you give the solution for the multiple uploads.

So I downloaded the two zip and try it.

It works fine just tne naming of the saved file give me some troubles. How can i make it to give a specific name, based on the client name and a number?

thank you

[hups]

hello great script but what must i do ?

i will not have keywords i will take this with the original name of the file

thanks

sorry for bad english

[SpitFire11]

Hi AMS,

Thanks for the great plugin. This is exactly what I am looking for. Btw I have try to modify the code to enable 3 type of images resize but am having some problem in doing it. Could any pls help me on this?

Thanks
Fire

[AMS]

Btw I have try to modify the code to enable 3 type of images resize but am having some problem in doing it. Could any pls help me on this?

Hi Fire,

I'm afraid I haven't understood the issue correctly. But if what you want is to give the possibility of selecting a resizing dimension, you should do it in html, and then pass the value to php.

This value should be used instead of "maxImageDimension", in the uploadImage.php file, in the statement:

$maxDimension = Configuration::$data['maxImageDimension'];

Hope it helps. If it doesn't, please, tell me.

[SpitFire11]

Hi AMS,

Thanks for the fast reply. Actually I am thinking of creating more images size, currently your plugin only created 2 type of size that is the 'Thumbnail' and the 'Medium' size. How could I do so if I need to create another size? That mean a total of 3 sizes 'Thumbnail', 'Medium' and 'Large'?

For your information, I have modify some of your code and successfully generated the 3 type size in the temporary folder but the 'Large' size just failed to be moved from the temp folder to the 'Large' folder when I save it. Pls refer to the 'function moveTempFileDescriptiveName' which I have modified as below.

public static function moveTempFileDescriptiveName($tempFilename, $keywords) {

$targetFilePathName = null;

$targetPath1 = Configuration::getPath('uploadsLarge');
$targetPath = Configuration::getPath('uploadsMedium');
$tmbTargetPath = Configuration::getPath('uploadsThumb');
$tempPath1 = Configuration::getPath('uploadsTempLarge');
$tempPath = Configuration::getPath('uploadsTempMedium');
$tmbTempPath = Configuration::getPath('uploadsTempThumb');

$tempFilePathname1 = $tempPath1 . $tempFilename;
$tempFilePathname = $tempPath . $tempFilename;
$tmbTempFilePathname = $tmbTempPath . $tempFilename;

if ($tempFilename && (file_exists($tempFilePathname)) && (file_exists($tempFilePathname1))
&& (file_exists($tmbTempFilePathname))) {

if(!file_exists($targetPath1)) {
mkdir($targetPath1, 0777, true);
}
if(!file_exists($targetPath)) {
mkdir($targetPath, 0777, true);
}
if(!file_exists($tmbTargetPath)) {
mkdir($tmbTargetPath, 0777, true);
}

$probablyUniqueFilename = self::getDescriptiveUniqueFilename(
$keywords, $tmbTargetPath, $tempFilename
);



$targetFilePathname = $targetPath . $probablyUniqueFilename;
$targetFilePathname1 = $targetPath1 . $probablyUniqueFilename;

if (file_exists($targetFilePathname)) {

// if the file already exists in the target path, it must be deleted
// or there will be an error when moving a file with the same name.
// Ideally, all the names are unique, and no file will be moved with
// the same name as another that already is there
unlink($targetFilePathname);
}
if ( ! rename($tempFilePathname, $targetFilePathname)) {
$probablyUniqueFilename = null;
}
elseif (file_exists($targetFilePathname1)){{

// read comment above for deleting the existing file
unlink($targetFilePathname1);
}
if ( ! rename($tempFilePathname1, $targetFilePathname1)) {
$probablyUniqueFilename = null;
}
}

else {
$tmbTargetFilePathname = $tmbTargetPath . $probablyUniqueFilename;
if(file_exists($tmbTargetFilePathname)) {
// read comment above for deleting the existing file
unlink($tmbTargetFilePathname);
}
if ( ! rename($tmbTempFilePathname, $tmbTargetFilePathname)) {
$probablyUniqueFilename = null;
}
}
}
return $probablyUniqueFilename;
}

Thanks again AMS for the great plugin.

Regards,
Fire

[AMS]

Hi Fire.

I have developed a new version of the plugin to support dynamic resizing groups. You can find it attached.

All you have to do now is to configure the variable $uploadData, in configuration.php.

It should work. I've tested it and everything was ok. If you notice any bug, please tell me.

Hope it satisfies your issue

[SpitFire11]

Hi AMS,

Thanks a lot, you'r the man. You solve my problem. So far everything work fine and it work like charm . I have another question

How can I change the $uploadFilenames name from the current one that using the 'Keyword' to something like

$uploadFilenames = microtime(true) . $sessionid; or something like

hash_file('sha256', $filePath)

We are actually working on an uploading site that we need to make sure all of the images file name stored in the folder must be unique to each other.

The last question would be how could I store the path for each of the uploaded and saved images to the mysql database.

Thanks a lot AMS. Million thanks

Regards,
Fire

[AMS]

Glad to be able to help

How can I change the $uploadFilenames name from the current one that using the 'Keyword' to something like

$uploadFilenames = microtime(true) . $sessionid; or something like

hash_file('sha256', $filePath)

We are actually working on an uploading site that we need to make sure all of the images file name stored in the folder must be unique to each other.

A unique filename is generate by the function uploadedFile.php > getDescriptiveUniqueFilename(). A filename is generated with the given keywords. Three of these keywords are randomly taken, and, if the filename already exists, a unique filename is generated with the temp filename that php generated to upload the file. The code is at the end of the named function:

$charactersCount--;
while ((file_exists($targetPath . $uniqueFilename))
      && (abs($charactersCount) < strlen($tempFilename)))
{
    $uniqueFilename = $keywordsString . '-' . substr($tempFilename, $charactersCount);
    $charactersCount--;
}

It is 99% secure, but if you want to improve the algorithm, the getDescriptiveUniqueFilename() function is the place.

The last question would be how could I store the path for each of the uploaded and saved images to the mysql database.

The insert.php script calls to UploadedFile::moveTempFilesDescriptiveNames() and stores the uploaded paths in the $savedImages array. You could then pass that array to a function that inserts the paths into a database.

Regards

[SpitFire11]

Hi AMS,

Thanks again for the great help. The insight and input will definitely assist us better to enable the function we looking for.

Thanks again AMS. I really don't know what to say further for your great help.

Appreciated mate!

Regards
Fire

[AMS]

Hi AMS,

Thanks again for the great help. The insight and input will definitely assist us better to enable the function we looking for.

Thanks again AMS. I really don't know what to say further for your great help.

Appreciated mate!

Regards
Fire

As already said: Glad to be able to help

[SpitFire11]

Hi AMS,

I did search for the syntax to pass the the $savedImages array to a function as per mentioned but I just couldn't find it. Could you help to show me a simple syntax to pass the array to a function.

Thanks again and sorry for my ignorance.

The insert.php script calls to UploadedFile::moveTempFilesDescriptiveNames() and stores the uploaded paths in the $savedImages array. You could then pass that array to a function that inserts the paths into a database.

Regards,
Fire