Closed Osman-Rafi closed 3 years ago
This issue tracker is intended to collect bug reports and feature requests.
For help with integrating FilePond, information on how features work, or questions about specific features of FilePond, please use Stack Overflow. Any issues open for help requests will be closed to keep from clogging up the issue tracker.
@rikschennink Maybe you can help this problem : https://stackoverflow.com/questions/73671336/why-label-of-file-size-on-filepond-show-1kb-every-file-when-displaying-edit-form
to use jquery or axios
filepondProcess(fieldName, file, metadata, pond_load, pond_error, pond_progress, pond_abort) {
const formData = new FormData();
formData.append('path', this.$C.ArticleCoverDefaultDir);
formData.append('files', file, file.name);
// formData.append("__RequestVerificationToken",$("input[name='__RequestVerificationToken']").val());
var xhr, controller, me = this, promise;
if (window.jQuery) {
promise = $.ajax(
{
url: this.uploadUrl,
method: 'POST',
data: formData,
cache: false,
// processData: false,
// contentType: false,
xhr: function () {
xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.onprogress = function (e) {
pond_progress(e.lengthComputable, e.loaded, e.total);
};
}
return xhr;
},
})
} else if (this.axios) {
controller = new AbortController();
promise = this.axios
.post(this.uploadUrl, formData, {
headers: {'Content-Type': 'multipart/form-data'},
signal: controller.signal,
onUploadProgress: function (progressEvent) {
// var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
var e = progressEvent;
pond_progress(e.lengthComputable, e.loaded, e.total);
}
})
.then(function ({data}) {
return data;
})
} else {
console.error('[file-uploader] no Tool.ajax or axios for progress')
}
promise
.then(function (data) {
// write your own code to get file and filepath
var file = data.files[0];
if (file['error']) {
// "Cannot create file 'ArticleCovers/0001.jpg' because it already exists."
pond_error('error uploading:' + file['error']);
console.error(data);
} else if (file['mediaPath']) {
// the pond_load method accepts either a string (id) or an object
// here use path with filename as uniqueFileId
pond_load(file['mediaPath']);
} else {
pond_error('err uploading');
console.error(data);
}
})
.catch(function (reason) {
pond_error('err uploading');
console.error(reason);
});
//expose an abort method so the request can be cancelled
return {
abort: function () {
// This function is entered if the user has tapped the cancel button
this.axios ? controller.abort() : xhr.abort();
// Let FilePond know the request has been cancelled
pond_abort();
}
};
while trying to upload image buy vue filepond, i found the process little confusing. The files props not saving the file after upload an image. Here is some code work:
I found the images array empty after upload an image. I need to send the image to server via axios. Can you help me ? Thanks in advance !