sarthi
sarthi

Reputation: 59

Javascript upload video on youtube using drag and drop

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

Answers (1)

sandip
sandip

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

Related Questions