I am trying to setup a test implementation of FineUploader, but I am running into a problem with chunking. I have debug set to true, and everything seems to be going great until the very end of the process where I get the following errors:
"[Fine Uploader 5.0.2] All chunks have been uploaded for 0 - finalizing...." custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Submitting All Chunks Done request for 0" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Sending POST request for 0" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Received response status 200 with body: {"error":"Server error. Not a multipart request. Please set forceMultipart to default value (true).","uploadName":null,"template":"undefined","category":"undefined"}" custom.fineuploader-5.0.2.js:207
"[Fine Uploader 5.0.2] Finalize successful for 0"
The bottom error says "Server error. Not a multipart request. Please set forceMultipart to default value (true).", but as far as I can tell my code it setup that way already. Here is what I have in the code for it:
var uploadHandler = $('#fine-uploader').fineUploader({
debug: true,
request: {
endpoint: 'server/endpoint.php',
forceMultipart: true,
params: // send the values to backend file (endpoint.php)
{
template:function() {
return $("#price_template_id").val();
},
category:function(){
return $("#category_id").val();
}
}
},
validation: { // validation for the images uploaded
allowedExtensions: ['jpeg', 'jpg'],
sizeLimit: 20971520 // 20 MB = 20 * 1024 * 1024 bytes 20971520
},
editFilename: {
enabled: true
},
display: { //display image on upload
fileSizeOnSubmit: true
},
resume: { //enable resume on upload
enabled: true
},
retry: { //enable retry on upload
enableAuto: true
},
forceMultipart: {
enabled: true
},
chunking: { //enable chunking on upload
concurrent: {
enabled: true
},
enabled: true,
partSize: 200000, //200KB per chunk
success: {
endpoint: 'server/endpoint.php'
}
},
template: "qq-template",
autoUpload: true,
showMessage: function(message) { //show message if any error occur during uplaod process
alert(message);
}
})
You can see/test the implementation here: http://web3.instaproofs.com/temp/fineuploaderv3/
Any ideas on what I am doing wrong with this?
Thanks!
Your server is not properly handling the "all chunks done" POST request. This is not a multipart encoded request. It is sent by Fine Uploader after the last chunk has successfully been uploaded to the server. This POST contains a URL-encoded message-body with information about the completed chunked file. Your server should combine all chunks associated with the file and then respond appropriately. More info at http://docs.fineuploader.com/branch/master/features/concurrent-chunking.html#server-side-implications.
Related
after searching a lot here and there I am going to put my question here . If any body can help out in this regard . Let me explain the things I am working on Laravel and Filepond .
Filepond upload and revert is working perfectly but I am facing problem in restoring the file back if the validation gets failed i-e restore the file on filepond.
files: [{
source: 'filename',
options: {
type: 'limbo',
},
}, ],
the source is coming from laravel controller function
FilePond.setOptions({
server: {
process: './filepond-upload',
revert: './filepond-delete',
restore: './filepond-restore',
// restore: {
// url :'./filepond-restore/?id=',
// method :'GET',
// },
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Access-Control-Expose-Headers': 'Content-Disposition,'
// 'Access-Control-Expose-Headers': 'Content-Disposition',
}
}
});
Controller function -
public function filepondRestore(Request $request, string $id) {
$abc = ('/posts/tmp/post6399a6ba2ea280.18814893/presentation_1.png');
return response()->json('', 200, [
'Content-Type' => 'image/png',
'Content-Disposition' => 'inline;
filename="'.$abc.'"',
]);
}
but either get 302 redirection or 500 server error.
If any body have implemented such kind of functionality I ll be thankful for sharing.
Thanks in advance.
Happy Coding
I am trying to intergrate File Pond with my Flask server and I can not find the unique file id it sends with requests. With normal uploads it will show me request data on the server, but without the unique ID I am looking for. I want to use this unique ID to attach to a database in order to delete the file if the revert is sent later.
Going over the docs, it is suppsoed to send a unique ID with every upload, but I can't tell if it's a bad config in file pond or I suck at reading request.files. Just ignore all my prints where I try to read the contents of request.
Here is my FilePond Config:
FilePond.setOptions({
//allowImageEdit: true,
//allowImageCrop: true,
//allowMultiple: true,
//allowFileEncode: true,
allowImageExifOrientation: true,
credits: false,
server: {
process: {
url: './pondupload',
method: 'POST',
headers: {
'x-customheader': 'Hello World',
},
withCredentials: document.getElementById('csrf_token'),
onload: (response) => response.key,
onerror: (response) => response.data,
ondata: (formData) => {
formData.append('csrf_token', document.getElementById('csrf_token').value)
return formData;
},
},
revert: './pondupload',
restore: './restore/',
load: './load/',
fetch: './fetch/',
},
});
Here is my route in flask:
#bp.route('/pondupload', methods=['POST', 'DELETE'])
def pondupload():
print ('data: '+str(request.data))
print('form: '+str(request.form))
print('files: '+str(request.files))
print('args: '+str(request.args))
form=EmptyForm()
#TODO add csrf to revert
if request.method == "DELETE":
print('delete stuff')
if request.method == "POST" and form.validate_on_submit():
upload_dir = current_app.config['UPLOAD_FOLDER']
fn = ""
file_names = []
# get file object from request.files (see: http://flask.pocoo.org/docs/1.0/api/#flask.Request.files)
for key in request.files:
print('key: '+str(key))
file = request.files[key]
fn = secure_filename(file.filename)
if allowed_file(fn) == True:
file_names.append(fn)
try:
file.save(os.path.join(upload_dir, fn))
return jsonify({}), 200
except:
return jsonify(filename=file_names), 402
return jsonify({}), 400
I was trying to proxy requests to my backend. Going through docs, I found out that we can add a rewrite() function in config,
module.exports = {
basePath: "",
distDir: "build",
trailingSlash: true,
images: {
domains: ["localhost"],
},
async rewrites() {
return {
beforeFiles: [
{
source: "/api/:path*",
destination: "http://localhost:3001/todos/:path*",
},
],
};
},
};
I tried this but it fails .It fires two request to API for one each, here the first request says 308 permanent redirect, and the second request says 404. And thats it, it does not requests the api.
Can someone help me?
I have been tasked with adding security to an application after it failed an audit. one of the issues are unrestricted file uploads.
I have set the allowed file types in the JavaScript and it correctly dis-allows the user to upload file types of .exe,
$('#up_ItemImg').fineUploader({
button: $('#up_ItemImg'),
uploaderType: 'basic',
request: {
endpoint: '/Admin/_customer/CustomerWS.ashx?method=SaveImage&customerID=' + customerID
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png', 'bmp', 'gif', 'tiff'],
sizeLimit: 5242880 // 5 MB = 1024 * 1024 * 5 bytes
},
}).on('complete', function (event, id, fileName, responseJSON) {
if (responseJSON.success) {
$("#imgCustomerLogo").attr("src", responseJSON.data);
}
}).on('error', function (id, name, errorReason, errorReason2) {
if (errorReason2 == 'Upload failure reason unknown') {
return;
}
if (errorReason2.indexOf('XHR returned response code') == 0) {
return;
}
alert(errorReason2);
});
problem comes in, if you use something like fiddler and modify that request, changing the .jpg to .exe and re-executing the request it succeeds.
I am a bit out of my depth here to be honest, How would I go about stopping something like that from happening?
I am using fine uploader to upload files to the Server but got an issue.
file gets uploaded to the Server perfectly fine but Server returns the response without { success : true } message, so, by default, fine Uploader treats it as failed upload and shows me error.
Is there a way to avoid this behavior?
How can I make fine uploader treat every response as a successful response even if the response does not have { "success": true }
here is my fine uploader code
this.manualUploader = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger'),
template: 'qq-template-manual-trigger',
request: {
endpoint: 'some end point'
},
thumbnails: {
placeholders: {
waitingPath: '../scripts/plugins/fine-uploader/placeholders/waiting-generic.png',
notAvailablePath: '../scripts/plugins/fine-uploader/placeholders/not_available-generic.png'
}
},
autoUpload: true,
debug: false,
callbacks: {
onComplete: function (event, id, xhr) {
** will call some functions here **
},
onError: function (id, name, errorReason, xhrOrXdr) {
try {
if(xhr.status == 204 && xhr.responseText.length == 0){
response = qq.parseJson('{"success": true}');
}
else{
response = qq.parseJson(xhr.responseText);
}
}
catch (exception){
}
}
},
failedUploadTextDisplay: {
mode: 'custom',
maxChars: 20,
responseProperty: 'error',
enableTooltip: true
}
});