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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related