multiple file upload with remove option using javascript/jquery

Question

Problem: I want to remove files from the selected list of files and i want to add more files to. Iam not able to assign value to the filed "uploadFile" by using this code. Please Help me in this.

$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
	    var fileIdCounter = 0;

	    this.closest(".files").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=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

	            output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
	        };

	        $(this).children(".fileList")
	            .append(output.join(""));

	        //reset the input to null - nice little chrome bug!
	        //evt.target.value = null;
	        evt.target.value = null;
	    });
	    
	    

	    $(this).on("click", ".removeFile", function (e) {
	        e.preventDefault();
	        alert($("#uploadFile").files);
			
	        var fileId = $(this).parent().children("a").data("fileid");

	        // loop through the files array and check if the name of that file matches FileName
	        // and get the index of the match
	        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(".fileList").empty();
	    }

	    return this;
	};

(function () {
var filesToUpload = [];

var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

  })()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row files" id="files1">
  <span class="btn btn-default btn-file">
    Browse  <input type="file" name="uploadFile" id="uploadFile" multiple />
  </span>
<br />
<ul class="fileList"></ul>
</div>

Please properly indent your code or use Code Snippets and move your problem statement to the top of the question. — Alex
– Alex, Commented Jun 14, 2018 at 9:02
What do you mean with I am not able to assign value to the filed "uploadFile"? So far the code works, your alert its off but not really sure what you want to add there? — John Baker
– John Baker, Commented Jun 14, 2018 at 9:40
while form submission, i am getting empty value for the field uploadFile — Boga Ravali
– Boga Ravali, Commented Jun 14, 2018 at 9:43
@Isaac I tried editing, I had to add more text since I formatted his code which I didn't want to do. — Alex
– Alex, Commented Jun 14, 2018 at 10:11

Ravi · Accepted Answer · 2019-06-04 12:55:37Z

var deleted_position=[];  
var userfile=[];  
jQuery(function() {  
    var imagesPreview = function(input) {  
        if (input.files) {  
            var filesAmount = input.files.length;  
            for (i = 0; i < filesAmount; i++) {  
                var reader = new FileReader();  
                var t = jQuery('.removeImage').length;  
                reader.onload = function(event) {  
                    jQuery('div.gallery').append("<div class='addImage'><img src='"+event.target.result+"' width='70px' height='70px' class='imageCross' filePosition='"+t+"'><i class='fa fa-times removeImage' aria-hidden='true'   position='"+t+"' ></i></div>");  
                    t++;  
                }  
                reader.readAsDataURL(input.files[i]);  
            }  
        }  
    };  


    jQuery('.car-pics').on('change','input[type="file"]',function(){  
        jQuery('.image-upload1').remove();  
        imagesPreview(this);  
        setTimeout(function () {  
            jQuery('.gallery').append('<div class="image-upload1 image_upload1" style="cursor:pointer"><i class="fa fa-plus imagePlus1"></i></div>')
        }, 1000);  
        var imagecount = jQuery('.imageUploadInput1').prop('files').length;  
        for(var i = 0; i < imagecount; i++) {  
            var files = jQuery('.imageUploadInput1').prop('files')[i];    
            userfile.push(files);  
        }    
    });  


    jQuery('.gallery').on('click','.image_upload1',function(e){  
       jQuery('.imageUploadInput1').trigger('click');  
        e.preventDefault();  
    }) 


    var userfile=[];  
    jQuery('.finalComplete').click(function(){  
        var form_data = new FormData();  
        form_data.append("data_id",jQuery(this).attr('data-id'));   
        var imagecount = jQuery('.imageUploadInput1').prop('files').length;  
        for(var i = 0; i < imagecount; i++) {  
            var files = jQuery('.imageUploadInput1').prop('files')[i];    
            userfile.push(files);  
        }
        var uniqueNames = [];  
        jQuery.each(userfile, function(i, el){  
            if(jQuery.inArray(el, uniqueNames) === -1) uniqueNames.push(el);  
        });  
        for(var i=0; i<deleted_position.length; i++)  
        {  
            if(uniqueNames[deleted_position[i]] != ""){  
                uniqueNames[deleted_position[i]]='';  
            }  
        }  
        for(var i=0; i<uniqueNames.length;i++)  
        {  
            if(uniqueNames[i]!=''){  
                form_data.append('userfile1[]', uniqueNames[i]);  
            }  
        }  
        for (var value of form_data.values()) {  
        }  
        setTimeout(function () {  
                jQuery.ajax({  
                url: "Your URL",  
                type:"post",  
                processData: false,    
                contentType: false,    
                cache:false,    
                data:form_data,    
                success: function(data) {    

                },    
                complete: function (data) {  
                    location.reload();  
                }  
            });  
        }, 1000);  
    })  

    jQuery('.gallery').on('click','.removeImage',function(){  
        var dataName = jQuery(this).attr('position');  
        jQuery(this).parent().hide();   
        deleted_position.push(jQuery(this).attr('position'));  
    })  


    jQuery('#myModalComplete').on('hidden.bs.modal', function () {  
        jQuery('.addImage').remove();  
        deleted_position=[];  
        userfile=[];  
    })  
})

Collectives™ on Stack Overflow

multiple file upload with remove option using javascript/jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related