Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 !

like image 677
sarthi Avatar asked Mar 27 '26 08:03

sarthi


1 Answers

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

like image 50
sandip Avatar answered Mar 29 '26 21:03

sandip



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!