Looking to access a specific item in formData to remove it from the Object and retrieve its name value.
I attempted formdata.delete through the console, but it removed the entire object with undefined returns. What I want is to remove a single item that can be identified by file.name
Here is my code:
<form id="submitform">
=<input type="text" id="submitReviewWriter" name="reviews"
class="form-control" placeholder="Comment">
<div class="text-center">
<input type='file' id='fileupload' name="fileupload[]" multiple />
<div id="uploadedList" class='uploadedList'></div>
<button id="submitReview" type="submit"class="btn btn-main text-center">submit Comment</button>
</div>
</form>
<script>
var formData = new FormData();
var filelist;
var i = 0;
$("#fileupload").on("change",function handleImgFileSelect(e) {
filelist = document.getElementById("fileupload").files || [];
for(var i = 0 ; i < filelist.length; i ++){
console.log('foundfile' + i + '=' + filelist[i].name);
formData.append("fileupload[]",filelist[i]);
}
var ufiles = e.target.files;
var filesArr = Array.prototype.slice.call(ufiles);
var reg = /(.*?)\/(jpg|jpeg|png|bmp)$/;
var sel_file;
var fString = "";
//generate thumbnails dynamically for user
filesArr.forEach(function(f) {
if (!f.type.match(reg)) {
alert("not image file extension");
document.getElementById("fileupload").value = "";
return;
}
var reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function(e) {
$(".uploadedList").append('<img src="'+ e.target.result+'" width = "50px" height = "50px" class = "uploadedimg">');
}
});
});
//ajax
$.ajax({
url: '<%=request.getContextPath()%>/uploadAjax',
data : formData,
processData: false,
contentType: false,
enctype: 'multipart/form-data',
type: 'POST',
success: function(result){
console.log(result);
}
});
</script>
//Ajaxcontroller
@ResponseBody
@RequestMapping(value = "/uploadAjax", method = RequestMethod.POST, produces = "text/plain;charset=UTF-8")
public ResponseEntity<String> uploadAjax(@RequestParam("fileupload[]") List<MultipartFile> files) throws Exception {
for(MultipartFile file : files) {
UploadFileUtils.uploadFile(fileuploadPath, file.getOriginalFilename(), file.getBytes());
logger.info(file.getOriginalFilename());
}
return new ResponseEntity<>(HttpStatus.CREATED);
}
public static String uploadFile(String uploadPath,
String originalName,
byte[] fileData)throws Exception{
UUID uid = UUID.randomUUID();
String savedName = uid.toString() +"_"+originalName;
String savedPath = calcPath(uploadPath);
File target = new File(uploadPath +savedPath,savedName);
FileCopyUtils.copy(fileData, target);
String formatName = originalName.substring(originalName.lastIndexOf(".")+1);
String uploadedFileName = null;
if(MediaUtils.getMediaType(formatName) != null){
uploadedFileName = makeThumbnail(uploadPath, savedPath, savedName);
}else{
uploadedFileName = makeIcon(uploadPath, savedPath, savedName);
}
return uploadedFileName;
}
Due to using the controller for ajax, I am unable to change the formData.append name value. Any assistance would be greatly appreciated. Thank you.