• FRAMEWORK

File Upload Input

You can use the following component for your file upload works.

JS not used

More information or questions: framework@ford.com.tr

Uppy

You can use the following component for your file upload works.

JS not used

More information or questions: framework@ford.com.tr

File Upload List (Delete & Properties)

You can use the following component for your file upload works.

Select or drag and drop 
     //File Upload Delete & Properties Scripts
    $.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
        var fileIdCounter = 0;
        this.closest(".fo-upload-list").change(function (evt) {
            var output = [];

            for (var i = 0; i < evt.target.files.length; i++) {
                fileIdCounter++;
                var file = evt.target.files[i];
                var fileId = sectionIdentifier + fileIdCounter;

                filesToUpload.push({
                    id: fileId,
                    file: file
                });

                var removeLink = "< a class=\"fo-remove-file\" href=\"#\" data-fileid=\"" + fileId + "\">";
                output.push("< li>", removeLink, "< strong>", escape(file.name), "", "< small>", file.size, " Bytes ", " ");
            };

            $(this).children(".fo-upload-list-files")
                .append(output.join(""));

            // Reset the input to null (Chrome Bug)
            evt.target.value = null;
        });

        $(this).on("click", ".fo-remove-file", function (e) {
            e.preventDefault();

            var fileId = $(this).parent().children("a").data("fileid");

            // files array boyunca döngü yapın ve bu dosyanın adının FileName ile eşleşip eşleşmediğini kontrol edin ve match dizinin alın
            for (var i = 0; i < filesToUpload.length; ++i) {
                if (filesToUpload[i].id === fileId)
                    filesToUpload.splice(i, 1);
            }

            $(this).parent().remove();
        });

        this.clear = function () {
            for (var i = 0; i < filesToUpload.length; ++i) {
                if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                    filesToUpload.splice(i, 1);
            }

            $(this).children(".fo-file-list").empty();
        }

        return this;
    };

    (function () {
        var filesToUpload = [];

        var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
        var files2Uploader = $("#files2").fileUploader(filesToUpload, "files2");
        var files3Uploader = $("#files3").fileUploader(filesToUpload, "files3");

        $("#upload-files-button").click(function (e) {
            e.preventDefault();

            var formData = new FormData();

            for (var i = 0, len = filesToUpload.length; i < len; i++) {
                formData.append("files", filesToUpload[i].file);
            }

            $.ajax({
                url: "",
                data: formData,
                processData: false,
                contentType: false,
                type: "POST",
                success: function (data) {
                    alert("Done");

                    files1Uploader.clear();
                    files2Uploader.clear();
                    files3Uploader.clear();
                },
                error: function (data) {
                    alert("Error - " + data.responseText);
                }
            });
        });
    })()

    More information or questions: framework@ford.com.tr

    Excel Upload

    You can use the following component for your file upload works.

    

    
    //File Upload List (Delete & Properties)
       $.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
           var fileIdCounter = 0;
           this.closest(".fo-file-upload").change(function (evt) {
               var output = [];

               for (var i = 0; i < evt.target.files.length; i++) {
                   fileIdCounter++;
                   var file = evt.target.files[i];
                   var fileId = sectionIdentifier + fileIdCounter;

                   filesToUpload.push({
                       id: fileId,
                       file: file
                   });

                   var removeLink = "< a class=\"fo-remove-file\" href=\"#\" data-fileid=\"" + fileId + "\">< /a>";
                   output.push("< li>", removeLink, "< strong>", escape(file.name), "< /strong>", "< small>", file.size, " Bytes < /small>", "< /li> ");
               };

               $(this).children(".fo-upload-list-files")
                   .append(output.join(""));

               // Reset the input to null (Chrome Bug)
               evt.target.value = null;
           });

           $(this).on("click", ".fo-remove-file", function (e) {
               e.preventDefault();

               var fileId = $(this).parent().children("a").data("fileid");

               // files array boyunca döngü yapın ve bu dosyanın adının FileName ile eşleşip eşleşmediğini kontrol edin ve match dizinin alın
               for (var i = 0; i < filesToUpload.length; ++i) {
                   if (filesToUpload[i].id === fileId)
                       filesToUpload.splice(i, 1);
               }

               $(this).parent().remove();
           });

           this.clear = function () {
               for (var i = 0; i < filesToUpload.length; ++i) {
                   if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                       filesToUpload.splice(i, 1);
               }

               $(this).children(".fo-file-list").empty();
           }

           return this;
       };

       (function () {
           var filesToUpload = [];

           var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
           var files2Uploader = $("#files2").fileUploader(filesToUpload, "files2");
           var files3Uploader = $("#files3").fileUploader(filesToUpload, "files3");

           $("#upload-files-button").click(function (e) {
               e.preventDefault();

               var formData = new FormData();

               for (var i = 0, len = filesToUpload.length; i < len; i++) {
                   formData.append("files", filesToUpload[i].file);
               }

               $.ajax({
                   url: "",
                   data: formData,
                   processData: false,
                   contentType: false,
                   type: "POST",
                   success: function (data) {
                       alert("Done");

                       files1Uploader.clear();
                       files2Uploader.clear();
                       files3Uploader.clear();
                   },
                   error: function (data) {
                       alert("Error - " + data.responseText);
                   }
               });
           });
       })()

    More information or questions: framework@ford.com.tr