How to get list of mock files in dropzone.js? - dropzone.js

I am adding files to my dropzone as instructed in documentation. Then later I would like to check dropzone if it has any added mock files. Is there a way I could achieve this? Dropzone.files seems to be empty. It contains only the files uploaded in current session.
I am adding files like this:
var mockFile = { name: "Image1", size: fileSize };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, "images/img.jpg");
myDropzone.files.push(mockFile);

You must use myDropzone.files.push(mockFile), when adding you mock files.

Related

how to validate files before uploading in angular 6

How can I validate files before uploading in angular 4 and above?
i want file type and file size validation in angular 4 and above.
Screenshot of my issue
for each and every file I am getting correct file size and type except .msg file. How to get
file type as application/vnd.ms-outlook
application/octet-stream
for outlook files. Please help me out.
Your question is a bit (lot) vague. I assume you mean, how do you get the File object from an input in Angular. Dead simple. The same way you would with vanilla(ish) JS.
In your component, create a function to read your file:
readFile(fileEvent: any) {
const file = fileEvent.target.files[0];
console.log('size', file.size);
console.log('type', file.type);
}
And apply it to the (change) event on your input in your template:
<input type="file" (change)="readFile($event)">
You can do whatever you like with the file after that. The sample function just gets the size and type, as per your question.
Stackblitz Example: https://stackblitz.com/edit/angular-vpvotz
As a (slight) aside, rather than using any as the fileEvent type, you can define an interface to give you type hinting.
interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget;
}
While you're at it, also add the File type too. So your function becomes:
readFile(fileEvent: HTMLInputEvent) {
const file: File = fileEvent.target.files[0];
console.log('size', file.size);
console.log('type', file.type);
}
But, you don't have to. Although any types are not recommended.

How to delete renamed or non-renamed files in Dropzone.js - simple solution

I was working on this for a full day until I figured out this simple method that I am sharing with yall.
Use this part to listen to a deletion of a thumbnail:
init: function()
{
this.on("removedfile", function(file)
{
var lot = $(file.previewElement).find('[data-dz-name]').text();
$.post("image_delete.php",{name: lot});
});
}
The variable lot gets the name of the image or if you used renameFilename then it gets the new renamed name and with the POST method it is sent to the image_delete.php file that looks like this:
<?php
$tobedeleted = "images/".$_POST['name'];
unlink("$tobedeleted");
?>
I hope this helps a lot of people who struggled with this problem.
Happy coding :)

Dropzone js file removing

I have implemented Dropzonejs to upload files, I have a very simple question, how can I remove a file from the box, actually, there is a 'X' when you upload a file but it's not clickable. any idea?
i'm not allowed to post a screenshot so here is an external link:
enter link description here
In your configuration add the addRemoveLinks options with the value of "dictRemoveFile"
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 2,
addRemoveLinks: "dictRemoveFile", //this is what you want to add
};

Dynamically load jade templates

I'm working on a small documentation website and the content is stored in files. For instance I have two files chapter1.jade and chapter2.jade in a module1/ directory.
I'd like to read the module1/ directory and dynamically include all the chapterX.jade files in it.
I tried to have do directory = fs.readDirSync('module1/') and then in my view:
each item in directory
include item
But jade include doesn't support dynamic values (even `include #{item}) doesn't work. Do you have any idea how I could implement this ?
EDIT: I'd like to generate some code under the each loop (anchor for easy linking) so the solution would preferabily be in the view. I could obviously manually add the anchor in the included files but it is not ideal.
Thanks
Here is the short version of what I've done to make it work. It uses the jade Public API.
var directory = __dirname+'/views/bla/'
, files
, renderedHTML = '';
if( !fs.existsSync(directory) ) {
// directory doesn't exist, in my case I want a 404
return res.status(404).send('404 Not found');
}
// get files in the directory
files = fs.readdirSync(directory);
files.forEach(function(file) {
var template = jade.compile(fs.readFileSync(directory+file, 'utf8'));
// some templating
renderedHTML += '<section><a id="'+file+'" name="'+file+'" class="anchor"> </a>'+template()+'</section>';
});
// render the actual view and pass it the pre rendered views
res.render('view', {
title: 'View',
files: files,
html: renderedHTML
})
And the view just renders the html variable unescaped:
div(class="component-doc-wrap")
!{html}
As #user1737909 say, that's not possible using just jade.
The best way to do this (tho) is building a little Express Dynamic (view) Helpers
DEPECATED IN EXPRESS 3.XX
Check these: Jade - way to add dynamic includes
in addition to kalemas answer you can also write your includes to a file which is included in jade.
in this example I write my includes to include_all.jade. This file is included in a jade file.
If it does not work, check the path ;-)
e.g.
in your app.js
var includes = "path/to/include1\n";
includes += "path/to/include2";
...
incPath = "path/to/include_all.jade";
fs.open(incPath,'w',function(err,fd){
if(err){
throw 'error open file: ' + incPath +" "+ err;
}
var buffer = new Buffer(includes);
fs.write(fd,buffer,0,buffer.length,null,function(err){
if (err)
throw 'error writing file: ' +err;
fs.close(fd,function(){
console.log('file written ' + incPath);
});
});
});
in your jade file
include path/to/include_all.jade

How to inject CSS located on /skin?

I want to inject a css file located on the skin folder in a browser page.
It is located on chrome://orkutmanager/skin/om.css, accessing manually show the file contents correctly.
I've tried this, but it's not working... What am I missing, or is it impossible?
You can also use the nsIStyleSheetService:
loadCSS: function() {
var sss = Components.classes["#mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://addon/skin/style.css", null, null);
if(!sss.sheetRegistered(uri, sss.USER_SHEET))
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
}
If you use USER_SHEET, the website's own CSS rules have higher priority than yours. Using AGENT_SHEET, your CSS should have higher priority.
In any way I needed to enforce some rules by using hte !important keyword.
I found this workaround. Read the file then inject it's contents...
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
var style = $("<style type='text/css' />");
style.html(Read("chrome://orkutmanager/skin/om.css"));
$("head").append(style);
I found that the link you referred to works if you reference the page document. In my case, using gBrowser.contentDocument worked.
var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://extensionid/content/skin/style.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);
Obviously make sure that you can access your css via the resource:// protocol.

Resources