Get image name (and other file properties) onclick in dropzone.js - javascript

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:

Related

cypress-file-upload do not attach a file to one of the fields

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

dropzone.js `maxfilesexceeded` event is not getting fired. When adding files programatically

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

Dropzone.js inside Modal does not work

I'm using dropzone.js to upload files to the server. I included the js and css files and the "drag zone" is within a modal window that opens on the click of a button (the modal includes more elements that are not relevant here)
The problem I'm facing is that, inside the modal dialogue the "add file" section does not get triggered. Nothing happens when clicking on it, neither am I able to drag and drop files.
I saw a similar problem in another thread, but the solutions provided there didn't work for me (here: Using Dropzone.js inside Bootstrap modal).
I have been looking for an answer for days with no luck. Any ideas will be welcome.
This is my code
CSHTML:
[...]
<div class="W100pc">
<div class="FormUnit W045pc AdjustedWidth">
<div id="DropzoneElement" class="dropzone">
<div class="dz-message">Add file here</div>
</div>
</div>
</div>
[...]
JS:
[...]
$(document).ready(function() {
Dropzone.autoDiscover = false;
//Simple Dropzonejs
$("#DropzoneElement").dropzone({
maxFilesize: 100,
url: window.doSomethingHere,
addRemoveLinks: true,
success: function(file, response) {
var imgName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + imgName);
},
error: function(file, response) {
file.previewElement.classList.add("dz-error");
}
});
}
[...]
Thanks for your help.
You should subscribe to the shown.bs.modal event this event is fired when the modal has been made visible to the user. Initialize the Dropzone in this event.
$('#myModal').on('shown.bs.modal', function (e) {
// Initialize Dropzone
});

AngularJS upload photo without form submit

I want to upload a photo without hitting the having a submit button. I am using ionic framework and cordova plugin and the example below is getting a photo from the iphone's photo library.. for brevity i only included what's necessary for my request.
my view looks like this:
<form ng-submit="???">
<img class="img-circle" ng-src="{{prof_pic}}" ngclick="showActionsheet()" ng-if="pic_is_not_null()"/>
</form>
controller:
$scope.getPictureFromGallery = function() { $cordovaCamera.getPicture(secondoptions).then(function(imageData) {
$scope.imageData = imageData;
//data model
$scope.data = {prof_pic_link: imageData};
var image = angular.toJson($scope.data);
UserService.UpdateMyPhoto($localStorage.CurrentUser.id, $localStorage.CurrentUser.auth_token, image)
.success(function (data) {
$scope.prof_pic = "data:image/jpeg;base64," + imageData;
//to display the image in the view
}).
error(function(error,status) {
console.log(error);
console.log(status);
})
}, function(err) {
// error
});
};
You already have the answer in your question.
You can bind ng-click to a function that uploads the image to your server.
But more of a question is why you would not want the submit-button. Ponder this: The user whishes to upload an image, she selects an image that is to be uploaded but manages to select the wrong one.
If I read your scenario correctly, this will mean that the wrong image gets uploaded. If, on the other hand, there would be a submit-button the user can select a new image without the first one being uploaded.
So while you can do this, and you already have the answer yourself (ng-click="myUploadFunction(image)"), do you really want to?

Any ideas why my blueimp jQuery file upload script is not working?

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.

Categories

Resources