prepending images to existing images after image upload

Black Sulfur
Black Sulfur used Ask the Experts™
on
I have an image uploader and picker in a modal. When uploading images, the actual file name should be prepended with mt_rand() in order to prevent duplicate file names. The php part of the below code works fine as when I check the directory they were uploaded to, the files all have random figures in front of the file name. The problem though is that after the upload is complete, it prepends those images to the images already displaying in the file picker and those file names don't have the mt_rand() applied which results in file not found errors in console.

So, if the file is called cat.jpg and I upload, the file in the uploads directory is 723672365273cat.jpg but the image prepended with the jQuery is just cat.jpg and obviously that cannot be found in the directory because it doesn't exist. I don't know how to solve this issue. Any help would be greatly appreciated.

The html form:

<form method="POST" enctype="multipart/form-data">
 <input type="file" name="file[]" data-method="ajax" accept="image/*" data-maxfilesize="5000000" multiple>
</form>

Open in new window


The jQuery:

var lastId;
        $(document).ready(function(){
            $('input[type=file]').drop_uploader({
                uploader_text: 'Drop files to upload, or',
                browse_text: 'Browse',
                only_one_error_text: 'Only one file allowed',
                not_allowed_error_text: 'File type is not allowed',
                big_file_before_error_text: 'Files, bigger than',
                big_file_after_error_text: 'is not allowed',
                allowed_before_error_text: 'Only',
                allowed_after_error_text: 'files allowed',
                browse_css_class: 'button button-primary',
                browse_css_selector: 'file_browse',
                uploader_icon: '<i class="pe-7s-cloud-upload"></i>',
                file_icon: '<i class="pe-7s-file"></i>',
                time_show_errors: 5,
                layout: 'thumbnails',
                method: 'normal',
                url: 'ajax_upload.php',
                delete_url: 'ajax_delete.php',
            });

			$( "#drop_uploader_0" ).on( "file_upload_end", function( event, name) {
				lastId++;

			var str = '<div class="col-md-3 img-box">';
			str += '<input type="checkbox" id="image_' + lastId +'" name="pics[]" value="' + name + '" data-id="image_' + lastId +'" checked/>';
			str += '<label for="image_' + lastId +'" style="background-image: url(uploads/' + name + ')">';
			str += '<i class="glyphicon glyphicon-ok"></i>';
			str += '</label>';
			str += '</div>';
			$( "#gallery-body" ).prepend(str);
			$('a[href="#home"]').tab('show');
			$( ".save" ).show();
			$( ".ajax" ).empty();
			});
			});

Open in new window


The below is the ajax_upload.php

if(isset($_FILES['file'])) {
    $name = mt_rand().$_FILES['file']['name'];
    $type = $_FILES['file']['type'];
    $size = $_FILES['file']['size'];
}

$uploaddir = 'uploads';

if(isset($_FILES['file']['name'])) {
    $new_name = mt_rand().$_FILES['file']['name'];
    $uploadfile = getcwd().DIRECTORY_SEPARATOR.$uploaddir.DIRECTORY_SEPARATOR.$new_name;
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
        // ok
        $file_id = md5($uploadfile);
        // Store File id in session. We can delete file by this id from other script
        $_SESSION["drop_uploader_".$file_id] = $uploadfile;
        $_SESSION["drop_uploader_".$file_id."_name"] = $new_name;
        $_SESSION["drop_uploader_".$file_id."_type"] = $_FILES['file']['type'];
        $_SESSION["drop_uploader_".$file_id."_size"] = $_FILES['file']['size'];
        $success_message = $file_id;
    } else {
        $error_message = "Error while uploading file ".$_FILES['file']['name'];
    }
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
I suggest you in the server side (php) to check first if the name of the uploading file is exist at the directory.If exists then you have two choices.
1.Replacing the old with the new one (delete and write).
2. Sending an alert box at user to change the file name because it is already exists. At this case the upload procession is going to be abort.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Which jquery library are you using.

It looks like you not passing the $new_name though.

Personally, I wouldn't use a random number to make something unique. As a test, generate your random number 1000 times and see how many dupes you come up with.   It will be more than you thought.

If I am uploading an image that is tied to a database item, I may just use the database id in the file name in some fashion or look to see if the name is already on the server and if it is, then append a number, test to see if that is on the server and if not add 1 to the previous number until you have something unique. Or use your random approach, but just make sure to check that the file is not already on there and if it is, run another random number.

Commented:
Confused...the images are uploading and being saved with the prepended data fine but you are displaying the images (or links to) in the browser but you don't know the name of the prepended file name?
Because I don't see anything wrong with the uploading code...
For ease of use why not just prepend the saved filename with the timestamp within jquery before the upload (kinda like what Scott is saying with uniqueness)
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Author

Commented:
@ Scott, I am using jQuery 2.2.4, not sure if that is what you were asking?

Good point about the random number.

@ Nicholas, When the file is uploaded, it creates a new image name which I can see in the uploads folder. As mentioned if the original file I uploaded is cat.jpg, in the uploads folder it looks like 234523325cat.jpg for example. But, if I look in console at the prepended image, it still shows as cat.jpg

The problem is when I then insert data into the database it is saving that image as cat.jpg

So, when I go to the page that is meant to display these images they don't display because the actual file in the uploads folder is 234523325cat.jpg but the database record is cat.jpg
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
What I am getting at is it does not look like you are passing 234523325cat.jpg to the db.

Author

Commented:
@ Scott, I am passing the value of the checkbox to the database but it's the wrong name. It is the original file name instead of the new one.  I didn't include the code in the original question. Apologies.

I am doing it via ajax and the php code is:

$id = filter_var($_POST['id'], FILTER_SANITIZE_NUMBER_INT);
foreach($_POST['pics'] as $pics) {
			
			$stmt = $link->prepare("INSERT INTO `accom_pics` (`accom_id`, `pic_name`) VALUES (?, ?)");
			$stmt->bind_param("is", $id, $pics);
			$stmt->execute();
			$stmt->close();
		}

Open in new window

Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Look on line 11 of your php
$uploadfile = getcwd().DIRECTORY_SEPARATOR.$uploaddir.DIRECTORY_SEPARATOR.$new_name;

Open in new window

The new file location is $uploadfile and the new file name is $new_name.

If you want to use the $new_name in your updated html page, you need to output $new_name on your php page. Either in addition to or instead of $file_id for your success message. Once that is done, you can pick it up in your jquery and see it in your console. Currently it looks like you are only outputting $file_id  in your php processing page so there is no way your html page can grab the new name.

Author

Commented:
Thanks Scott. Apologies for the delay. Will try that as soon as possible, just not able to right now...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial