Dropzone.js is not showing preview as one image after another how to resolve this and how to show image with progress bar (not the file name and file size).
I have included basic.css file
my code is
in html
<div id="dropzone-previews">
</div>
javascript
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 10,
url: 'UploadImages',
previewsContainer: "#dropzone-previews",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 20,
// addRemoveLinks: true,
init: function() {
var cd;
this.on("success", function(file, response) {
$('.dz-progress').hide();
console.log(response);
console.log(file);
cd = response;
});
};
Edit:
I copied my code here I am selection images from bootstreap model and images are shown at <div id="dropzone-previews"></div> which is behind the model.
I have included the code but it is not showing problem which i am fetching at my local host.
Related
I have created a dropzone using ng-dropzone
myApp.config(function(dropzoneOpsProvider) {
dropzoneOpsProvider.setOptions({
url: 'url',
acceptedFiles: 'image/jpeg, images/jpg, image/png',
addRemoveLinks: true,
dictDefaultMessage: 'Click to add or drop photos',
dictRemoveFile: 'Remove photo',
dictResponseError: 'Could not upload this photo',
maxFilesize: 100,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 10
});
});
myApp.controller('topStoryController',
$scope.dzOptions = {
paramName: 'file',
maxFilesize: '10'
}; $scope.dzCallbacks = {
'successmultiple': function(file, xhr) {
console.log('uploaded ' + file.name);
console.log(file, xhr);
console.log(xhr.path);
},
};
$scope.post = function() {
}
);
Here I am uploading multiple image using dropzone that is working properly
after imaaging upload on post I want to remove images from dropzone.
how to achive this?
dropzone has the following function for removing all files.
removeAllFiles();
documentation of dropzone explains this function as following
If you want to remove all files, simply use .removeAllFiles(). Files
that are in the process of being uploaded won’t be removed. If you
want files that are currently uploading to be canceled, call
.removeAllFiles(true) which will cancel the uploads.
documentation of the ng-dropzone directive states that you can access dropzone functions using the following
$scope.dzMethods.removeFile(file);
or
<button ng-click="dzMethods.removeAllFiles();">...</button>
Using dropzone I would browse for a image file and the preview image would be displayed on the class "dropzone-previews". On the below the button trigger, how I can send "dropzone-previews" to another new page and display the image from there?
HTML
<form action="/upload-file" type="file" class="dropzone" id="upload-file-form" enctype="multipart/form-data">
<div class="filepicker"></div>
<div class="addFileButton">browse</div>
</form>
<button type="submit" class="btn btn-success pull-right"` id="btnUpload">Upload</button>
<div class="dropzone-previews"></div>
JS
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#upload-file-form', {
paramName: "file",
url: '/upload-file',
method: 'post',
acceptedFiles: ".png,.jpg,.gif,.jpeg",
maxFilesize: 256,
maxFiles: 1,
maxfilesexceeded: function(file) {
this.removeAllFiles();
this.addFile(file);
},
parallelUploads: 1,
uploadMultiple: false,
autoProcessQueue: false,
addRemoveLinks: false,
clickable: ".addFileButton",
previewsContainer: ".dropzone-previews",
});
$('#btnUpload').on('click', function(){
//redirect to new page (i.e myNewPage.php) along with the image
window.location.replace("");
});
Well, you would need to upload it somewhere and display the link. Atleast if you are only using jquery and php.
To upload it, you can hook into its events and post it to a php script to save or to aws.
myDropzone.on("addedfile", function(file) {
/* Here you could use jquery ajax calls to post it */
});
You can read about the dropzone documentation of the event here, and about uploading files with ajax jquery here and here.
I'm using Dropzone.js with Spring boot.
Everything works fine except, when I upload image it goes on the bottom of gallery.
How can I make it so that the image which is uploaded shows first (on the top of gallery). Does Dropzone have some built in methods that I could use?
var extraImageDropzone = new Dropzone('#extraImagesDropzone', {
url: "/uploads/upload",
maxFiles: 25,
acceptedFiles: 'image/*',
autoQueue: true,
addRemoveLinks: false,
parallelUploads: 1,
createImageThumbnails: false,
createImageData:false,
previewsContainer: null,
previewTemplate: '<li style="diplay:none"></li>',
hiddenInputContainer: "#extraImagesDropzoneToggle",
clickable: "#extraImagesDropzoneToggle",
// thumbnailWidth: 100,
thumbnailHeight: 100,
thumbnailMethod: `contain`,
complete: function(file, response) {
console.log('completed');
},
success: function(f, response) {
if (response.id) {
console.log('File uploaded' + response.URL);
$(".image-picker").data('picker').append_one(response.id, response.URL);
} else {
alert('Error while uploading');
this.removeFile(f);
}
}
});
Added prepend_one method to Image-picker lib and now works fine.
ImagePicker.prototype.prepend_one = function (val, image_src) {
var option = jQuery('<option>').val(val).attr('data-img-src', image_src);
this.select.prepend(option);
var picker_option = new ImagePickerOption(option[0], this, this.opts);
this.picker_options.push(picker_option);
this.picker.prepend(picker_option.node);
};
Can I add/remove the inputs one by one?
The input should only post the currently selected array of files.
I am using dropzone.js for my current project and dropzone.js does not help to append file as HTML file input and how I can post image files when post data.
This is my script:
var myDropzone = new Dropzone("#filedrag",{
url: "upload", // Set the Upload Url
parallelUploads: 5,
thumbnailWidth: 600,
thumbnailHeight: 600,
acceptedFiles:"image/*",
previewTemplate: previewTemplate,
maxFiles: 20,
previewsContainer: "#previews",
clickable: ".fileinput-button",
init: function() {this.on("success", function(file, response) {
});
this.on("addedfile", function(file) {
});
}
});
For my project I'm using the Drag & Drop library DropzoneJS. It's working nicely, but I want to have a specific functionality that (for as far as I can see) is not supported 'out of the box'.
In my Dropzone config I've specified the acceptedFiles:
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"
When I use the browse button it automatically checks if the file is supported or not. But when I drag & drop files, the check is done AFTER the upload has already been done, and displays the file with an error message.
What I'd like to achieve is that the drag & drop first checks if the files are supported, and automatically discard the unsupported file. I'd still like to display an error message which states that some of the files are not supported.
For reference, here is my complete Dropzone config:
import Dropzone from 'dropzone';
export default class UI_DropZone {
constructor() {
if (document.querySelector('#dropZone')) {
let previewNode = document.querySelector("#template");
previewNode.id = "";
let previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
return new Dropzone("#dropZone", {
url: "/dist/files",
thumbnailWidth: 300,
thumbnailHeight: 300,
parallelUploads: 20,
maxFilesize: 10,
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
previewTemplate: previewTemplate,
previewsContainer: '#previews',
clickable: '.fileinput-button',
autoProcessQueue: false
});
}
}
}
You can catch errors and remove the file with some sort of notification if it is a problem:
init: function() {
this.on("error", function(file, message, xhr) {
if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
alert(message);
});
}
So with your config this will look like:
return new Dropzone("#dropZone", {
url: "/dist/files",
thumbnailWidth: 300,
thumbnailHeight: 300,
parallelUploads: 20,
maxFilesize: 10,
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
previewTemplate: previewTemplate,
previewsContainer: '#previews',
clickable: '.fileinput-button',
autoProcessQueue: false,
"error": function(file, message, xhr) {
if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
alert(message);
}
});
Example: https://jsfiddle.net/m4ye8gL2/1
myDropzone.on("error", function(file, message, xhr) {
if(xhr == null) myDropzone.removeFile(file);
alert(message)
});