I have been struggling to find a solution for uploading files via Ajax when the input field is not enclosed within a form tag. I have already attempted this method.
This is the HTML snippet:
<span id="user-image-up-btn">Upload Image</span>
<input id="user_image_upload" type="file" />
When implementing my code, I encountered the error message
TypeError: undefined is not an object (evaluating '$("#user_image_upload").files')Object, object.
This is my jQuery script:
// IMAGE UPLOAD
$("#user_image_upload").change(function() {
var fileform = new FormData();
fileform.append('pictureFile', $("#user_image_upload").files[0]);
$.ajax({
url: '/userimageupload',
type: 'POST',
processData: false,
contentType: false,
dataType : 'json',
data: fileform,
beforeSend: function(){
$("#user-image-up-btn").html('Uploading...');
console.log(fileform);
},
success: function(data){
$("#user-image-up-btn").html('Upload Image');
console.log(fileform);
},
error: function(exception){
alert('error:'+exception);
console.log(fileform);
}
});
});
EDIT:
Although I was able to upload the files by following Adeneo's advice, I am still encountering error:[object Object], which causes issues with the rest of the form. Why could this be happening?