specify file name on upload image on form

Question

hello am building a form that uploads images, it works correctly, but i want to add something extra, to be able to specify what the image would saved as. this is what i have, code snippet

<?php

//upload.php

$output_dir = "uploads/";

if(isset($_FILES["myfile"]))

{
    //Filter the file types , if you want.

    if ($_FILES["myfile"]["error"] > 0)

    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";

    }
    else
    {
        //move the uploaded file to uploads folder;
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);

     echo "Uploaded File :".$_FILES["myfile"]["name"];
    }

}
?>

HTML:

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{

    var options = { 
    beforeSend: function() 
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function() 
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response) 
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

}; 

     $("#myForm").ajaxForm(options);

});

</script>
</body>

</html>

Can you post the code here please. Just change `$_FILES["myfile"]["name"]` in `move_uploaded_file` to what you want it to be. — putvande, Jan 23 '14 at 14:06
ok ill try that, but is it also possible to specify the the format in which it shud be saved, e.g jpg,orpng @ putvande — user3215045, Jan 23 '14 at 14:12

Funk Forty Niner · Accepted Answer · 2015-06-03T16:00:42.123

Give this a try, however you'll need to do some work on certain validation.

It uses a form input <input type="text" name="upload_name"> to give it a custom name.

Tested

HTML form

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">

Name it: 
<input type="text" name="upload_name">

<br>
     <input type="file" size="60" name="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{

    var options = { 
    beforeSend: function() 
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function() 
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response) 
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

}; 

     $("#myForm").ajaxForm(options);

});

</script>
</body>

</html>

PHP

<?php

$upload_name = $_POST['upload_name'];

$idx = strpos($_FILES['myfile']['name'],'.');
$ext = substr($_FILES['myfile']['name'],$idx);

$file_name = $upload_name . $ext;

$output_dir = "uploads/";

if(isset($_FILES["myfile"]))

{
    //Filter the file types , if you want.

    if ($_FILES["myfile"]["error"] > 0)

    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";

    }
    else
    {
        //move the uploaded file to uploads folder;

//        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);

//     echo "Uploaded File :".$_FILES["myfile"]["name"];


 move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$file_name);

 echo "Uploaded File :" . $file_name;

    }

}
?>

Footnotes:

Link to their project page http://malsup.com/jquery/form/ where you can download all the files, rather than fetching the JS from their website.

good, works like charm, one more questions, i would like to convert all other formats of images uploaded to jpg, so i would only have images with jpg extensions, is that possible regards. — user3215045, Jan 23 '14 at 14:43
Great, glad you like it. Yet, I don't quite understand what you mean; it's the "convert" part that I don't quite get. Can you elaborate on that? @user3215045 — Funk Forty Niner, Jan 23 '14 at 14:45
ok, i want a situation when a png picture is uploaded and my form/upload function converts it to jpg extension forcefully, just like wen a picture is uploaded on a facebook feed, its automatically coverted to jpg, do u get that now — user3215045, Jan 23 '14 at 14:50
Ah ok. Well that part I've never had to deal with before. I believe this answer on SO will explain it better http://stackoverflow.com/a/14431437/1415724 --- You can further your research from what I found after Googling with these keywords "convert png to jpg upload file php", where I found many results. --- I hope this helps. @user3215045 — Funk Forty Niner, Jan 23 '14 at 14:52
You're welcome, always a pleasure to help, cheers. @user3215045 — Funk Forty Niner, Jan 23 '14 at 14:57

specify file name on upload image on form

1 Answers1

HTML form

PHP