We Keep Coding

ASP Net Core Filepond load file from server

I have a project where it uses Filepond to upload files and I need it to load file from server.
I already follow the docs but It doesn't work. The Filepond gives error Error during load 400 and it even doesn't send the request to load the file from server
This is my javascript
let pond = FilePond.create(value, {
files: [
{
// the server file reference
source: 'e958818e-92de-4953-960a-d8157467b766',
// set type to local to indicate an already uploaded file
options: {
type: 'local'
}
}
]
});
FilePond.setOptions({
labelFileProcessingError: (error) => {
return error.body;
},
server: {
headers: {
'#tokenSet.HeaderName' : '#tokenSet.RequestToken'
},
url: window.location.origin,
process: (fieldName, file, metadata, load, error, progress, abort) => {
// We ignore the metadata property and only send the file
fieldName = "File";
const formData = new FormData();
formData.append(fieldName, file, file.name);
const request = new XMLHttpRequest();
request.open('POST', '/UploadFileTemp/Process');
request.setRequestHeader('#tokenSet.HeaderName', '#tokenSet.RequestToken');
request.upload.onprogress = (e) => {
progress(e.lengthComputable, e.loaded, e.total);
};
request.onload = function () {
if (request.status >= 200 && request.status < 300) {
load(request.responseText);
}
else {
let errorMessageFromServer = request.responseText;
error('oh no');
}
};
request.send(formData);
},
revert: "/UploadFileTemp/revert/",
load: "/UploadFileTemp/load"
}
})
This is my controller
public async Task<IActionResult> Load(string p_fileId)
{
//Code to get the files
//Return the file
Response.Headers.Add("Content-Disposition", cd.ToString());
Response.Headers.Add("X-Content-Type-Options", "nosniff");
return PhysicalFile(filePath, "text/plain");
}
NB
I already test my controller via postman and it works. I also check the content-disposition header

I'd advise to first set all the options and then set the files property.
You're setting the files, and then you're telling FilePond where to find them, it's probably already trying to load them but doesn't have an endpoint (yet).
Restructuring the code to look like this should do the trick.
let pond = FilePond.create(value, {
server: {
headers: {
'#tokenSet.HeaderName': '#tokenSet.RequestToken',
},
url: window.location.origin,
process: (fieldName, file, metadata, load, error, progress, abort) => {
// your processing method
},
revert: '/UploadFileTemp/revert',
load: '/UploadFileTemp/load',
},
files: [
{
// the server file reference
source: 'e958818e-92de-4953-960a-d8157467b766',
// set type to local to indicate an already uploaded file
options: {
type: 'local',
},
},
],
});

Abort upload with UIkits Upload Component?

The title says it all. How can I abort the upload with UIKits Upload Component?
I'm trying to abort the upload in the beforeAll callback but I can't seem to get it to work.
UIkit.upload('.js-upload', {
url: '',
multiple: false,
mime: 'audio/*',
allow: '*.mp3',
beforeAll: function () {
return false; // <--- Why does it not return/abort?
});
}
});

Have a look at the source code. The return value from beforeAll isn't used.
The best option I see to abort the request is to get hang of the XMLHttpRequest object and call abort() on it:
UIkit.upload(".js-upload", {
// ...
loadStart: function (e) {
e.target.abort();
},
abort: function (e) {
// clean up after abort
}
// ...
});

Fine-uploader Initial File List onStatusComplete null result

