I want the user of my page to :
- browse a movie file from his local computer
- get an image from the movie he just input it in step 1
- name the image file exactly the same with the movie file name
- 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.