A script to automatically rename a file after it's saved to the local computer?

Question

I want the user of my page to :

1. browse a movie file from his local computer
2. get an image from the movie he just input it in step 1
3. name the image file exactly the same with the movie file name
4. upload to the server this image file

Thanks to the link from codepen here, I can pass step 1 and step 2 above.

(Please have a look to the link above for the complete codes), The HTML :

<p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p>

<div></div>

So, I copy/paste the codes to my page. After this I can just go to the next steps "manually" by telling the user to

• (3a) right click the image and choose "Save image as..."
• (3b) rename the file in the "Save image as" dialog box exactly the same with the movie file name and put a .jpg extension instead of the default one which is .png
• (3c) from the form I provide, browse his local computer and select this jpg file
• (4) push the "Submit" button to upload the jpg file to the server

Suppose I'm the user, I click the "Browse" button and select SinCity.mp4 movie. Then I saw the page showing a still image from the movie. Without doing 3a, 3b and 3c, I just click another button - which is the "Submit" button to upload SinCity.jpg

My question is : will it be possible to "auto" step 3 so the user doesn't have to do 3a, 3b and 3c ?. I mean the process of 3a 3b 3c are taken over by a script. If possible, would somebody help me for the script ?

FYI, my page is in .php extension file.

Thank you in advanced.

=====================================================================

EDIT : I found the answer. Thank you to all user who submit a codes in the internet and thank you also to Douwe de Haan who help me on how to do it. I'm sorry since I can not put more than two links in my post, I will just copy/paste the codes which come from 3 different sources, in case there is someone who face the same case with me.

First, the CSS :

div {
  line-height: 200px;
}

img {
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

@supports (object-fit: cover) {
  img {
    object-fit: cover;
  }
}

The css above I got it from anon/pen in codepen.

The HTML :

<input type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" onchange="document.getElementById('file').value = 
this.value.split('\\').pop().split('/').pop()" />

<p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p>

<div></div>


<input type="button" onclick="uploadEx()" value="Upload" />
<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' />
<input type="text" name="file" id='file' type="hidden"/>
</form>

The html above is a combination which I got from

• anon/pen in codepen
• the onchange="document.getElementById('file').value I got it from shijin/4EnRQ/ in jsfiddle and
• the onclick="uploadEx()" I got it from "upload-html-canvas-data-to-php-server" in codepool.

The SCRIPT :

<script>
document.getElementsByTagName('input')[0].addEventListener('change', function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      var img = document.createElement('img');
      img.src = fileReader.result;
      document.getElementsByTagName('div')[0].appendChild(img);
    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        if (success) {
          var img = document.createElement('img');
          img.src = image;
          document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});


function uploadEx() {
                var dataURL = document.images[0].src;
                document.getElementById('hidden_data').value = dataURL;
                var fd = new FormData(document.forms["form1"]);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'upload_data.php', true);

                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');
                        alert('Succesfully uploaded');
                    }
                };

                xhr.onload = function() {

                };
                xhr.send(fd);
            };
</script>

The script above I got it from anon in codepen, the last function uploadEX() I got it from "upload-html-canvas-data-to-php-server" in codepool and the document.images[0].src;I got it from W3School.

Finally the upload_data.php

<?php
$upload_dir = "uploads/";
$img = $_POST['hidden_data'];
$file_name = substr($_POST['file'],0,-4);
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . $file_name . ".jpg";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

The php above I got it from "upload-html-canvas-data-to-php-server" in codepool.

Thank you very much, All.

Answer 1

If you'll accept that the user doesn't download anything and the flow is changed to this:

• User selects a movie
• Script gets a still to upload
• User presses upload button and still is uploaded

Then yes, it just takes a few steps:

Create a hidden input in the form named something like snapshot_base64

<input type="hidden" name="snapshot_base64" id="snapshot_base64">

Next, in the codepen you provided is a line that says var image = canvas.toDataUrl(). After that line, put the following code:

snapshot_input = document.getElementById('snapshot_base64');
snapshot_input.setAttribute('value', image);

This loads the base64 data into the hidden input.

What you still need to to yourself is grabbing the name of the uploaded movie and add that to a hidden input as well, so you'll know what name to give to the file.

After this you'll need to submit the form and read the base64 in the php files you are using. Converting base64 to an image is described here.