Question

I am new to JQuery and i would say i know nothing in that. I wanted to develop a little image uploader involving AJAX. I got this piece of code from google and i got it working. Now i have to use a random image name while uploading the file. The code i have is uploading with the file name of the image itself. I really don’t know where to look at to change the file naming concept. So i decided to trace down from where it starts. Can you guys help me narrow down the issue ? So i will learn some JQuery as well. Here is the code.

$(function(){
    $('#swfupload-control').swfupload({
        upload_url: "upload-file.php?p_id=<?php echo $prod_id; ?>",
        file_post_name: 'uploadfile',
        file_size_limit : "1024",
        file_types : "*.jpg;*.png;*.gif",
        file_types_description : "Image files",
        file_upload_limit : 5,
        flash_url : "js/swfupload/swfupload.swf",
        button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
        button_width : 114,
        button_height : 29,
        button_placeholder : $('#button')[0],
        debug: false
    })
    .bind('fileQueued', function(event, file){
        //alert(file.name);
        var listitem='<tr class="r1" id="'+file.id+'" >'+
            '<td>&nbsp;</td>'+
            '<td><span class="filename"><em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) </span>'+
            '<span class="progressvalue" ></span>'+
            '<div class="progressbar" ><div class="progress" ></div></div>'+
            '<p class="status" >Pending</p></td>'+
            '<td>&nbsp;</td>'+
            '<td><span class="cancel" >&nbsp;</span></td>'+
            '</tr>';
        $('#log').append(listitem);
        $('tr#'+file.id+' .cancel').bind('click', function(){
            var swfu = $.swfupload.getInstance('#swfupload-control');
            swfu.cancelUpload(file.id);
            $('tr#'+file.id).slideUp('fast');
        });
        // start the upload since it's queued
        //alert(this.getAttribute("id"))
        $(this).swfupload('startUpload');
    })
    .bind('fileQueueError', function(event, file, errorCode, message){
        alert('Size of the file '+file.name+' is greater than limit');
    })
    .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
        $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
    })
    .bind('uploadStart', function(event, file){
        $('#log tr#'+file.id).find('p.status').text('Uploading...');
        $('#log tr#'+file.id).find('span.progressvalue').text('0%');
        $('#log tr#'+file.id).find('span.cancel').hide();
    })
    .bind('uploadSuccess', function(event, file, serverData){
        var item=$('#log tr#'+file.id);
        var content = '<td><img src="images/ProductImages/'+file.name+'" width="50" height="50"/><td/>'
            +'<td>'+file.name+'</td> <td style="text-align: center;">'
            +'<input type="checkbox" value="'+file.name+'" name="main" onClick="update_chk(this.value);"/></td>'
            +'<td>Delete</td>';
        item.html(content);

    })
    .bind('uploadProgress', function(event, file, bytesLoaded){
        //Show Progress
        var percentage=Math.round((bytesLoaded/file.size)*100);
        $('#log tr#'+file.id).find('div.progress').css('width', percentage+'%');
        $('#log tr#'+file.id).find('span.progressvalue').text(percentage+'%');
    })

    .bind('uploadComplete', function(event, file){
        // upload has completed, try the next one in the queue
        $(this).swfupload('startUpload');
    })

});
function update_chk(value){
    document.getElementById("main_name").value = value;
}

Answer 1

What is the server side technology you using for fileupload, PHP, Java? On server side you can generate a random string and use it as fileame instead of the default one.

For example in PHP one would do:

// Where the file is going to be placed
$target_path = 'uploaded_files/';

/* Add the original filename to our target path.
Result is "uploaded_files/filename.extension" */
$target_path = $target_path . basename(md5($_FILES['file']['name'])); 

if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['file']['name']).
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}