Develop Reference

FilePond,Laravel restore uploaded temporary files on validation failure

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

Cypress: How to test upload a folder with files and subfolders?

I'm having an issue to test uploading a folder with files and subfolders. If I add folder structure to the fixture then cy.fixture() command doesn't recognize that is a directory that I want to upload but it looks inside the directory to find the files. I have tries also to use the cy.readFile() but I couldn't make it to work.
I have tried to create drag and drop command like this:
Cypress.Commands.add('dragAndDropFolder', (fileUrl, type = '') => {
return cy.readFile(fileUrl, 'binary')
.then(Cypress.Blob.binaryStringToArrayBuffer)
.then(blob => {
const nameSegments = fileUrl.split('/');
const name = nameSegments[nameSegments.length - 1];
const testFile = new File([blob], name, { type });
const event = {
dataTransfer: {
isDirectory: true,
isFile: false,
fullPath: `#${fileUrl}`,
files: [testFile],
items: [{ kind: 'file', type }],
types: ['Files'],
},
};
return cy
.get('[data-test-dropzone="true"]')
.first()
.trigger('dragenter', event)
.trigger('drop', event);
});
});
Another thing I have tried to use a our different functionality which is simple upload button and the attachFile() plugin:
cy.readFile('client/testfolder', 'binary').then(file => {
cy.get('#multiple_file_uploads_input').attachFile(file)
});
Drag and drop functionality is written in Elixir and this is how data transfer looks like:
{
isDirectory: true,
isFile: false,
fullPath: '#{path}',
createReader() {
return {
sentEntries: false,
readEntries(callback) {
if (!this.sentEntries) {
this.sentEntries = true;
callback([#{Enum.join(entries, ",")}]);
} else {
callback([]);
}
},
};
},
}

At least on Elixir side the fullPath: '#{path}', will be substituted by the real path like fullPath: '/some/path', so you need to remove hash (#) from your path at JavaScript side here fullPath: '#${fileUrl}',, probably could be just fullPath: fileUrl,

How to create a custom Inject Node in NodeRED?

I want to start my node with a button click, so that I do not have to put the inject node in front. How would that be possible to register a button click in the javascript file?
I have tried to put node.on("input", async function(msg){/*some code*/}) inside the javascript file, where I register my node. I was able to add this button through this:
//HTML file script
<script type="text/javascript">
RED.nodes.registerType('light', {
category: "input",
color: "#f3c12b",
defaults: {
name: {value: ""},
plus: {value: ""},
topic: {value: this.name},
payload: {value: ""}
},
inputs: 0,
outputs: 1,
label: function(){
return "Licht '"+this.name+"'" || "Licht";
},
button: {
enabled: function(){
return true;
},
onclick: function(){
//I´ve put the code here, but then I have to reconfigure my functions
}
}
});
</script>
//Javascript file --> register function
//Not getting any response
node.on("input", async function(msg) {
msg = {};
msg.topic = this.topic;
msg.payload = "This is a new message!";
node.send(msg);
});
I was expecting, that when I click this the node is sending a message, but the node is not responding anything.

The best bet here is to look at the inject node source code.
inject.html
inject.js
In the case of the inject node, the onclick function of the button parameter in the HTML file actually does a POST call to /inject/{id} on the server.
onclick: function() {
...
var node = this;
$.ajax({
url: "inject/"+this.id,
type:"POST",
success: function(resp) { ... }
});
}
The inject JS file, which runs on the server, hosts an http endpoint at /inject/:id that when it's called gets the node by id and called node.receive() which acts as the trigger for it's input.
module.exports = function(RED) {
...
RED.httpAdmin.post("/inject/:id", RED.auth.needsPermission("inject.write"), function(req,res) {
var node = RED.nodes.getNode(req.params.id);
...
node.receive();
...
});
}

jQuery plugin: Prevent override options

i did a custom plugin to add common functionality and validations to jQuery File Upload plugin. This is a resume so you can get the idea.
$.fn.myCustomUpload = function(options) {
if (!$(this).is('input:file')) {
return false;
}
$(this).fileupload({
maxChunkSize: options.maxChunkSize,
maxFileSize: options.maxFileSize,
acceptFileTypes: options.allowedTypes,
type: 'POST',
dataType: 'json',
add: function (e, data) {
// common validations
},
start: function (e) {
// foo
if (options.onUploadStart) {
options.onUploadStart();
}
},
fail: function(e, data) {
// foo
if (options.onUploadError) {
options.onUploadError(result);
}
},
done: function(e, data) {
// foo
if (options.onUploadDone) {
options.onUploadDone(media_data);
}
}
});
};
The thing is that I made validations or process data, and return the results with callbacks. But, I notice that the callbacks were override with the next call to the plugin.. So, I upload a file in one place, and re the result show in another! What i'm doing wrong?
Should I need to store the options to each input element, like .data()?
EDIT 2: Fiddle of the html, and JS structure (not functional)
https://jsfiddle.net/a6axfm3v/
EDIT: I use this plugin in two ways
$input.myCustomUpload({
// ...
onUploadStart: this.onNewPostUploadStart.bind(this),
onUploadProgress: this.onNewPostUploadProgress.bind(this), //this reference to my object
onUploadError: this.onNewPostUploadError.bind(this),
// ...
});
$uploads_buttons = $container.find('._attach_image');
$uploads_buttons.each(function() {
var $upload_button = $(this);
var $parent = $upload_button.parents('._post-container');
$upload_button.myCustomUpload({ /*options, callbacks, etc*/});
});
$input has their own callbacks, and $uploads_buttons all have the same, but different that the $input ones..
Thanks.

Fine Uploader, getting rid of default behavior on "failed upload"

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
}
});