I want to do the same feature as found in this SO Post ;
But in the onStatusChange callback the objects are null.
callbacks: {
onStatusChange: function(id, oldStatus, newStatus) {
console.log('new status of ' + newStatus + ' for ID: ' + id);
console.log(this.getItemByFileId(id));
}
I get the following output
new status of upload successful for ID: 0
fine-uploader.min.js:2 [Fine Uploader 5.14.2] Caught exception in 'onStatusChange' callback - Cannot read property 'className' of null
I know session response from my server is OK, b/c fine-uploader displays my file, filename and the delete button.
Is what I'm trying to do supported?
Here's my full fine-uploader code for reference:
`
var uploader_132963 = new qq.FineUploader({
element: document.getElementById("uploader_132963"),
session: { endpoint: 'https://localhost/session', params : { account: 'DEMO9', index: 1, psuuid: UUID_UPLOAD1},},
template : 'qq-template1',
debug: true,
request : {
endpoint: 'localhost',
},
autoUpload: true,
retry: {
enableAuto: true
},
multiple: false,
concurrent: {
enabled: false
},
chunking: {
concurrent: {
enabled : false,
},
enabled: true,
mandatory: true,
partSize: 2000000,
success: {
endpoint: 'https://localhost/success'
}
},
deleteFile: {
enabled: true,
endpoint: 'https://localhost',
method: 'POST',
},
extraButtons: {
folders: false
},
validation: {
allowedExtensions: ['3g2','asf','avi','bmp','doc','docx','flv','gif','jpeg','jpg','m4a','m4v','mj2','mov','mp3','mp4','pdf','png','ppt','pptx','svg',],
allowEmpty: false,
itemLimit: 1,
sizeLimit: 1024000000,
},
callbacks: {
onStatusChange: function(id, oldStatus, newStatus) {
if (newStatus == qq.status.UPLOAD_SUCCESSFUL) {
var fileItem = this.getItemByFileId(id); // will throw exception here
}
}
}
})
`

I had the exact same issue as described here. The solution was as pointed out by bobflorian. This is how I handle both canned files loaded from the server normal uploaded files:
onAllComplete: function( arrSucceeded, arrFailed,) {
if (arrSucceeded!==null && $.isArray(arrSucceeded)){
for (var i=0,x=arrSucceeded.length;i<x;i++){
//Get the template markup for the uploaded file
var fileItem = this.getItemByFileId(arrSucceeded[i]);
//Get the generated uuid. This is the same uuid that we save in the PHP SESSION. It points to the actual uploaded file
var uuid = this.getUuid(arrSucceeded[i]);
}
}
}
I'm using version 5.16.2. Ray, you did a fantastic job with this library.

Moving my code to the onAllComplete callback gives the desired result when loading files via the Initial File List. The onStatusChange doesn't seem to have the getItemByFileId function available under this at that point in time. It will throw an exception of
Caught exception in 'onStatusChange' callback - Cannot read property 'className' of null

Unable to view image on thumbnail in fine-uploader

Hi I am working on upload feature which has been done successfully using fine uploader, but for new functionality for edit i searched for same plugin and found that session can handle this functionality.
but i am not getting view of image in fine uploader section as below is the view i am getting.
I am passing name,uuid and thumbnailUrl as response.
Edited:
At Server Side:
List<PropertyImageEntity> propertyImageEntity=propertyService.getImagesUrlNames(Integer.parseInt(request.getParameter("id")),Constant.PROP_VAL);
for(PropertyImageEntity propertyImagesDetails: propertyImageEntity)
{
ImageDataResponse imageResponseData=new ImageDataResponse();
imageResponseData.setName(propertyImagesDetails.getFilename());
String test=String.valueOf(UUID.randomUUID());
imageResponseData.setUuid(this.uuid);
imageResponseData.setId(String.valueOf(propertyImagesDetails.getImageid()));
imageResponseData.setSize(propertyImagesDetails.getSize());
imageResponseData.setStatus("upload successful");
imageResponseData.setThumbnailUrl(propertyImagesDetails.getUrl());
imageResponse.add(imageResponseData);
}
at client side:
var manualUploader1 = new qq.FineUploader(
{
element : document
.getElementById('fine-uploader-manual-trigger1'),
template : 'qq-template-manual-trigger1',
request : {
endpoint : '/server/uploads?${_csrf.parameterName}=${_csrf.token}&id=${id}'
},
thumbnails : {
placeholders : {
waitingPath : '../assets/js/property/fileupload/placeholders/waiting-generic.png',
notAvailablePath : '../assets/js/property/fileupload/placeholders/not_available-generic.png'
}
},
validation : {
allowedExtensions : [ 'png', 'jpeg', 'jpg' , 'gif'],
itemLimit : 6,
sizeLimit : 100000000
},
autoUpload : false,
debug : true,
callbacks: {
onError: function(id, name, errorReason, xhrOrXdr) {
$("#errorMsg4").html(errorReason);
}
},
session: {
endpoint: '/server/get?id=${id}',
params: {},
customHeaders: {},
refreshOnReset: true
},
messages: {
typeError: jQuery.i18n.prop("invalid.extention.error"),
sizeError: jQuery.i18n.prop("upload.filesize.error"),
noFilesError: jQuery.i18n.prop("nofiles.toupload.error"),
tooManyItemsError: jQuery.i18n.prop("toomany.items.error"),
retryFailTooManyItems: jQuery.i18n.prop("retry.fail.error")
}
});
qq(document.getElementById("trigger-upload1")).attach("click",
function() {
$("#errorMsg4").html("");
manualUploader1.uploadStoredFiles();
});
but response for image url in console showing 200 ok.
Response:
[{"name":"b.png","uuid":"e3a5581e-aee9-4b8d-813f-63e0d400c9bc","thumbnailUrl":"http://192.168.1.68/html/1465290007617b.png","id":"84","size":26507,"status"
:null}]
Console Log:

The above problem was solved by adding cors headers in apache2.conf.
Header set Access-Control-Allow-Origin "*"
Thanks to #Ray for his answer on this post.

setDeleteFileParams doesnt seem to work

I am using 5.3.2 in basic mode as I need control over the UI.
I have added code to allow the uploads and then created little UI elements that can then trigger a deletion. I need to know the filename when I am deleting. So I used setDeleteFileParams but nothing is attached to the request.
var uploader = new qq.FineUploaderBasic({
button: document.getElementById('btnUploadFiles'),
debug: true,
autoUpload: true,
request: {
paramsInBody: true,
endpoint: '../myendpoint.htm',
params: {
tempID: 'myidwhatever'
}
},
deleteFile: {
enabled: true,
forceConfirm: false,
method: 'POST',
endpoint: '../myendpoint.htm'
},
callbacks: {
onSubmitted: function(id, name){
//do work
},
onDelete: function(id) {
this.setDeleteFileParams({filename: this.getName(id)}, id);
},
onDeleteComplete: function(UID, xhr, isError){
//remove my UI element
},
onComplete: function(UID, name, responseJSON, xhr) {
//create an element and stick it in
}
}
})
//ADD THE DELETE BUTTON ACTIONS
$('uploadedFiles').addEvent("click:relay(.deleteMyFile)", function(event, element) {
event.preventDefault();
arr = element.id.split('_')
uploader.deleteFile(arr[1]);
});
Im using Mootools as my JS framework. Everything triggers ok and the console logs out the filename correctly when I delete a file but when I look at the request there is no 'filename' parameter.
Thanks for any help.

By the time your onDeleteFile callback has been called, the file is already setup to be deleted. If you'd like to influence (or prevent) the underlying request, you'll need to put your logic inside of a onSubmitDelete callback handler instead.
For example:
callbacks: {
onSubmitDelete: function(id) {
console.log(this.getName(id));
this.setDeleteFileParams({filename: this.getName(id)}, id);
}
}