Reputation: 59
I want to upload the video on youtube. Problem statement is that user drag and drop the video on my application and when user click on the upload button video is uploaded to the youtube.
I have written this code
$('#drop-files').bind('drop', function(e) {
rc = count;
var files = e.dataTransfer.files;
//alert("files -"+files[0].path);
count += files.length;
$('#uploaded-holder').show();
$.each(files, function(index, file) {
console.log("aaaa : "+file);
//alert("sarthi : "+file.name);
if (!(files[index].type.match('image.*') || files[index].type.match('pdf.*') || files[index].type.match('video.*'))) {
alert("ONLY IMAEG AND VIDEO")
callModel();
} else {
// Start a new instance of FileReader*/
var fileReader = new FileReader();
var obj = {};
// When the filereader loads initiate a function
//alert("file "+file);
fileReader.onload = (function(file) {
var isVideo = 1;
return function(e) {
// Push the data URI into an array
dataArray.push({
name : file.name,
value : this.result
});
// Move each image 40 more pixels across
//z = z+40;
var image;
var video;
if(file.type.match('image.*'))
image = this.result;
else if(file.type.match('pdf.*'))
image = "assets/img/pdf.png";
else if(file.type.match('video.*')){
video = this.result;
}
// Just some grammatical adjustments
/*if(dataArray.length == 1) {
$('#upload-button span').html("1 file to be uploaded");
} else {
$('#upload-button span').html(dataArray.length+" files to be uploaded");
}*/
if(file.type.match('image.*')) {
//alert("1");
var html = tmpl(template, {
image:image,
loadingbar:"loadingbar"+rc,
loadper:"loadper"+rc,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
grey:"greey"+rc,
upbtn: "upbtn"+rc,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
});
obj = {
htmlstring:html,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
upbtn: "upbtn"+rc,
loadbar: "loadingbar"+rc,
loadper:"loadper"+rc,
grey:"greey"+rc,
file:file,
flag:0,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
}
$('#dropped-files').append(html);
var now = new Date();
var today = (now.getMonth() + 1) + '-' + now.getDate() + '-' + now.getFullYear();
$('#'+obj.ed).val(today);
uploadObject[rc] = obj;
$("#"+obj.upbtn).click(function(e){
if(!($("#uid").val() == "")){
$('.error').hide();
if(!($("#"+obj.dd).val() == "")){
$('#'+obj.dderrorid + " span").hide();
if(!($("#"+obj.ed).val() == "")){
$('#'+obj.ederrorid + " span").hide();
upload(e);
} else {
$('#'+obj.ederrorid + " span").show();
}
} else {
$('#'+obj.dderrorid + " span").show();
}
} else {
$('.error').show();
}
});
$("#"+obj.grey).click(function(e){
removeFiles(e);
});
rc++;
}
else{
if($('#dropped-files > .video').length < maxFiles) {
//alert("2");
var html1 = tmpl(vtemplate, {
video:video,
loadingbar:"loadingbar"+rc,
loadper:"loadper"+rc,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
grey:"greey"+rc,
upbtn: "upbtn"+rc,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
});
obj = {
htmlstring:html1,
type:"type"+rc,
dd:"dd"+rc,
ed:"ed"+rc,
upbtn: "upbtn"+rc,
loadbar: "loadingbar"+rc,
loadper:"loadper"+rc,
grey:"greey"+rc,
file:file,
flag:0,
dderrorid: "dderr"+rc,
ederrorid: "ederr"+rc
}
//$('#dropped-files').append(html1);
now = new Date();
today = (now.getMonth() + 1) + '-' + now.getDate() + '-' + now.getFullYear();
$('#'+obj.ed).val(today);
uploadObject[rc] = obj;
$("#"+obj.upbtn).click(function(e){
if(!($("#uid").val() == "")){
$('.error').hide();
if(!($("#"+obj.dd).val() == "")){
$('#'+obj.dderrorid + " span").hide();
if(!($("#"+obj.ed).val() == "")){
$('#'+obj.ederrorid + " span").hide();
$("input[type='file']")
.prop("files", e.originalEvent.dataTransfer.files) // put files into element
.closest("form")
.submit();
} else {
$('#'+obj.ederrorid + " span").show();
}
} else {
$('#'+obj.dderrorid + " span").show();
}
} else {
$('.error').show();
}
});
$("#"+obj.grey).click(function(e){
removeFiles(e);
});
rc++;
}
$('#dropped-files').append(html1);
}
};
})(files[index]);
fileReader.readAsDataURL(file);
}
});
});
I am not able to get the absolute path of file dropped on my application.
Thanks in advance !
Upvotes: 3
Views: 1844
Reputation: 3289
You can not access clients (local address) at serverside. This may help you!
Passing path to uploaded file from HTML5 drag & drop to input field and http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html
Upvotes: 1