I am using dropzone in my vuejs project. I have set maxFiles: 1 in my dropzone options.
Now I have to show existing file from server in dropzone so i am using this code to add existing file in my dropzone.
let mockFile = { name: 'Filename', size: file.size };
myDropzone.emit('addedfile', mockFile);
myDropzone.emit('thumbnail', mockFile, file.dataURL);
myDropzone.emit('success', mockFile);
myDropzone.emit('complete', mockFile);
myDropzone.files.push(file);
This code is working fine and file is getting added in the dropzone. However when i add more files(manually) to that dropzone the maxfilesexceeded event is not getting fired.
Note: if i add files manually instead of programatically then it is firing maxfilesexceeded event.
use this after push Every item to files list:
myDropzone._updateMaxFilesReachedClass();
Related
I'm using cypress-file-upload for attaching files to input fields. Using the same approach for all of these inputs in different places (in different modal windows in my case). But in one place files do not attach for some reason, in executed steps file is attached but in modal it isn't shown (red zone).
What I need to do:
open modal
attach a file
fill all fields
click on the Submit button, but it's disabled because fails isn't attached
And how it looks in code:
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.get('input[type=file]').attachFile(file)
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}
All fields successfully filled, but file not attached. Any ideas?
The log is telling you the file is actually attached. (Inspect also in dev console, the input element will have a non-empty files array).
It looks like you need to trigger a change or input event to tell the app something has been attached
cy.get('input[type=file]').attachFile(file)
.trigger('change')
or
cy.get('input[type=file]').attachFile(file)
.trigger('input')
Failing that, try to force the button click
cy.get(this.modal_proceedButton).click({force:true})
This is a custom command that I use to upload files and it has never failed me :)
Cypress.Commands.add("UploadFile", function () {
cy.fixture("somefile", "binary")
.then(Cypress.Blob.binaryStringToBlob)
.then((fileContent) => {
cy.get('someelement').attachFile({
fileContent,
filePath: "somefile",
fileName: "somefile",
do more stuff here
});
});
});
Think this should work for you
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.fixture("somefile", "binary")
.then(Cypress.Blob.binaryStringToBlob)
.then((fileContent) => {
cy.get('input[type=file]').attachFile({
fileContent,
filePath: "somefile",
fileName: "somefile",
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}
Or you can just use the first example I gave as a custom command and do:
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.UploadFile();
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}
I am using Dropzone:
jQuery(function () {
let dropzone = jQuery("#upload-box")
dropzone.dropzone({
url: "/file/upload",
autoProcessQueue: false,
addedfile: function (file) {
console.log(file)
}
})
})
On added file I wan't to add it to an input <input type="file" name="file">. I know how to create to input but don't know how to add the file, so when I submit the whole form to get it in the $_FILES array on the server. #upload-box is div, not a form and that's why I want to add every file in <input type="file" name="file">.
I don't think that is possible. Please see this link: Set value of type="file" via jquery
I think you should upload files with ajax (xhr) asynchronously as they are dropped on the div.
In dropzone.js after upload all images, how i can get file name when clicking one of them?
http://runnable.com/me/VN-nEtJXQqlk07H4
You can access the HTML of the file preview in any of the events with file.previewElement and bind "onclick" event listener.
This works for me, in a similar situation:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("thumbnail", function(file) {
console.log(file); // will send to console all available props
file.previewElement.addEventListener("click", function() {
alert(file.name);
});
});
}
};
I was displaying files from the server, recommended from documentation addedfile event didn't fire, that's why I used thumbnail instead (fires when thumbnail has been generated).
Result (after clicking on filename):
Tips from documentation:
To access the preview html of a file, you can access
file.previewElement. For example:
myDropzone.on("addedfile", function(file) {
file.previewElement.addEventListener("click", function() {
myDropzone.removeFile(file);
});
});
Other available file properties:
I am trying to implement Dropzone.js into a custom CMS. I have no problems processing the files as needed in PHP, that's actually the easy part.
I need to know how to do the following on a page-by-page basis (will use the dropzone script in several pages for different functions):
Restrict the files types (jpg,jpeg,pdf)
Restrict the number of files that can be uploaded (some pages will
just be one file, some will be up to 100)
Restrict the Max File Size
Redirect the page or have a 'next' button/link appear when the file
upload is complete.
Can I add this at the bottom of the page, while addressing the settings:
<script src="../assets/global/plugins/dropzone/dropzone.js"></script>
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Demo.init(); // init demo features
FormDropzone.init();
});
</script>
HTML:
<div id="my-dropzone"></div>
JavaScript:
var initDropzone = function( filesAllowed ){
Dropzone.options.myDropzone = {
paramName: "file",
uploadMultiple: true,
maxFiles: filesAllowed, //this will need to be set upon init,
acceptedFiles: ['image/jpeg', 'image/jpg', 'application/pdf'],
complete: function() {
alert('Your file was successfully uploaded!');
}
};
}
//init the dropzone
initDropzone( 4 );
I'm using blueimp JQuery file upload script to fancy the uploading of files. You can download it here: https://github.com/blueimp/jQuery-File-Upload/zipball/master (ZIP).
Here is a snippet of the JavaScript code:
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Dirs
url: 'accesspoint/upload.php',
uploadDir: 'accesspoint/files/',
thumbnailsDir: '',
// Options
autoUpload: 1,
maxNumberOfFiles: 1,
limitConcurrentUploads: 1,
maxFileSize: 1000000,
});
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function (files) {
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
// Fix for IE7 and lower:
$(this).show();
});
});
// Open download dialogs via iframes,
// to prevent aborting current uploads:
$('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
e.preventDefault();
$('<iframe style="display:none;"></iframe>')
.prop('src', this.href)
.appendTo('body');
});
});
Now take a look at http://www.mcemperor.nl/test/appstest/blueimpjqueryfileupload/example/. We can upload a file, and it works.
Now if I upload a file which is larger than the maximum file size defined in the JavaScript snippet above, then you'll see something like this.
Perfect, works as expected. (Note that I have set the maximum upload size to 1000000 bytes, so if you upload a file of 1 MB, it states the file is too big.)
But... Now when I paste the same script (with some small modifications) as a module into a framework of some kind, the script won't work properly; I get this:
As you can see, The 'delete entry' icon is smaller (it's supposed to be square) and nothing happens when I click on it.
I do not have any clue what can be the problem. Does anyone have ideas?
Can using this script inside another <form> be the problem?
Can multiple elements with the same id be the problem?
Can collisions between javascripts (e.g. redefining functions or objects) be the problem?
I am not sure how to fix the scripts, but maybe a workaround would be to locate the element using FireBug and patch it with a css entry or a jquery function. Also, you might take a look at jquery.fileupload-ui.css which is the css file responsible for overriding jqueryUI elements for the control. I do know that the buttons are styleable independently. Again, I am not for certain, but there may be a class added via script to change the icon on the delete button.